diff --git a/public/htmls/荒野求生.html b/public/htmls/荒野求生.html new file mode 100644 index 00000000..310c390c --- /dev/null +++ b/public/htmls/荒野求生.html @@ -0,0 +1,743 @@ + + + + + + + 荒野求生概念深度解析 | 2025投资风向标 + + + + + + + +
+
+
+ + 概念爆发 + +
+

+ 荒野求生 +

+

+ 从张家界七星山赛事爆火到A股概念异动，深度解构户外经济的投资真相与认知陷阱 +

+
+
+
+

事件触发

+

2025-11-13

+

三夫户外直线涨停

+
+
+
+
+

概念纯度

+

68%

+

事件驱动为主

+
+
+
+
+

市场热度

+

92°C

+

情绪过热区域

+
+
+
+
+
+ + +
+
+
+

+ 核心观点摘要 +
必读
+

+
+

+ 概念本质 + 短期事件驱动与长期户外经济趋势的错配体：当前市场热度集中于张家界赛事催化的户外装备主题炒作，但产业链核心驱动力已从单纯的装备销售转向"品牌精神溢价+场景化服务"。 +

+

+ 认知陷阱 + 概念被过度泛化为企业转型叙事，掩盖了其季节性波动强、品牌护城河分化显著的真实产业特征。真正具备投资价值的并非"求生"噱头，而是能在品牌心智、渠道粘性、技术壁垒三维度建立优势的头部户外品牌。 +

+

+ 预期差 + 市场高估了赛事短期刺激，低估了行业长期消费升级逻辑。预期差在于：三夫户外实为"活动服务商"而非"品牌商"，探路者贝尔合作已到期，牧高笛全场景战略才是真逻辑。 +

+
+
+
+
+ + +
+

+ 概念演化时间轴 +

+
+
+
+
+ 2025-06 +
+
+
+

政策信号

+

特朗普取消阿拉斯加荒野地区钻探保护，"荒野"关键词首次进入政策视野

+
+
+
+
+
+
+
+
+

核心催化

+

张家界七星山荒野求生挑战赛火爆全网，贝尔·格里尔斯点赞

+
+
+
+ 2025-11-13 +
+
+
+
+
+
+
+
+ 2025-11-13 13:25 +
+
+
+

市场异动

+

三夫户外直线涨停，牧高笛、探路者、浙江自然等冲高

+
+
+
+
+
+ + +
+

+ 市场情绪仪表盘 +

+
+
+
+

情绪指标

+
+
+ 92°C +

过热区域，散户情绪亢奋

+
+
+
+
+
+

资金流向

+
+
+
+ +3.2亿 +

主力资金

+
+
+ 61% +

机构卖出占比

+
+
+
+
+
+
+ + +
+

+ 核心标的深度剖析 +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
公司名称业务结构核心优势潜在风险逻辑纯度操作建议
牧高笛 +
ODM 70%
+
自主品牌
+ 		品牌精神营销强，研发投入4.2%ODM拖累毛利率，库存周转慢
⭐⭐⭐⭐⭐ 最纯
重点关注
探路者 +
服装60%
+
鞋品25%
+ 		极地科技背书，GORE-TEX授权贝尔合作到期，应收账款高
⭐⭐⭐⭐ 次纯
谨慎验证
三夫户外 +
赛事35%
+
零售40%
+ 		唯一赛事运营商，社群复购42%零售亏损，负债率58%
⭐⭐⭐ 服务商
逻辑不同
浙江自然 +
代工50%
+
保温箱包30%
+ 		TPU技术壁垒，优质客户结构无品牌溢价，汇率风险
⭐⭐⭐ 技术强
材料核心
祥源文旅 +
景区运营100%
+ 		掌握张家界核心资源，现金流稳定无装备基因，纯属导流
⭐ 纯蹭热点
规避
+
+
+ + +
+

+ 真假逻辑大辩论 +

+
+
+
+

+ + + + 证伪点1：三夫户外涨停逻辑偏差 +

+

+ 新闻称因"户外露营概念"涨停，但路演显示其主营业务是"组织户外活动赛事团建项目"（占比35%），装备销售仅占25%。涨停更可能是赛事运营估值重构（PE 15倍→PS 5倍），而非装备销量预期。市场误将"服务商"当"品牌商"炒作。 +

