add myfollows to explore page

src/components/explore/content.jsx

@@ -37,6 +37,35 @@ const focusStats = [
 ];
 
 export default function ExploreContent() {
+  const [followTab, setFollowTab] = React.useState("商品");
+  const followConfig = {
+    商品: {
+      action: "添加商品",
+      empty: "添加关注商品，实时监控数据走势",
+      placeholder: "搜索已关注商品"
+    },
+    达人: {
+      action: "关注达人",
+      empty: "添加关注达人，实时监控数据走势",
+      placeholder: "搜索已关注达人"
+    },
+    小店: {
+      action: "添加店铺",
+      empty: "添加关注店铺，实时监控数据走势",
+      placeholder: "搜索已关注店铺"
+    },
+    视频: {
+      action: "添加视频",
+      empty: "添加关注视频，实时监控数据走势",
+      placeholder: "搜索已关注视频"
+    },
+    脚本工具: {
+      action: "添加脚本",
+      empty: "添加关注脚本，实时监控数据走势",
+      placeholder: "搜索已关注脚本"
+    }
+  };
+
   return (
     <div className="explore-content">
       <section className="explore-how">
@@ -270,13 +299,19 @@ export default function ExploreContent() {
                   <Card className="explore-follow-card" bordered={false}>
                     <div className="explore-follow-tabs">
                       {["商品", "达人", "小店", "视频", "脚本工具"].map((tab) => (
-                        <button key={tab} className="explore-follow-tab">
+                        <button
+                          key={tab}
+                          className={`explore-follow-tab${followTab === tab ? " is-active" : ""
+                            }`}
+                          type="button"
+                          onClick={() => setFollowTab(tab)}
+                        >
                           {tab}
                         </button>
                       ))}
                       <div className="explore-follow-actions">
                         <Button type="primary" size="small">
-                          添加商品
+                          {followConfig[followTab].action}
                         </Button>
                       </div>
                     </div>
@@ -294,27 +329,49 @@ export default function ExploreContent() {
                             </button>
                           )
                         )}
-                        <button className="explore-follow-filter">分组</button>
+                        {followTab === "达人" && (
+                          <button className="explore-follow-filter is-disabled" type="button">
+                            合作店铺
+                            <span className="explore-follow-lock">🔒</span>
+                          </button>
+                        )}
+                        <button className="explore-follow-filter explore-follow-select" type="button">
+                          分组
+                        </button>
+                        {followTab === "达人" && (
+                          <>
+                            <button className="explore-follow-filter explore-follow-select" type="button">
+                              直播场次
+                            </button>
+                            <button className="explore-follow-filter explore-follow-select" type="button">
+                              视频数量
+                            </button>
+                          </>
+                        )}
                       </div>
                     </div>
-                    <div className="explore-follow-stats">
+                    {followTab === "商品" && (
-                      {focusStats.map((stat) => (
+                      <div className="explore-follow-stats">
-                        <div key={stat.label} className="explore-follow-stat">
+                        {focusStats.map((stat) => (
-                          <div className="explore-follow-stat-label">{stat.label}</div>
+                          <div key={stat.label} className="explore-follow-stat">
-                          <div className="explore-follow-stat-value">{stat.value}</div>
+                            <div className="explore-follow-stat-label">{stat.label}</div>
-                          {stat.sub && <div className="explore-follow-stat-sub">{stat.sub}</div>}
+                            <div className="explore-follow-stat-value">{stat.value}</div>
+                            {stat.sub && <div className="explore-follow-stat-sub">{stat.sub}</div>}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                    {followTab === "商品" && (
+                      <div className="explore-follow-search">
+                        <input type="text" placeholder={followConfig[followTab].placeholder} />
+                        <div className="explore-follow-tools">
+                          <Button size="small">列表设置</Button>
+                          <Button size="small" type="primary">
+                            数据导出
+                          </Button>
                         </div>
-                      ))}
-                    </div>
-                    <div className="explore-follow-search">
-                      <input type="text" placeholder="搜索已关注商品" />
-                      <div className="explore-follow-tools">
-                        <Button size="small">列表设置</Button>
-                        <Button size="small" type="primary">
-                          数据导出
-                        </Button>
                       </div>
-                    </div>
+                    )}
                     <div className="explore-follow-table">
                       <div className="explore-follow-table-head">
                         <span>商品信息</span>
@@ -328,10 +385,10 @@ export default function ExploreContent() {
                       <div className="explore-follow-empty">
                         <div className="explore-follow-empty-icon" />
                         <div className="explore-follow-empty-text">
-                          添加关注商品，实时监控数据走势
+                          {followConfig[followTab].empty}
                         </div>
                         <Button type="primary" size="small">
-                          添加商品
+                          {followConfig[followTab].action}
                         </Button>
                       </div>
                     </div>

src/css/explore/index.css

@@ -275,6 +275,12 @@
   padding-bottom: 8px;
 }
 
+.explore-follow-tab.is-active {
+  color: #1677ff;
+  border-bottom: 2px solid #1677ff;
+  font-weight: 600;
+}
+
 .explore-follow-actions {
   margin-left: auto;
 }
@@ -314,6 +320,32 @@
   color: #6b7280;
 }
 
+.explore-follow-filter.is-disabled {
+  color: #b0b7c3;
+  background: #f5f6f8;
+  cursor: not-allowed;
+}
+
+.explore-follow-select {
+  padding-right: 18px;
+  position: relative;
+}
+
+.explore-follow-select::after {
+  content: "▾";
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 10px;
+  color: #9aa3af;
+}
+
+.explore-follow-lock {
+  margin-left: 6px;
+  font-size: 11px;
+}
+
 .explore-follow-stats {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));