优化ui

keyBoard/Class/Home/VC/HomeRankContentVC.h

@@ -10,8 +10,8 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
-@interface HomeRankContentVC : UIViewController<JXCategoryListContentViewDelegate>
-@property (nonatomic, strong) BaseTableView *tableView;
+@interface HomeRankContentVC : UIViewController<JXCategoryListContentViewDelegate, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>
+@property (nonatomic, strong) UICollectionView *collectionView;
 
 @end
 

keyBoard/Class/Home/VC/HomeRankContentVC.m

@@ -5,93 +5,107 @@
 //  Created by Mac on 2025/11/6.
 //
 
+@import UIKit;
 #import "HomeRankContentVC.h"
-#import "HomeHotCell.h"
-@interface HomeRankContentVC () <UITableViewDataSource, UITableViewDelegate>
-@property (nonatomic, strong) NSArray<NSDictionary *> *dataSource; // 简单模拟数据
 
+// 自定义卡片 Cell
+#import "HomeRankCardCell.h"
+
+@interface HomeRankContentVC ()
+@property (nonatomic, strong) NSArray<NSDictionary *> *dataSource; // 简单模拟数据
 @end
 
 @implementation HomeRankContentVC
 
 - (void)viewDidLoad {
     [super viewDidLoad];
-    // Do any additional setup after loading the view.
-    // 构建数据（演示）
-    self.dataSource = @[
-        @{@"rank":@4, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
-        @{@"rank":@5, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@YES},
-        @{@"rank":@6, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
-        @{@"rank":@7, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
-        @{@"rank":@4, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
-        @{@"rank":@5, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@YES},
-        @{@"rank":@6, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
-        @{@"rank":@7, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
-        @{@"rank":@4, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
-        @{@"rank":@5, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@YES},
-        @{@"rank":@6, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO},
-        @{@"rank":@7, @"title":@"Ambiguous", @"sub":@"Be Neither Too Close Nor Too Distant, Want To ...", @"joined":@NO}
-    ];
-    // 设置背景颜色：随机色
-    self.view.backgroundColor = COLOR_WITH_RGB(arc4random()%255/255.0, arc4random()%255/255.0, arc4random()%255/255.0, 1);
-    [self.view addSubview:self.tableView];
-    [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
-        make.left.top.right.equalTo(self.view);
-        make.bottom.equalTo(self.view);
 
+    self.view.backgroundColor = COLOR_WITH_RGB(246/255.0, 253/255.0, 249/255.0, 1.0); // 淡绿色背景
+
+    // 数据
+    self.dataSource = @[
+        @{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(NO)},
+        @{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(YES)},
+        @{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(NO)},
+        @{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(YES)},
+        @{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(NO)},
+        @{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(YES)},
+        @{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(NO)},
+        @{@"title":@"High EQ", @"desc":@"Be Neither Too Close\nNor Too Distant...", @"people":@"Two Million People\nHave Used It", @"added":@(YES)}
+    ];
+
+
+    [self.view addSubview:self.collectionView];
+    [self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.edges.equalTo(self.view);
     }];
 }
 
-#pragma mark - UITableViewDataSource
+- (UICollectionView *)collectionView{
+    if (!_collectionView) {
+        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
+        layout.sectionInset = UIEdgeInsetsMake(16, 16, 16, 16);
+        layout.minimumLineSpacing = 24;
+        layout.minimumInteritemSpacing = 16;
 
-- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
+        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
+        _collectionView.backgroundColor = [UIColor clearColor];
+//        _collectionView.alwaysBounceVertical = YES;
+        _collectionView.bounces = false;
+        _collectionView.dataSource = self;
+        _collectionView.delegate = self;
+        [_collectionView registerClass:[HomeRankCardCell class] forCellWithReuseIdentifier:@"HomeRankCardCell"];
+//        self.collectionView.translatesAutoresizingMaskIntoConstraints = NO;
+    }
+    return _collectionView;
+}
+
+
+#pragma mark - UICollectionViewDataSource
+
+- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
     return self.dataSource.count;
 }
 
-- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
-    HomeHotCell *cell = [tableView dequeueReusableCellWithIdentifier:HomeHotCell.reuseId forIndexPath:indexPath];
-    NSDictionary *item = self.dataSource[indexPath.row];
-    // 配置 cell
-    [cell configWithRank:[item[@"rank"] integerValue]
-                  title:item[@"title"]
-               subtitle:item[@"sub"]
-                 joined:[item[@"joined"] boolValue]];
+- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
+    HomeRankCardCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"HomeRankCardCell" forIndexPath:indexPath];
+    NSDictionary *d = self.dataSource[indexPath.item];
+    BOOL added = [d[@"added"] boolValue];
+    [cell configureWithTitle:d[@"title"]
+                        desc:d[@"desc"]
+                      people:d[@"people"]
+                       added:added];
+    __weak typeof(self) weakSelf = self;
+    cell.onTapAction = ^{
+        // 切换添加/已添加状态并刷新该项
+        NSMutableArray *m = [weakSelf.dataSource mutableCopy];
+        NSMutableDictionary *md = [m[indexPath.item] mutableCopy];
+        BOOL cur = [md[@"added"] boolValue];
+        md[@"added"] = @(!cur);
+        m[indexPath.item] = md;
+        weakSelf.dataSource = [m copy];
+        [weakSelf.collectionView reloadItemsAtIndexPaths:@[indexPath]];
+    };
     return cell;
 }
 
-#pragma mark - UITableViewDelegate
+#pragma mark - UICollectionViewDelegateFlowLayout
 
-- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
-    return 84.0;
-}
-
-- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
-    [tableView deselectRowAtIndexPath:indexPath animated:YES];
-    
-}
-
-- (BaseTableView *)tableView {
-    if (!_tableView) {
-        // 使用 BaseTableView，统一默认配置
-        _tableView = [[BaseTableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];
-        _tableView.dataSource = self;
-        _tableView.delegate = self;
-        _tableView.bounces = false;
-        _tableView.separatorStyle = UITableViewCellSeparatorStyleNone; // 设计为卡片式，去掉系统分割线
-        _tableView.showsVerticalScrollIndicator = NO;
-        _tableView.contentInset = UIEdgeInsetsMake(8, 0, KB_SafeAreaBottom(), 0);
-        [_tableView registerClass:HomeHotCell.class forCellReuseIdentifier:HomeHotCell.reuseId];
-    }
-    return _tableView;
+- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
+    CGFloat totalHInset = 16 + 16; // section i/l/r
+    CGFloat spacing = 16; // interitem spacing
+    CGFloat w = collectionView.bounds.size.width - totalHInset; // not including section insets yet
+    // Two columns → each width = (width - spacing - lr insets)/2
+    CGFloat cellWidth = (w - spacing) / 2.0;
+    // 固定高度，接近示意图比例
+    CGFloat cellHeight = 340.0;
+    return CGSizeMake(floor(cellWidth), cellHeight);
 }
 
 
 #pragma mark - JXCategoryListContentViewDelegate
-
-/**
- 实现 <JXCategoryListContentViewDelegate> 协议方法，返回该视图控制器所拥有的「视图」
- */
 - (UIView *)listView {
     return self.view;
 }
+
 @end

keyBoard/Class/Home/VC/HomeRankVC.h

@@ -12,7 +12,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 @interface HomeRankVC : UIViewController<JXCategoryListContainerViewDelegate>
 // 列表
-@property (nonatomic, strong) BaseTableView *tableView;
+@property (nonatomic, strong) UICollectionView *collectionView;
 @end
 
 NS_ASSUME_NONNULL_END

keyBoard/Class/Home/VC/HomeRankVC.m

@@ -131,7 +131,7 @@
 // 返回各个列表菜单下的实例，该实例需要遵守并实现 <JXCategoryListContentViewDelegate> 协议
 - (id<JXCategoryListContentViewDelegate>)listContainerView:(JXCategoryListContainerView *)listContainerView initListForIndex:(NSInteger)index {
     HomeRankContentVC *list = [[HomeRankContentVC alloc] init];
-    self.tableView = list.tableView;
+    self.collectionView = list.collectionView;
     return list;
 }