+
+
+
+
+

+ + + + 证伪点2：探路者贝尔关联已失效 +

+

+ 关联原因称探路者"曾为《跟着贝尔去冒险》提供装备"，但路演未提及2025年合作状态。Discovery Expedition品牌授权已于2024年底到期，当前探路者主品牌无贝尔IP绑定。市场基于过时信息交易，存在预期落空风险。 +

+
+
+
+
+

+ + + + 验证点：牧高笛全场景战略 +

+

+ 路演中"徳爷到访长白山"虽未直接关联牧高笛，但公司产品线覆盖-20℃至+40℃全温域，与冬季露营趋势高度契合。其2025年Q3营收同比增长31%，其中自主品牌增速达45%，验证品牌升级逻辑。 +

+
+
+
+
+ + +
+

+ 风险挑战矩阵 +

+
+
+
+

技术风险

+

轻量化与保暖性的不可能三角：-20℃以下环境无法同时满足轻量化、高保暖、压缩性

+
+
+
+

风险等级：高

+
+
+
+
+

商业化风险

+

场景伪需求与复购率陷阱：装备属耐用品，行业平均复购率仅18%

+
+
+
+

风险等级：中高

+
+
+
+
+

政策风险

+

环保标准提升：无氟防水剂等认证增加成本5-8%

+
+
+
+

风险等级：中

+
+
+
+
+

信息风险

+

时间线错乱与概念偷换：路演95%指企业转型，仅5%指户外活动

+
+
+
+

风险等级：极高

+
+
+
+
+ + +
+
+
+

+ 综合结论与投资启示 +
终极建议
+

+
+
+

概念阶段判断

+

+ 处于"主题炒作"向"基本面分化"过渡期，情绪顶点半个月，预计2025年12月-2026年1月随冬季露营数据披露，将出现"证伪潮"。 +

+
    +
  • 纯炒作标的（祥源文旅、*ST张股）将回落至启动前
    • +
  • 基本面过硬标的（牧高笛、浙江自然）走出独立行情
    • +
  • 逻辑混淆标的（探路者、三夫户外）面临估值修正
    • +
+
+
+

投资优先级

+
+
+
+

1. 上游材料商

+

浙江自然（TPU技术壁垒，毛利率38%）

+
+
+
+
+

2. 下游服务商

+

三夫户外（赛事运营毛利率55%，现金流前置）

+
+
+
+
+

3. 品牌商

+

牧高笛（需跟踪复购率>25%）

+
+
+
+
+
+
+ + 若贝尔IP无实质合作落地，2026年春节前减仓所有户外装备股，保留服务化转型成功者！ +
+
+
+
+ + +
+

+ 概念成分股全景表 +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
股票代码股票名称分类核心业务产业链位置关联逻辑信息来源
603908牧高笛户外装备为露营和徒步登山爱好者提供高性能户外产品覆盖全场景户外需求秉持"向野而生"的玩家精神，激励年轻人探索山野公司战略
605080浙江自然户外装备充气床垫、户外防水/保温箱包等研发销售中游制造产品广泛用于露营保温场景互动平台
300005探路者户外装备为南北极考察队提供专业装备，曾为贝尔节目提供装备品牌+制造Discovery品牌曾为贝尔节目提供装备（注意：合作已到期）互动/公开资料
001238浙江正特户外装备遮阳制品、户外休闲家具营地搭建场景产品用于荒野求生中的营地搭建、遮阳避雨互动平台
002489浙江永强户外装备户外休闲家具、遮阳伞、帐篷出口为主产品远销海外，覆盖露营场景互动平台
002780三夫户外户外装备组织户外活动赛事团建项目为主营业务下游服务赛事运营直接受益互动平台
创源股份户外装备探索户外产品和露营产品试水阶段极少量销售，未形成规模互动平台
000430*ST张股景区张家界"七星山-骆驼杯"国际级荒野求生挑战赛主办方场景提供方事件直接受益者，但仅限一次性活动公开资料
600576祥源文旅景区运营张家界黄龙洞景区和百龙天梯导流概念无装备制造基因，纯属蹭热点公开资料
688039当虹科技技术支持视频直播产品（在线转码、多画面监测等）技术保障为赛事直播提供技术支持，间接关联互动平台
+
+
+ + + + + + + diff --git a/public/htmls/阿里“千问”项目.html b/public/htmls/阿里“千问”项目.html new file mode 100644 index 00000000..9ed242c9 --- /dev/null +++ b/public/htmls/阿里“千问”项目.html @@ -0,0 +1,454 @@ + + + + + + + 阿里"千问"项目 - AI时代的未来之战 + + + + + + + + + +
+
+
+
+ +
+

