diff --git a/src/components/explore/content.jsx b/src/components/explore/content.jsx
index 880bc94..64019d4 100644
--- a/src/components/explore/content.jsx
+++ b/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 (
@@ -270,13 +299,19 @@ export default function ExploreContent() {
{["商品", "达人", "小店", "视频", "脚本工具"].map((tab) => (
-
@@ -294,27 +329,49 @@ export default function ExploreContent() {
)
)}
- 分组
+ {followTab === "达人" && (
+
+ 合作店铺
+ 🔒
+
+ )}
+
+ 分组
+
+ {followTab === "达人" && (
+ <>
+
+ 直播场次
+
+
+ 视频数量
+
+ >
+ )}
-
- {focusStats.map((stat) => (
-
-
{stat.label}
-
{stat.value}
- {stat.sub &&
{stat.sub}
}
+ {followTab === "商品" && (
+
+ {focusStats.map((stat) => (
+
+
{stat.label}
+
{stat.value}
+ {stat.sub &&
{stat.sub}
}
+
+ ))}
+
+ )}
+ {followTab === "商品" && (
+
+
+
+ 列表设置
+
+ 数据导出
+
- ))}
-
-
+ )}
商品信息
@@ -328,10 +385,10 @@ export default function ExploreContent() {
- 添加关注商品,实时监控数据走势
+ {followConfig[followTab].empty}
- 添加商品
+ {followConfig[followTab].action}
diff --git a/src/css/explore/index.css b/src/css/explore/index.css
index 4d49fad..3ec5571 100644
--- a/src/css/explore/index.css
+++ b/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));