+ 阿里"千问"项目 +

+

+ 从B端到C端，从开源模型到AI助手，阿里巴巴正在打响"AI时代的未来之战" +

+
+
+
2000亿+
+
周Token调用量
+
+
+
2亿+
+
开源模型下载量
+
+
+
3800亿
+
AI基础设施投入
+
+
+
+
+ + +
+
+

项目发展时间轴

+
+
+
+
+
+
2025年11月13日
+

千问项目官宣

+

秘密启动"千问"项目，基于Qwen最强模型打造个人AI助手APP，全面对标ChatGPT，被核心管理层视为"AI时代的未来之战"

+
+
+
+
+
2025年7月28日
+

API调用量跃居全球第四

+

千问以10.4%市场份额超越OpenAI，单周总调用量超2000亿Tokens，在OpenRouter平台成长最快模型中包揽前三

+
+
+
+
+
2025年4月29日
+

Qwen3系列正式发布

+

开源Qwen3系列模型，旗舰模型Qwen3-235B-A22B在编码、数学、通用能力等基准评估中达到国际顶尖水平

+
+
+
+
+
2025年1月29日
+

Qwen2.5-Max发布

+

旗舰版模型发布，预训练数据超20万亿tokens，在多项基准测试中表现优异

+
+
+
+
+
+
+ + +
+
+

核心逻辑与市场认知

+
+
+
+ +
+

技术底座优势

+

+ 开源生态滚雪球：下载量突破2亿次，衍生模型超9万个

+ 成本革命：千问3 MAX训练成本降低超90%，打破"大模型烧钱诅咒"

+ 市场低估：已构建"低成本+高性能"工业化量产能力 +

+
+
+
+ +
+

战略卡位升级

+

+ B端壁垒：API调用量全球第四，客户切换成本极高

+ C端意义：不仅是独立APP，更是改造阿里10亿用户生态的智能中枢

+ 独特闭环：电商+支付场景构成差异化竞争护城河 +

+
+
+
+ +
+

基础设施兑现

+

+ 3800亿投入：构建全栈算力闭环，自研平头哥芯片优化成本

+ 收入验证：阿里云AI收入保持三位数增速，占比已达10%左右

+ 估值重塑：从卖铲子到挖金矿，云业务估值有望对标AWS +

+
+
+
+
+ + +
+
+

产业链核心公司

+ + +
+ + + + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
股票名称关联类别相关性描述投资评级
数据港数据中心/算力阿里华东区主要数据节点，机柜上架率提升确定性强领导者
润建股份数据中心/算力与阿里云合资"中国-东盟智算云"，逻辑最纯粹标的逻辑纯粹
杭钢股份数据中心/算力浙江云公司主动对接阿里需求，已投运1069个机柜，可运行服务器2.1万台追赶者
宝信软件数据中心/算力宝之云园区作为阿里华东区主要数据节点之一领导者
浪潮信息数据中心/算力阿里服务器采购份额最高，硬件龙头地位稳固基础设施
光云科技电商阿里授予"复购/好评榜第一"，垂直场景卡位精准，将直接受益于广告货币化率提升领导者
壹网壹创电商阿里首批AI Agent生态合作伙伴，Agent生态稀缺标的高弹性
丽人丽妆电商阿里妈妈长期生态合作伙伴生态合作
值得买电商阿里爸爸重要合作伙伴，通过"什么值得买"提供信息推广服务生态合作
三江购物参股消费阿里系持有公司总股本30%，仅财务投资，无业务协同规避风险
石基信息参股消费阿里系持有公司总股本13.02%，仅财务投资，无业务协同规避风险
美年健康参股医疗阿里系持有公司总股本10.04%观察
+
+
+

完整表格包含50+公司，涵盖IDC、服务器、交换机、电商、医疗等全链条

+
+
+
+ + +
+
+

风险与挑战

+
+
+
+ +
+

技术风险

+
    +
  • • 思维链能力短板：当前更多是基座模型而非推理模型
    • +
  • • Agent工具缺失：MCP多工具调用仍出现错误
    • +
  • • 与DeepSeek-R1等推理模型存在差距
    • +
+
+
+
+ +
+

商业化风险

+
    +
  • • C端用户获取成本高昂，ROI可能为负
    • +
  • • B端客户谨慎，市场增长主要来自存量客户
    • +
  • • 阿里影业虚拟拍摄技术仍处于亏损状态
    • +
+
+
+
+ +
+

竞争与政策风险

+
    +
  • • Llama 3.3发布后千问排名降至第二/三位
    • +
  • • 开源模型竞争加剧，存在赢者通吃效应
    • +
  • • 苹果AI合作涉及数据跨境，面临监管审查
    • +
+
+
+
+
+ + +
+
+

投资启示

+
+
+
+

优先级排序

+
+
+
🥇
+
+
算力基础设施
+
数据港、万国数据、浪潮信息（订单可见度高）
+
+
+
+
🥈
+
+
电商生态服务商
+
光云科技、壹网壹创（直接受益广告货币化）
+
+
+
+
🥉
+
+
垂直场景龙头
+
阿里健康、阿里影业（节奏风险，谨慎配置）
+
+
+
+
+
+

关键跟踪指标

+
+
+ API周调用量增速 + 2000亿→5000亿Tokens +
+
+ 阿里云AI收入占比 + 10%→15%+ +
+
+ 千问APP月活(MAU) + 5000万目标 +
+
+ 30日留存率 + >30% +
+
+
+
+
+

结论

+

+ 阿里"千问"项目具备"基本面打底+主题催化"的双重属性，当前处于"技术兑现期向商业化爆发期过渡"的关键节点。
+ 2025年Q4至2026年Q1是验证窗口期，若C端APP数据超预期或苹果合作落地，将引发戴维斯双击。 +

+
+
+
+
+ + + + + + + diff --git a/public/htmls/隔膜.html b/public/htmls/隔膜.html new file mode 100644 index 00000000..ac4672c5 --- /dev/null +++ b/public/htmls/隔膜.html @@ -0,0 +1,659 @@ + + + + + + + 锂电池隔膜概念深度解析 - 周期反转拐点 + + + + + + + + + + + + +
+
+

+ 锂电池隔膜 +
周期反转拐点 +

+

+ 供给刚性超预期，储能爆发超预期，政策反内卷超预期——三重共振驱动下，隔膜行业正从周期底部走向价格拐点，2025-2026年头部企业盈利修复弹性巨大。 +

+
+
储能切湿法
+
产能投放尾声
+
价格联盟形成
+
5μm渗透加速
+
+
+
+ + +
+
+
+

+ + 核心观点摘要 +

+
+

+ 当前隔膜行业正处于"周期反转拐点"，由三重逻辑共振驱动： +

+ ① 供给端产能投放进入尾声，2026年新增供给断崖式收缩； +
+ ② 需求端储能市场爆发式增长（同比+106%）彻底扭转供需格局，湿法隔膜供需紧平衡； +
+ ③ 政策"反内卷"与行业自律形成价格联盟，龙头议价能力显著提升。 +

+ 市场当前对固态电池冲击存在过度担忧，而低估了设备壁垒、海外布局及高端涂覆带来的价值重构，2025-2026年头部企业盈利修复弹性巨大。 +

+
+
+
+
+ + +
+
+

+ 概念事件时间轴 +

+
+
+ +
+
+
+
2024年2月
+

底部信号初现

+

CT电新率先提出"隔膜价格底部，行业有望见底反转"，指出湿法价格企稳、干法已涨价30%。

+
+ + +
+ +
+ + +
+
2024年9-10月
+

涨价落地验证

+

干法隔膜年内涨幅>30%，8月初第二次提价10%；湿法交付周期紧张，价格涨幅超10%，周期反转强度确认。

+
+
+ +
+
+
2024年11月
+

政策护航升级

+

工信部研究编制"十五五"规划，强调防范低水平重复建设。储能产线全面切换湿法，5μm渗透率目标提升至15%。

+
+ + +
+ +
+ + +
+
2025-2026年
+

供需缺口显现

+

鑫椤锂电预测2026年TOP3产能利用率超95%，行业或迎供需缺口。头部企业开启2026年价格谈判，盈利修复空间大。

+
+
+
+
+
+
+ + +
+
+

+ 核心驱动力：三重断裂性改善 +

+ +
+
+
+ +
+

供给刚性超预期

+
    +
  • 设备依赖进口（东芝/布鲁克纳），交付周期长达1.5-2年
    • +
  • 良率爬坡至90%需1年以上，二线厂商仅75-80%
    • +
  • 头部两家产能2025年底收尾，2026年供给断崖式收缩
    • +
+
+ +
+
+ +
+

需求结构性爆发

+
    +
  • 储能全面切湿法，同比+106%，单GWh用量提升33%
    • +
  • 5μm高端隔膜渗透率从5%→15%，单价是普通2-3倍
    • +
  • 海外价格是国内的2-3倍，恩捷/星源海外工厂投产
    • +
+
+ +
+
+ +
+

政策价格联盟

+
    +
  • 协会倡议"以销定产、不打价格战"
    • +
  • 工信部"十五五"规划防低水平重复建设
    • +
  • 头部企业TOP2市占率50%+形成价格默契
    • +
+
+
+ + +
+
+
300亿平
+
2024年全球隔膜出货量
+
vs 2020年64亿平
+
+
+
95%
+
2026年TOP3产能利用率预测
+
当前已打满
+
+
+
30%
+
5μm高端隔膜渗透率
+
2025年目标vs 2024年5%
+
+
+
2-3倍
+
海外/国内价格倍率
+
成本差异不大
+
+
+
+
+ + +
+
+

+ 核心标的深度剖析 +

+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
公司角色定位核心优势产能/份额2025预计
+
+
龙头
+ 恩捷股份 +
+ 		绝对龙头设备壁垒+全球专利最多+成本最低+海外布局领先 +
2025年110亿平
+
全球50%
+ 		+
22亿利润
+
17倍PE
+
+
+
赶超者
+ 星源材质 +
+ 		追赶者干法全球第一+固态膜布局领先+全球布局最广 +
2025年70亿平
+
全球21%
+ 		+
14亿利润
+
13倍PE
+
+
+
二线
+ 中材科技 +
+ 		稳健二线央企资源+设备多元+客户结构稳定 +
2024年销量19亿平
+
湿法13%
+ 		+
盈利修复滞后
+
产能利用率80%
+
+
+
并购
+ 佛塑科技 +
+ 		并购新锐收购金力新能源+切入一线供应链 +
金力16亿平产能
+
湿法18%
+ 		+
协同效应
+
估值重塑
+
+
+ + +
+
+
+

恩捷股份

+
绝对龙头
+
+
+
产能: 2025年110亿平
+
份额: 全球50%
+
利润: 22亿
+
PE: 17倍
+
+
+ +
+
+

星源材质

+
赶超者
+
+
+
产能: 2025年70亿平
+
份额: 全球21%
+
利润: 14亿
+
PE: 13倍
+
+
+ +
+
+

佛塑科技

+
并购
+
+
+
收购: 金力新能源
+
份额: 湿法18%
+
潜力: 协同效应
+
估值: 重塑
+
+
+
+
+
+ + +
+
+

+ 概念股数据总览 +

+ +
+
+ + + + + + + + + + + + +
股票名称角色定位核心数据投资逻辑
+
+
+
+
+ + +
+
+
+ +
+

+ + 关键催化剂 +

+
+
+
2025年1月
+

2026年价格谈判落地

+

若涨价幅度达15-20%，将直接验证周期反转强度，触发估值修复。

+
+
+
2025年Q1
+

储能出货量持续超预期

+

若Q1延续高增（同比+80%以上），强化"储能切湿法"逻辑。

+
+
+
2025年Q2
+

5μm渗透率加速提升

+

若宁德/比亚迪大规模采用，单平利润提升50-100%。

+
+
+
+ + +
+

+ + 潜在风险 +

+
+
+

技术风险：固态电池路径不确定

+

若全固态电池2027年后量产，传统隔膜需求或萎缩30-50%。但恩捷/星源已通过骨架膜布局对冲。

+
+
+

商业风险：价格战反复

+

行业自律缺乏强制约束力，若头部企业为抢占份额突然降价，价格体系可能崩溃。

+
+
+

政策风险：IRA细则变化

+

恩捷美国工厂享受IRA补贴，2025年美国总统大选后政策存在变数。

+
+
+
+
+
+
+ + +
+
+

+ 投资策略框架 +

+ +
+
+
左侧布局期
+
当前-2025年Q1
+

在2026年价格谈判落地前，逢低建仓恩捷股份、星源材质，仓位上限30%。

+
+
+
右侧加仓期
+
2025年Q2-Q3
+

若5μm渗透率突破15%、储能维持高增，加仓至50%仓位。

+
+
+
兑现退出期
+
2025年Q4-2026年
+

当单平利润恢复至0.3元、PE降至10倍以下时，逐步兑现收益。

+
+
+ + +
+
+
价格指标
+
7μm湿法基膜均价
+
目标: 1.0元/平
+
+
+
盈利指标
+
恩捷单平净利润
+
目标: 0.25元
+
+
+
产能指标
+
TOP3产能利用率
+
目标: >95%
+
+
+
需求指标
+
储能出货量同比
+
目标: >60%
+
+
+
+
+ + +
+
+
+

+ 最终结论 +

+

+ 隔膜是2025年新能源材料中供需格局最优、涨价确定性最强、估值修复空间最大的细分赛道。核心矛盾已从"产能过剩"转向"优质产能不足"，龙头将进入长达2-3年的盈利上行周期。 +

+
+
把握三重共振窗口期
+
+

+ 风险提示：固态电池技术路线不确定性、价格联盟脆弱性、IRA政策变化、新进入者搅局。 +

+
+
+
+ + + + + + + diff --git a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js index cb5a180f..2faf7c86 100644 --- a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js +++ b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js @@ -2,10 +2,25 @@ // 纵向分栏模式布局组件 import React, { useState } from 'react'; -import { Box, VStack, Flex, Center, Text, useBreakpointValue } from '@chakra-ui/react'; +import { + Box, + VStack, + Flex, + Center, + Text, + useBreakpointValue, + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalBody, + ModalCloseButton, + useDisclosure +} from '@chakra-ui/react'; import { InfoIcon } from '@chakra-ui/icons'; import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard'; import EventDetailScrollPanel from './EventDetailScrollPanel'; +import DynamicNewsDetailPanel from '../../DynamicNewsDetail/DynamicNewsDetailPanel'; /** * 纵向分栏模式布局 @@ -38,6 +53,20 @@ const VerticalModeLayout = ({ const flexDirection = useBreakpointValue({ base: 'column', lg: 'row' }); const gap = useBreakpointValue({ base: 3, lg: 6 }); + // 移动端模态框控制 + const { isOpen: isMobileModalOpen, onOpen: onMobileModalOpen, onClose: onMobileModalClose } = useDisclosure(); + const [mobileSelectedEvent, setMobileSelectedEvent] = useState(null); + + // 处理移动端事件点击 + const handleMobileEventClick = (event) => { + if (isMobile) { + setMobileSelectedEvent(event); + onMobileModalOpen(); + } else { + onEventSelect(event); + } + }; + // 固定布局比例：左侧（4），右侧（6）- 平衡布局，确保左侧有足够空间显示内容 const leftFlex = '4'; const rightFlex = '6'; @@ -89,7 +118,7 @@ const VerticalModeLayout = ({ key={event.id} event={event} isSelected={selectedEvent?.id === event.id} - onEventClick={() => onEventSelect(event)} + onEventClick={() => handleMobileEventClick(event)} isFollowing={eventFollowStatus[event.id]?.isFollowing} followerCount={eventFollowStatus[event.id]?.followerCount} onToggleFollow={onToggleFollow} @@ -133,6 +162,24 @@ const VerticalModeLayout = ({ /> )} + + {/* 移动端详情弹窗 */} + {isMobile && ( + + + + + {mobileSelectedEvent?.title || '事件详情'} + + + + {mobileSelectedEvent && ( + + )} + + + + )} ); }; diff --git a/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js b/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js index 8b1df47a..1aa32b5a 100644 --- a/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js +++ b/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js @@ -3,7 +3,7 @@ import React, { useRef, useMemo, useEffect } from 'react'; import { useVirtualizer } from '@tanstack/react-virtual'; -import { Box, Grid, Spinner, Text, VStack, Center, HStack, IconButton } from '@chakra-ui/react'; +import { Box, Grid, Spinner, Text, VStack, Center, HStack, IconButton, useBreakpointValue } from '@chakra-ui/react'; import { RepeatIcon } from '@chakra-ui/icons'; import { useColorModeValue } from '@chakra-ui/react'; import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard'; @@ -52,14 +52,26 @@ const VirtualizedFourRowGrid = ({ const scrollbarThumbBg = useColorModeValue('#888', '#4A5568'); const scrollbarThumbHoverBg = useColorModeValue('#555', '#718096'); - // 将事件按 columnsPerRow 个一组分成行 + // 响应式列数 + const responsiveColumns = useBreakpointValue({ + base: 1, // 移动端：单列 + sm: 2, // 小屏：2列 + md: 2, // 中屏：2列 + lg: 3, // 大屏：3列 + xl: 4, // 超大屏：4列 + }); + + // 使用响应式列数或传入的列数 + const actualColumnsPerRow = responsiveColumns || columnsPerRow; + + // 将事件按 actualColumnsPerRow 个一组分成行 const rows = useMemo(() => { const r = []; - for (let i = 0; i < events.length; i += columnsPerRow) { - r.push(events.slice(i, i + columnsPerRow)); + for (let i = 0; i < events.length; i += actualColumnsPerRow) { + r.push(events.slice(i, i + actualColumnsPerRow)); } return r; - }, [events, columnsPerRow]); + }, [events, actualColumnsPerRow]); // 配置虚拟滚动器（纵向滚动 + 动态高度测量） const rowVirtualizer = useVirtualizer({ @@ -301,17 +313,17 @@ const VirtualizedFourRowGrid = ({ w="100%" transform={`translateY(${virtualRow.start}px)`} > - {/* 使用 Grid 横向排列卡片（列数由 columnsPerRow 决定） */} + {/* 使用 Grid 横向排列卡片（列数由 actualColumnsPerRow 决定） */} {rowEvents.map((event, colIndex) => ( { - const sectionBg = useColorModeValue('gray.50', 'gray.750'); + const sectionBg = PROFESSIONAL_COLORS.background.secondary; // 模式状态：'detailed' | 'simple' const [displayMode, setDisplayMode] = useState(defaultMode); diff --git a/src/views/Community/components/DynamicNewsDetail/EventDescriptionSection.js b/src/views/Community/components/DynamicNewsDetail/EventDescriptionSection.js index 6260e985..353b5c2f 100644 --- a/src/views/Community/components/DynamicNewsDetail/EventDescriptionSection.js +++ b/src/views/Community/components/DynamicNewsDetail/EventDescriptionSection.js @@ -8,6 +8,7 @@ import { Text, useColorModeValue, } from '@chakra-ui/react'; +import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme'; /** * 事件描述区组件 @@ -15,9 +16,9 @@ import { * @param {string} props.description - 事件描述文本 */ const EventDescriptionSection = ({ description }) => { - const sectionBg = useColorModeValue('gray.50', 'gray.750'); - const headingColor = useColorModeValue('gray.700', 'gray.200'); - const textColor = useColorModeValue('gray.600', 'gray.400'); + const sectionBg = PROFESSIONAL_COLORS.background.secondary; + const headingColor = PROFESSIONAL_COLORS.text.primary; + const textColor = PROFESSIONAL_COLORS.text.secondary; // 如果没有描述，不渲染 if (!description) {