普通视图

发现新文章,点击刷新页面。
今天 — 2026年2月26日首页

三星 Galaxy S26 系列发布:6999 元起!AI 很聪明,防窥接地气

作者 周奕旨
2026年2月26日 03:43

相信你也有过屏幕被陌生人偷瞄的尴尬。

为了隐私,大家往往只能贴上防窥膜,代价是屏幕瞬间暗沉、画质受损,极易让眼睛疲劳。

今天凌晨,三星正式召开 Galaxy 全球新品发布会,交出开年旗舰答卷 Galaxy S26 系列,作为 2026 年手机圈的第一波重头戏,尤其是 S26 Ultra 拿出的最大升级点出人意料地接地气,解决了一个极其普遍的日常烦恼:防偷窥。

爱范儿也在现场,第一时间上手体验了这台新机。

世界首个「隐私屏」,用技术防偷看

在这台机身的屏幕上,三星推出了名为隐私屏幕(Privacy Display)的技术,顾名思义,它能让屏幕只朝固定角度显示信息,一旦视角偏离,屏幕将会呈现黑色,帮助你屏蔽周围的视线。

看到这里,有的人就会问了:

这不是防窥膜吗?

没错,它和我们熟悉的防窥贴膜看起来是一样的效果,但传统的防窥贴膜主要依靠内部排列极其细密的黑色光栅,只有正对着手机时,眼睛才能接收到垂直透出的光线,但这种方案的缺点也很明显——透光率和亮度都会急剧变低、有细密条纹干扰的屏幕容易让眼睛疲劳。

▲ 传统防窥膜结构,图片来自@上海复瞻智能科技

而三星的隐私屏幕,是让屏幕自己在硬件层面控制光线。这项技术脱胎于 2024 年 MWC 上展出的 Flex Magic Pixel。通过在屏幕基板上分别蒸镀【广视角像素】和【窄视角像素】。

S26 Ultra 可以在系统设置里实现两档强度的硬件防窥,从爱范儿现场的上手来看,第一档强度会对屏幕做个大概限制,从旁边看过去只有模糊的轮廓,而如果把火力开到最大,屏幕的视场角会被死死限制在左右 45 度以内,旁边的人看过来只能看到一片死寂的暗色。

既然是硬件层面的可控反馈,就意味着这个功能还有软件加持的想象空间——由于在单颗像素的层面进行控光,隐私屏幕可以实现「局部遮蔽」。比如在拥挤的地铁上看手机,屏幕上只有通知弹窗或者来电信息的一小块区域会瞬间进入防窥模式。整体反黑,局部防窥,想开就开,关掉时丝毫不影响这块顶级屏幕原本的通透感。

物理遮蔽光线,永远比纯靠前置摄像头识别人脸去隐藏通知或是干脆贴上物理的光栅防窥膜来得更彻底。这项技术一旦铺开,那些劣质防窥膜大概率会被彻底扫进历史的垃圾堆。

顺带一提,在各家都在普及 1.5K 屏以换取续航的今天,S26 Ultra 依然坚守着 2K 分辨率。不过为了塞下更复杂的传感器,前置挖孔的面积相比上一代变大了些,位置也略微下沉。那些高喊着「无 2K 不旗舰」的硬核玩家,在 2026 年几乎只剩下这一个选择了。

猎户座重返赛场,AI 再引外援

在屏幕之外的核心配置上,S26 系列毫无悬念地搭载了定制版骁龙 8 Elite Gen 5 for Galaxy,但也有消息称,时隔多年,凭借着全新 2 纳米 GAA 工艺和 AMD RDNA4 架构的加持,最新的 Exynos 2600 处理器将在韩版 S26 标准版上重出江湖。

从之前泄露的跑分来看,这颗芯片终于在光追和综合性能上重新站回了可以和高通正面掰手腕的擂台上。

在核心参数外,AI,依旧是 Galaxy S26 系列的重头戏。在发布会开场,三星就宣布了 Galaxy AI 进一步深入系统,并强调三星理解的 AI,有三个要点:

  • 普及性
  • 开放性
  • 安全性

经过这三个方面的结合,三星认为 AI 应该成为手机上的基础工具,最终目的,是让其进化为智能体,这也是三星为 Galaxy S26 系列贴上的最贴合时代,也最重要的标签——Agentic AI 手机。

Agentic 的具体表现,是更为聪明、且可以主动介入你的动作——

Google Gemini 现在支持任务自动化功能。在三星 Galaxy S26 上,用户可以向 Gemini 发出提示,比如「帮我叫一辆车去美术馆」,随后 Gemini 就会在用户的设备上通过虚拟窗口启动程序,并在后台逐步完成过程。

如果在执行过程中遇到选项,它会停止并让用户接管,整体操作体验和豆包手机差不多。

除此之外,在好友向你索取上周末的照片时,Galaxy AI 可以免去用户翻找相册的烦恼,直接将符合时间条件的照片推送到你眼前。

外版的 Galaxy S26 系列两年前与 Gemini 合作达成的识别功能也更进一步,支持识别多个对象;还引入了 Perplexity 搜索引擎能力,新版 Bixby 现在的交互显得前所未有的聪明,可以更高效地搜索你想要的信息。

当年那个只会讲冷笑话的语音助手,终于进一步靠近能够理解复杂语境的赛博管家,再换个比喻,也可以说这也是海外首款「豆包手机」。

影像方面,S26 Ultra 维持了 2 亿像素主摄、5000 万超广角、1000 万 3 倍加上 5000 万 5 倍长焦的组合。表面上看参数没变,但从爱范儿现场的上手观察,S26 Ultra 的长焦端,光孔变成了圆形,具体表现可以等待我们进一步实测。

值得一提的是,整场发布会,都由 Galaxy S26 Ultra 直播拍摄。

在依旧稳定的影像上,AI 带来了一些新体验——在 AI 的帮助下,用户可以轻松转换照片的风格,无论是水彩还是 3D 风格都不在话下;也可以用 AI 修复被朋友吃掉的蛋糕;但最有趣的,属于元素拼贴——你可以将另一张图的小狗放进一张合影中,只需要用简单的自然语言告诉 AI 你想怎么抱着它,就可以轻松获得结果。

至于续航,三星 Galaxy S26 Ultra 配备了 5000 毫安时电池,好消息是,45W 的祖传快充终于退休了,S26 Ultra 首次支持最高 60W 的充电功率,回血速度有了实质性的改善;但坏消息是,YTECHB 报道,从尚未公布的欧盟标签及电池续航评级显示,三星 S26 系列的电池健康度,会在 1200 次充电后降低到 80%,前代的数据则是 2000 次充电才会降低到 80%。

好手感回归,但设计更保守了

内部配置在暗暗较劲,S26 系列的外观却选择了「退让」。

前两代被视作高端标配的钛金属中框,在 S26 系列上悄悄退场,换回了熟悉的铝合金。抛开营销层面的高级感不谈,铝合金在机身散热、重量控制和加工精度上,其实能提供更扎实的日常握持体验。只不过,iPhone 17 Pro 系列在换回铝合金后,抗击打能力收到大量用户的质疑,「珠玉在前」,S26 系列上铝合金机身的抗摔能力也需要进一步测试。

随着中框材质变化的,是整机边缘的设计语言改变,S26 Ultra 的机身 R 角进一步变大,边框过渡变得圆润,终于不再像前两代那样,握在手里仿佛握着一块硌手的切菜板。

但手感上的回归,往往需要付出一些代价。

从爱范儿现场上手来看,由于机身倒角的倒逼,位于左下角的 S-Pen 笔尾现在从边框微微凸起了一截。并且,这是近十年来第一款带有明确正反面限制的带笔机型,如果左右调转,虽然还能正常插进去,但会在边框上凸出一个小三角。

在机身内部寸土寸金的当下,S-Pen 近两年的处境确实有些尴尬:先是失去了蓝牙,如今又告别了左右反插。在实用主义和外观设计的双重挤压下,这根超大杯的标志性触控笔,似乎不可避免地一直在妥协。

但这其实是种错觉,在 Galaxy S26 系列上,期待中类似 iPhone 的 Qi2.2 磁吸充电并没有出现。原因很简单——物理学不存在奇迹。内置的强磁体依然会严重干扰 S-Pen 的电磁感应层。

在迎合大众的磁吸充电和这支笔的底层体验之间,三星毫不犹豫地选择力保继承自 Note 系列的灵魂体验。

转到机身背面,过往标志性的独立镜头排列不见了。S26 全系向自家的折叠屏老大哥 Z Fold7 看齐,老老实实加回了一个带有中岛的模组,这个设计见仁见智,个人觉得没有往代那么干净利落,但在这个各家厂商都在手机背面背着一个巨大奥利奥或者滚筒洗衣机的年代,S26 Ultra 反倒成了市面上为数不多的、正常单手握持时食指能够舒舒服服安放,而不会频繁摸到镜头的旗舰。

此外,三星 S26 系列国行全系支持双实体卡槽,同时支持 eSIM,共推出六款配色,分别为幽夜紫、映雪白、旷宇黑、浅云蓝,以及两款三星直销平台专属色的绯霞金与镜月银。

在手机介绍大致结束后,三星还在本场发布会上发布了新一代的无线耳机——Galaxy Buds 4 与 Galaxy Buds 4 Pro。

简单来说,这次更新让耳机佩戴更舒适、支持 24-bit/96kHz 高解析音频;三星还研发了基于深度神经网络(DNN)技术,清晰捕捉声音细节,再通过超宽频(SWB)技术还原语音信号,进一步屏蔽嘈杂环境中的噪音;同时支持 AI 驱动的翻译功能(需使用 Galaxy AI),并搭载了 AI 助手,只需用自然语言,就可以与手机进行交互(同样需要 Galaxy AI)。

而对于 Galaxy Buds 4 Pro 来说,除了以上的特征,Buds 4 Pro 改为了入耳式,还搭载了新升级的双路扬声器系统和双功放功能,呈现更通透均衡的高保真音质,两者均支持主动降噪。

Galaxy Buds 4 与 Galaxy Buds 4 Pro 售价分别为 1399 元与 1899 元。

在手机不能缺席的未来,三星给出的答案

目光转回手机,今年 S26 系列的背后,其实藏着一段颇为滑稽的内部博弈。

关注半导体供应链的朋友都知道,过去一年内存颗粒的价格一路狂飙。这在三星内部造就了一个奇特的景象:负责生产颗粒的半导体部门赚得盆满钵满,而负责造手机的移动通信部门却深陷成本上涨的泥潭。俗话说亲兄弟也要明算账,Galaxy S26 系列大容量版本不可避免地迎来了溢价:

  • 三星 Galaxy S26,仅提供 12GB + 256GB 版本,售价为 6999 元
  • 三星 Galaxy S26+,提供 12GB + 256GB / 512GB 两个版本,售价分别为 7999/9599 元
  • 三星 Galaxy S26 Ultra,提供 12GB + 256GB/512GB 两个 12GB 版本,售价分别为 9999/11599 元
  • 三星 Galaxy S26 Ultra 16GB+1TB 顶配版,售价为 13999 元

如果将 iPhone 发布的 2007 年视为智能手机的元年,那么到今天,已经狂奔了近二十年。

手机的创新速度,随着手机形态的挖掘和现有科技的限制,大大降低,这个社会与行业的共识已经基本形成。在现有的产品形态下,指望智能手机还能像早期那样,掏出接踵而至的大创新,几乎是不切实际的幻想。

另一边,AI 浪潮愈演愈烈,各种形态新奇的 AI 硬件试图上位,但至今也没有哪个设备能证明自己能替代手机,成为下一个版本的标准答案。

在目光可及的未来里,智能手机依旧是每个人的必需品,那么接下来,手机的答卷,该怎么答?

带着这样的问题,我们再转头看看刚刚发布的三星 Galaxy S26 系列——它的影像或许没有国内大厂在特定场景下那么激进抢眼,但胜在整体素质依然稳健;OneUI 的本地化虽然还有进步空间,但日常用起来也不拖后腿;最重要的是,三星在系统级 AI 的布局上来得非常早,直接拉来了 Gemini 和 Perplexity 强强联手,早早抢占了先机。

尤其 S26 上面的最新版 Bixiby,在新模型的加持下也获得了帮你操作手机的能力,点外卖、叫车、订酒店、电商比价下单,统统都是【信口拈来】。

可以说,这是一台没有明显短板,基础很扎实的水桶机,而三星的回答,就是在参数卷进边际效应递减的死胡同、影像只剩下喜好而无客观差距的时代,在扎实的产品基础上,打造类似于隐私屏幕这样瞄准微小痛点,更聚焦、更人文的创新。

谁也无法断言未来,但颠覆发生之前,我们依然需要一台更好用的手机。

三星 Galaxy S26 系列,就是这样的产品。

让我有个美满旅程

#欢迎关注爱范儿官方微信公众号:爱范儿(微信号:ifanr),更多精彩内容第一时间为您奉上。

爱范儿 | 原文链接 · 查看评论 · 新浪微博


昨天 — 2026年2月25日首页

移动端 H5 响应式字体适配方案完全指南

作者 RemHusband
2026年2月25日 22:15

基于 rem + 动态根字体 + PostCSS 的生产级适配方案,包含微信大字体适配完整实现


目录


一、方案概述

1.1 技术栈

Vue 3 + TypeScript + Vite + PostCSS + postcss-pxtorem + WeixinJSBridge

1.2 核心思想

本方案采用 rem + 动态根字体 + 自动 px 转 rem 的组合策略:

┌─────────────────────────────────────────────────────────────┐
  Layer 1: 动态根字体计算 (font-size.ts)                      
  根据屏幕宽度动态调整 html 根元素 fontSize                    
└─────────────────────────────────────────────────────────────┘
                           
┌─────────────────────────────────────────────────────────────┐
  Layer 2: PostCSS px→rem (postcss.config.ts)                
  开发时写 px,构建时自动转 rem,实现响应式                     
└─────────────────────────────────────────────────────────────┘
                           
┌─────────────────────────────────────────────────────────────┐
  Layer 3: 微信大字体适配 (WeixinJSBridge)                    
  禁用微信默认缩放,监听用户设置档位                            
└─────────────────────────────────────────────────────────────┘

1.3 设计稿规范

  • 设计稿宽度: 750px (iPhone 6/7/8 标准)
  • 开发模式: 1:1 还原设计稿(直接写 px)
  • 自动转换: 构建时 px → rem
  • 运行时适配: 根据屏幕宽度自动缩放

二、核心原理

2.1 rem 单位原理

/* rem 是相对单位,相对于 html 根元素的 font-size */
html {
  font-size: 46.875px; /* 750px 设计稿的基准值 */
}

/* 1rem = 46.875px */
.container {
  width: 16rem; /* 实际: 16 × 46.875 = 750px */
}

2.2 动态适配公式

根字体大小 = 屏幕宽度 ÷ 基准系数

手机端: fontSize = clientWidth / 16
平板端: fontSize = clientWidth / 33
桌面端: fontSize = 1024 / 16 (固定)

2.3 实际计算示例

设备 屏幕宽度 根字体大小 16rem 实际宽度 适配效果
iPhone SE 375px 23.44px 375px ✅ 完美适配
iPhone 12 390px 24.38px 390px ✅ 完美适配
iPhone 14 Pro 393px 24.56px 393px ✅ 完美适配
iPad 768px 23.27px 372px ✅ 按平板模式
Desktop 1920px 64px 1024px ✅ 固定最大宽度

三、断点方案选择

3.1 标准断点方案对比

在响应式设计中,业界有多种主流的断点标准:

方案 移动端 平板端 桌面端 特点
Tailwind CSS < 640px 640-1024px ≥ 1024px 现代标准,业界主流
Bootstrap 5 < 576px 576-992px ≥ 992px 传统标准,兼容性好
W3C 标准 < 768px 768-1024px ≥ 1024px 官方标准,语义清晰

3.2 本项目最终方案选择

最终选择:自定义 600/1024 断点方案

// 移动端: < 600px
if (clientWidth < 600) {
  docEl.style.fontSize = clientWidth / 16 + "px";
}
// 平板端: 600px - 1024px
else if (clientWidth >= 600 && clientWidth < 1024) {
  docEl.style.fontSize = clientWidth / 33 + "px";
}
// 桌面端: >= 1024px
else {
  clientWidth = 1024;
  docEl.style.fontSize = clientWidth / 16 + "px";
}

3.3 选择理由

✅ 平板端区间更合理

对比 Bootstrap (576/992)

  • Bootstrap 的平板区间始于 576px,但对于 600px 左右的设备(如大屏手机),体验不如移动端模式
  • 600px 的起点能更好地覆盖大屏手机,确保这些设备仍使用移动端的线性适配

对比 W3C (768/1024)

  • W3C 标准的平板区间始于 768px,导致 600-768px 这个范围(常见横屏手机、小平板)被归为移动端
  • 600px 的起点能提前进入平板模式,避免横屏手机上元素过大

✅ 桌面端符合 W3C 标准

  • 桌面端断点采用 1024px,与 W3C、Tailwind CSS 保持一致
  • 这是业界公认的"小桌面"标准,覆盖了大多数笔记本屏幕
  • 保持最大宽度 1024px,避免在大屏幕上过度拉伸

✅ 经过项目实践验证

  • 该方案已在多个生产项目中稳定运行
  • 兼顾了移动端、平板端、桌面端的用户体验
  • 平板端系数 /33 经过多轮调优,确保元素不会过大或过小

3.4 断点覆盖范围说明

设备类型 屏幕宽度 本项目方案 归属区间
iPhone SE 375px 移动端 < 600px
iPhone 12/13/14 390px 移动端 < 600px
iPhone 14 Pro Max 430px 移动端 < 600px
小米 11 等大屏手机 480px 移动端 < 600px
横屏手机 600-700px 平板端 600-1024px
iPad Mini 768px 平板端 600-1024px
iPad Pro 11" 834px 平板端 600-1024px
iPad Pro 12.9" 1024px 桌面端 ≥ 1024px
笔记本 1366-1920px 桌面端 ≥ 1024px

四、代码实现详解

4.1 动态根字体计算 (font-size.ts)

// src/utils/font-size.ts

(function (doc, win) {
  const docEl = doc.documentElement,
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
    recalc = function () {
      let clientWidth = docEl.clientWidth;
      if (!clientWidth) return;

      // 手机端 (< 600px)
      if (clientWidth < 600) {
        docEl.style.fontSize = clientWidth / 16 + "px";
      }
      // 平板端 (600px - 1024px)
      else if (clientWidth >= 600 && clientWidth < 1024) {
        docEl.style.fontSize = clientWidth / 33 + "px";
      }
      // 桌面端 (>= 1024px)
      else {
        clientWidth = 1024;
        docEl.style.fontSize = clientWidth / 16 + "px";
      }
    };

  if (!doc.addEventListener) return;

  // 监听窗口大小变化
  win.addEventListener(resizeEvt, recalc, true);
  // DOM 加载完成后立即执行
  doc.addEventListener("DOMContentLoaded", recalc, false);
  // 立即执行一次
  recalc();
})(document, window);

代码要点解析

代码片段 作用 说明
resizeEvt 检测旋转事件 移动设备优先使用 orientationchange,桌面端降级为 resize
clientWidth / 16 手机端计算公式 375px 屏幕得到 23.44px,750px 设计稿的 16rem = 375px
clientWidth / 33 平板端计算公式 防止平板上字体过大,使用更大的分母
clientWidth = 1024 桌面端固定宽度 超大屏幕限制最大宽度,避免布局过度拉伸

触发时机

// 1. 页面首次加载时
recalc(); // 立即执行

// 2. DOM 加载完成后
document.addEventListener("DOMContentLoaded", recalc, false);

// 3. 窗口大小改变时(包括旋转屏幕)
window.addEventListener(resizeEvt, recalc, true);

4.2 项目入口 (main.ts)

// src/main.ts
import "@/utils/font-size"; // ⚠️ 必须最早导入

原因

  1. 确保 DOM 加载前就设置好监听器
  2. 防止组件渲染时根字体尚未计算
  3. 避免页面布局抖动

五、微信大字体适配

5.1 问题背景

微信用户可以通过以下方式调整字体大小:

方法 1: 微信设置 → 通用 → 字体大小(安卓 8 档,iOS 6 档)

方法 2: 公众号文章内 → 右上角 → 调整字体

这会导致 H5 页面布局被破坏:

❌ 问题现象:
┌─────────────────────┐
│ 标题文字溢出重至     │  ← 文字过大
│ 价格被遮挡 ██████    │  ← 按钮遮挡
│ 边框模糊.....       │  ← 1px 边框变粗
└─────────────────────┘

5.2 官方解决方案

根据微信支付商户文档 - 大字号规范,需要三层配合:

// src/utils/font-size.ts

(function () {
  if (
    typeof WeixinJSBridge == "object" &&
    typeof WeixinJSBridge.invoke == "function"
  ) {
    handleFontSize();
  } else {
    document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
  }

  function handleFontSize() {
    // 1. 禁用 Android 微信字体缩放
    WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });

    // 2. 监听用户手动调整字体事件,强制重置
    WeixinJSBridge.on("menu:setfont", function () {
      WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
    });
  }
})();

5.3 iOS 额外处理

// src/assets/styles/public.scss

body {
  /* 禁用 iOS 自动字体缩放 */
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

5.4 WeixinJSBridge API 详解

API 参数 作用 兼容性
setFontSizeCallback { fontSize: 0 } 设置为默认字体档位 Android/iOS
on('menu:setfont') 回调函数 监听用户调整字体事件 Android/iOS

fontSize 参数说明

// 社区实践值(官方未明确文档)
fontSize: 0; // 强制标准字体(最常用)
fontSize: "2"; // 默认档位 2(官方文档示例)

⚠️ 注意:WeixinJSBridge 是微信内部桥接接口,属于非公开 API,可能随时变更。建议配合 CSS 方案使用。


六、PostCSS 配置解析

6.1 当前配置

// postcss.config.ts
export default {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    "postcss-pxtorem": {
      rootValue: 750 / 16, // ≈ 46.88,设计稿宽度除以基准系数

      // ✅ 忽略边框和阴影,保持 1px 清晰度
      selectorBlackList: [
        "border",
        "border-top",
        "border-right",
        "border-bottom",
        "border-left",
        "box-shadow",
      ],

      // ✅ 只转换布局相关属性
      propList: [
        "width",
        "height",
        "margin",
        "padding",
        "font-size",
        "line-height",
        "letter-spacing",
        "top",
        "right",
        "bottom",
        "left",
      ],

      // ✅ 额外优化配置
      replace: true, // 替换而非添加 fallback
      mediaQuery: false, // 不转换媒体查询中的 px
      minPixelValue: 2, // 小于 2px 不转换
      exclude: /node_modules/i, // 排除 node_modules,避免样式库冲突
    },
    tailwindcss: {},
    autoprefixer: {},
  },
};

6.2 参数详解

rootValue: 750 / 16

设计稿宽度: 750px
基准系数: 16
rootValue = 750 / 16 ≈ 46.88px

转换公式:
rem值 = px值 / rootValue

示例:

/* 开发时写 */
.container {
  width: 750px;
  font-size: 32px;
}

/* 编译后 */
.container {
  width: 16rem; /* 750 ÷ 46.88 = 16 */
  font-size: 0.682rem; /* 32 ÷ 46.88 = 0.682 */
}

selectorBlackList: [配置说明]

忽略边框和阴影相关属性,避免 1px 边框被转换后模糊:

/* ✅ 这些属性不会被转换,保持 px */
border: 1px solid #ddd; /* 保持 1px */
border-top: 1px solid red; /* 保持 1px */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 保持 px */

propList: [配置说明]

只转换布局相关属性,更精确控制:

/* ✅ 会转换的属性 */
width, height, margin, padding → rem
font-size, line-height, letter-spacing → rem
top, right, bottom, left → rem

/* ❌ 不会转换的属性 */
border, box-shadow → 保持 px

minPixelValue: 2

小于 2px 的值不转换,避免极小值转换后精度丢失:

/* 1px 不会被转换(小于 minPixelValue) */
.element {
  border: 1px solid red; /* 保持 1px */
}

/* 2px 及以上正常转换 */
.element {
  padding: 2px; /* 转换为 0.043rem */
  margin: 16px; /* 转换为 0.341rem */
}

exclude: /node_modules/i

排除 node_modules,避免第三方样式库被转换:

exclude: /node_modules/i;

// ✅ 排除这些库
// node_modules/vant/
// node_modules/element-plus/
// node_modules/@vueuse/

6.3 配置效果说明

场景 配置效果 说明
1px 边框 保持 1px(清晰) selectorBlackList 生效
2px 及以上 正常转换为 rem minPixelValue 设为 2
box-shadow 保持 px(清晰) selectorBlackList 包含 box-shadow
node_modules ✅ 排除,避免冲突 exclude 正则匹配生效

七、使用示例

7.1 开发时直接写 px

<template>
  <div class="container">
    <h1 class="title">标题文字</h1>
    <p class="content">正文内容</p>
    <button class="btn">按钮</button>
  </div>
</template>

<style scoped>
/* ✅ 开发时完全按照 750px 设计稿写 px */
.container {
  width: 750px;
  height: 1200px;
  padding: 32px;
  margin: 0 auto;
}

.title {
  font-size: 48px; /* 自动转 rem */
  line-height: 64px;
  margin-bottom: 24px;
}

.content {
  font-size: 28px;
  line-height: 44px;
}

.btn {
  width: 680px;
  height: 88px;
  font-size: 32px;
  border: 1px solid #ddd;
}
</style>

7.2 编译后自动转换

/* postcss-pxtorem 自动转换后 */
.container {
  width: 16rem; /* 750px → 16rem */
  height: 25.6rem; /* 1200px → 25.6rem */
  padding: 0.682rem; /* 32px → 0.682rem */
  margin: 0 auto;
}

.title {
  font-size: 1.024rem; /* 48px → 1.024rem */
  line-height: 1.365rem;
  margin-bottom: 0.512rem;
}

.content {
  font-size: 0.597rem;
  line-height: 0.938rem;
}

.btn {
  width: 14.506rem;
  height: 1.877rem;
  font-size: 0.682rem;
  border: 1px solid #ddd; /* 边框不转换 */
}

八、参考文档

官方文档

相关资源


总结

本方案通过 动态根字体 + PostCSS 自动转换 + 微信适配 的三层架构,实现了:

开发友好: 直接写 px,无需手动计算 rem ✅ 自动适配: 构建时自动转换,运行时动态缩放 ✅ 微信兼容: 完整支持微信大字体场景 ✅ 生产可用: 经过多个项目验证,稳定可靠

适用场景:

  • 移动端 H5 页面
  • 微信内嵌页面
  • 需要精细控制的响应式布局

乔布斯诞辰 71 周年,他的 30 个朋友给我们写了封信

作者 苏伟鸿
2026年2月25日 22:04

在苹果传奇创始人史蒂夫 · 乔布斯 71 岁诞辰之际,史蒂夫 · 乔布斯档案馆发布了一个文集——《给年轻创作者的信》(Letters to a Young Creator)。

这个文集可谓是众星云集,齐聚了近 30 位商业、设计、科技等领域领军人物,如苹果现任 CEO 蒂姆 · 库克、前苹果首席设计师乔纳森 · 艾维、日本建筑师安藤忠雄、德国设计师迪特 · 拉姆斯,等等。他们以「给年轻创作者一封信」的形式,分享了各自创造、设计、人生的深刻洞见。

这个文集的名称也颇有巧思——致敬德国诗人里尔克《给一个年轻诗人的信》,这也是乔布斯生前最喜欢的读物之一。

美国慈善家、乔布斯的遗孀劳伦 · 鲍威尔 · 乔布斯,为整部文集写了一则非常具有智慧和启发性的引言,其中她提到了里尔克的一个金句:

此刻,请你活在问题之中。或许有一天,在你未曾察觉之时,你已渐渐走入答案。

▲ 鲍威尔与乔布斯

无论你是不是一位创作者,只要你怀揣着对于工作、学习乃至人生的疑问,我相信都能从这些分享者的箴言和思考中,获得一点启迪。

文集内容非常长,我们选取了几位重要的代表人物,摘录了其中部分内容进行分享。

整部文集可以在乔布斯档案馆以及苹果图书商店免费获取,官网地址:https://stevejobsarchive.com/publications

苹果 CEO 蒂姆 · 库克:相信自己的力量

我永远不会忘记第一次与乔布斯的谈话。当时苹果正在谷底挣扎,史蒂夫试图扭转局势。很多人怀疑公司能否存活。有人警告我,加入苹果的风险巨大。

但当史蒂夫开口说话,我心中的犹豫瞬间消散。我从未见过如此充满激情与愿景的人。他谈论未来——科技将释放人类创造力与潜能,以连结与提升我们的方式,甚至超出他的想象。为此,他需要一群充满好奇心的人,为超越自身的目标而努力。我知道我必须加入。

在史蒂夫身上,我找到了导师。他激励我成长与自我挑战。加入苹果,对我来说不是换了一份工作,而是找到了使命。这是我做过最重要的决定。

当你们开启职业生涯,你们也会面临选择。你们正处在一个技术突破不断涌现的时代,新路径与新机会正在展开。

这令人兴奋,也可能令人恐惧。如何知道该走哪条路?如何确认自己做出正确选择?

如果能给你带来安慰,请记住:许多成功人士在你们这个年纪,也并不知晓答案,这没有关系。我学到的一点是:未来不可预测。与其问「会发生什么?」,不如问「当它发生时,我会成为什么样的人?」

我希望你们能成为在工作中追寻意义的人,成为理解为世界做有意义之事之美的人。去寻找点燃你热情的人吧,守护你内心的好奇火焰。

最重要的是,不要怀疑你们拥有成就非凡之事的能力。而实现它的唯一方式,是与他人共同完成。

我相信你们。

▲ 库克发微博纪念乔布斯诞辰

前苹果首席设计师乔纳森 · 艾维:创造美的事物

自从他的悼词之后,我没有再公开谈论我与乔布斯的友谊、冒险与合作。我从未去读那些铺天盖地的故事、讣告,或那些奇怪的误读如何被写进「传说」。

我爱乔布斯看世界的方式,他的思考方式美得惊人。他无疑是我见过最具探究精神的人。他的好奇心不是零散或随意的,也不依赖既有知识或专长,而是凶猛的、充满能量的、不安分的。他以明确的意图与严格的训练来实践好奇心。

很多人天生会更好奇。我相信,经过传统教育,或在多人环境中工作之后,好奇心反而成了一种需要意志与纪律的决定。

好奇心会逼着我们学习。而对史蒂夫来说,想学习远比想证明自己正确更重要。

好奇心把我们连在一起。它构成了我们快乐且高效合作的基础。我想,它也缓冲了我们对「做一件可怕的新事物」的恐惧。

史蒂夫很在意自己思考的性质与质量。他对自己期待极高,并努力让思考具有罕见的生命力、优雅与纪律。他的严苛与韧性把标准抬到了令人眩晕的高度。

然而,当想法逐渐成长为点子——无论多么试探、多么脆弱——他都会意识到这是神圣之地。他对创作过程有深刻理解与敬畏。他明白,创作应当获得罕见的尊重——不仅是在想法很好或条件很便利的时候。

想法是脆弱的。如果它们已经被彻底解决,那就不再是想法,而是产品。要不被新想法带来的问题吞没,需要一种坚定的努力。问题很容易被清楚说出、被理解,它们会夺走氧气。史蒂夫会把注意力放在想法本身上,哪怕它不完整、甚至看似不太可能。

现在,比任何时候我都更怀念史蒂夫那种独特而清澈的清晰感。超越想法与愿景本身,我怀念的是他那种能够为混乱建立秩序的洞见。

这和他「擅长表达」的传奇能力无关,却与他对简单、真实与纯粹的执念有关。

归根结底,我相信这反映了驱动他的底层动机。他没有被金钱或权力分散注意力,而是被一种更直接的愿望驱动:以具体可见的方式,表达他对人类物种的爱与欣赏。

他真的相信,当我们做出有用、赋能且美的事物,我们是在表达对人类的爱。

我对你、也对我自己的真诚期望是:我们用创造美的事物来证明我们对人类的欣赏。

日本建筑大师安藤忠雄:不存在唯一正确答案

致年轻的创作者们,

被时代的动荡吞没之际,

请去寻找那些不变的、或不应改变的事物:

那就是人类文化的本质。

这就是我对建筑的理解。

从不存在唯一正确答案。

对话越是极端、越是不妥协,

内心承受的挣扎越是艰难,

建筑的生命力便越发强大。

致年轻的创作者们,

生命的本质不在聚光灯之下,

而存在于阴影中的挣扎时刻,

当你朝远方的光努力前行之时。

请不要失去对那束光的凝视。

德国工业设计师迪特 · 拉姆斯:做得更少,但更好

多年前,我把自己在创作工作中的经验与对产品设计的态度,总结为十条原则(十诫)。我认为它们在今天依然有效:

  • 好设计是创新的
  • 好设计让产品有用
  • 好设计是审美的
  • 好设计让产品易于理解
  • 好设计是不张扬的
  • 好设计是真诚的
  • 好设计是耐久的
  • 好设计到最后一个细节都是一致的
  • 好设计是环保的
  • 好设计是尽可能少的设计

不过,这些原则并非不可更改。每一代人都应重新审视它们,并在必要时修改、补充。把它们当作你工作的心理指南。

把自己看作不仅是人们及其需求的倡导者,也要成为我们星球的倡导者。

「为无思考消费做无思考设计的日子已经结束。」我多年前这样写过。遗憾的是,这个愿望至今仍未实现。我把这个愿望传递给你:做得更少,但做得更好。

苹果广告大师李 · 克劳:不做「正确的事」

李 · 克劳是和乔布斯长期合作的广告总监,他帮苹果制作了《1984》和《不同凡想》(Think Different)两条经典广告。

▲ 左:乔布斯;右:李 · 克劳

关于如何拥有并推销一个大胆想法,可以这样理解:

不要做「正确的事」。

「正确的事」在会议上听起来很好,在图表上看起来完美。

「正确的事」能安抚焦躁的情绪,让所有人都能达成共识。

「正确的事」足够好。

但正如我们公司 T 恤印着的:

「足够好,并不够好。」

要像躲瘟疫一样躲避「正确的事」。

▲ Macintosh 电脑经典广告《1984》

那我是在建议你做错误的事吗?

当然不是。去做勇敢的事。

做那件让你睡不着觉的事,那件充满未知的事,那件一会儿显得荒谬、一会儿显得天才的事。那才是你应该做的。

追逐它,不要放手。去做那件颠覆的事,那件掀翻现状的事,那件不仅挑战现状,而是重塑它的事。你可以做到。

做不做「正确的事」是一种选择,是否选择颠覆也是一种选择。

我建议你选择勇敢。

迪士尼 CEO 鲍勃 · 艾格:创造本质上是冒险

由于皮克斯和 iPod 的关系,乔布斯与迪士尼 CEO 鲍勃 · 艾格有过多次合作和交流,两人关系十分友好,乔布斯还曾经邀请艾格作为苹果发布会的神秘嘉宾。

创造力,在它最巅峰、最纯粹的形态中,是人类全情投入、卓越执行,以及某些时刻运气加持的结晶。

同样重要的是,我们必须意识到:创造力无法被简化为数学或科学问题。算法与数据永远无法告诉我们「应该创造什么」。在这个被数据淹没的时代,我们很容易想让它回答所有创意上的问题。但它不会——因为它做不到,我们也不该这样要求。

对创意决策进行事后揣测,是一件危险的事。要从创作中的失误中学习,但不要反复追问「为什么当初要这么做」。更好的问题是:「怎样可以做得更好?」

最后,畏惧风险,等同于扼杀创造力——因为一切真正的创造,本质上都是一次冒险。

愿你们的好奇心,成为这段旅程的燃料。愿它为你们带来源源不断的探索、激动与满足。

美国作家莫娜 · 辛普森:做最好的自己

莫娜 · 辛普森是一位美国小说家,代表作《在别处》《凡人》等。她还有两个特殊身份:《辛普森一家》中母亲的角色原型,以及史蒂夫 · 乔布斯的胞妹。

▲ 乔布斯与辛普森,中间的是乔布斯的女儿丽萨 · 布伦南-乔布斯

给年轻作家的信:

最重要的事情,其实非常简单:养成每日练习的习惯。艺术不是一个项目,不是一门生意,甚至不只是职业。艺术是一种生活。

我的一位老师曾经建议:如果你能想象自己去做任何别的事,那你或许应该去做那件事。

因为创作这条路,只属于那些无法以别的方式生活的人。

没有什么固定公式;有人在黎明时分状态最佳,有人则在夜深人静时灵感最盛。

每天早起,开始写作。你每天做什么,你就成为什么。

要明白:这是一场漫长的游戏。

开始弄清楚,你要如何进行持续自我教育。

你的教育不仅在写作本身,也在阅读那些前人留下的作品。学会深度而高效地阅读。

培养你的判断力。但不要让这种审美的精细,阻止你继续创作新的作品。

试着与他人建立共同体。这将是你的一生。想办法去享受它。组建读书会,创办文学杂志,发起朗读活动。

不要让那种「我还不够好」的抑郁情绪吞没你,耗掉一段又一段生命。因为每次从这种低谷走出来,你都会发现自己又回到了起点。多去生活,多去写作。

避免排名与比较。我或许更愿意成为贝克特或卡夫卡,但充其量,我也只能成为一个不错的模仿者。你能成为的最好状态,只能是成为最好的自己——那才是值得追求、值得发现的。而这,从根本上说,与别人正在做什么毫无关系。

#欢迎关注爱范儿官方微信公众号:爱范儿(微信号:ifanr),更多精彩内容第一时间为您奉上。

爱范儿 | 原文链接 · 查看评论 · 新浪微博


Claude Code 构建完全指南:十大核心功能深度解析

作者 王小酱
2026年2月25日 21:47

一、创建自定义子代理(Subagents)

1. 是什么

子代理是运行在独立上下文窗口中的专用 AI 助手。每个子代理拥有自己的系统提示、工具访问权限和权限设置。当 Claude 遇到与某个子代理描述匹配的任务时,会自动将任务委派给该子代理,子代理独立工作并返回结果。Claude Code 内置了 Explore(只读代码搜索,使用 Haiku 模型)、Plan(计划模式研究代理)和 general-purpose(全工具通用代理)等子代理,用户也可以创建自定义子代理。

2. 怎么用

创建子代理最简单的方式是在 Claude Code 中运行 /agents 命令,进入交互式界面选择"Create new agent",然后选择作用域(用户级或项目级),输入描述后由 Claude 自动生成配置。也可以手动创建 Markdown 文件,放在 .claude/agents/(项目级)或 ~/.claude/agents/(用户级)目录中:

---
name: code-reviewer
description: Reviews code for quality and best practices
tools: Read, Glob, Grep
model: sonnet
---
You are a code reviewer. Analyze the code and provide actionable feedback.

还可以通过 CLI 标志以 JSON 传递临时子代理:

claude --agents '{ "code-reviewer": { "description": "Expert code reviewer.", "prompt": "Focus on code quality and security.", "tools": ["Read","Grep","Glob","Bash"], "model": "sonnet" } }'

3. 使用场景与痛点

子代理解决的核心痛点是主对话上下文膨胀和工具权限失控。典型场景包括:运行测试套件时大量输出占用上下文(委派给子代理后只返回摘要)、需要对代码库进行并行研究(多个子代理同时探索不同模块)、需要强制只读权限(如代码审查只允许读不允许写)、多步骤工作流的链式委派(先审查再优化),以及通过路由到 Haiku 模型来控制 Token 成本。

4. 使用示例

入门示例——只读代码审查器:

---
name: code-reviewer
description: Expert code review specialist. Use immediately after writing or modifying code.
tools: Read, Grep, Glob, Bash
model: inherit
---
You are a senior code reviewer. Run git diff, focus on modified files, check for readability, error handling, security, and test coverage. Organize feedback by priority: Critical, Warnings, Suggestions.

使用时只需说:"Use the code-reviewer subagent to look at my recent changes."

进阶示例——带持久化记忆的调试器:

---
name: debugger
description: Debugging specialist for errors, test failures, and unexpected behavior. Use proactively when encountering any issues.
tools: Read, Edit, Bash, Grep, Glob
memory: user
---
You are an expert debugger. Capture error messages, identify reproduction steps, isolate failure location, implement minimal fix, verify solution. Before starting, consult your memory for patterns you've seen before. After fixing, save what you learned.

记忆功能使调试器跨会话积累知识——它会记住之前遇到的 bug 模式和修复策略,随着使用越来越高效。

高级最佳实践——带 Hook 验证的数据库查询代理:

---
name: db-reader
description: Execute read-only database queries. Use when analyzing data or generating reports.
tools: Bash
hooks:
  PreToolUse:
    - matcher: "Bash"
      hooks:
        - type: command
          command: "./scripts/validate-readonly-query.sh"
---
You are a database analyst with read-only access. Execute SELECT queries only.

配合验证脚本,通过 Hook 在每个 Bash 命令执行前检查是否包含 INSERT/UPDATE/DELETE 等写操作,退出码 2 阻止执行。这是"工具级允许、操作级限制"的精细控制模式。其他高级实践包括:使用 skills 字段预加载团队编码规范、用 isolation: worktree 在独立 git worktree 中运行子代理避免影响主分支、用 Task(worker, researcher) 语法限制主代理只能生成特定子代理。

5. 适用角色

个人开发者: 创建用户级子代理(~/.claude/agents/)用于个人常用任务,如代码审查、调试、日志分析。推荐从 /agents 交互式界面入手,用 Haiku 模型的 Explore 子代理快速搜索代码库以节省成本。

团队开发者: 创建项目级子代理(.claude/agents/)并提交到版本控制。统一团队的代码审查标准、API 开发规范。使用 skills 字段预加载团队编码规范,确保每个成员使用的子代理行为一致。

Tech Lead / 架构师: 设计子代理体系——为不同任务领域(前端、后端、数据库、安全)创建专门的子代理,使用权限模式和工具限制确保安全边界。利用 memory: project 让子代理积累项目架构知识。

DevOps / CI 工程师: 通过 --agents CLI 标志在自动化脚本和 CI/CD 流水线中动态定义子代理,用于自动化测试、代码扫描、构建验证等。结合 bypassPermissions 模式实现全自动化执行。


二、运行代理团队(Agent Teams)

1. 是什么

代理团队是一项实验性功能,允许多个独立的 Claude Code 实例协同工作。一个会话充当"团队负责人"(Lead),协调工作、分配任务和综合结果;其他"团队成员"(Teammates)各自拥有独立的上下文窗口,可以直接相互通信、挑战彼此的发现。与子代理的关键区别是:子代理只能向主代理报告结果,而代理团队成员之间可以直接发送消息和协作。

2. 怎么用

首先需要启用实验性功能,在 settings.json 中添加:

{ "env": { "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1" } }

然后用自然语言告诉 Claude 创建团队:

Create an agent team to review PR #142. Spawn three reviewers:
- One focused on security implications
- One checking performance impact
- One validating test coverage

Claude 会创建团队、生成共享任务列表、生成成员并协调工作。在进程内模式中用 Shift+Down 切换成员;在分屏模式中(需 tmux 或 iTerm2)每个成员有独立窗格。用 Ctrl+T 切换任务列表视图。

3. 使用场景与痛点

代理团队解决的核心痛点是单一会话的线性工作模式无法高效处理需要并行探索的复杂任务。最强场景包括:并行代码审查(安全、性能、测试覆盖各一个审查员,避免单个审查员的视角偏见)、竞争假设调试(多个成员调查不同理论并相互辩论反驳,避免锚定效应)、新功能多模块开发(每个成员负责一个独立模块不会冲突)以及跨层协调(前端、后端、测试各由不同成员负责)。

不适合的场景:顺序任务、同文件编辑、依赖关系多的工作——这些情况下单会话或子代理更高效。

4. 使用示例

入门示例——并行代码审查:

Create an agent team to review PR #142. Spawn three reviewers:
- One focused on security implications
- One checking performance impact
- One validating test coverage
Have them each review and report findings.

每个审查员从不同角度审查同一个 PR,Lead 综合所有发现。

进阶示例——竞争假设调试:

Users report the app exits after one message instead of staying connected.
Spawn 5 agent teammates to investigate different hypotheses.
Have them talk to each other to try to disprove each other's theories,
like a scientific debate. Update the findings doc with whatever consensus emerges.

辩论式结构是关键——多个独立调查者主动尝试推翻对方的理论,幸存的理论更可能是真正的根因。

高级最佳实践:

要求成员在实施前提交计划审批:

Spawn an architect teammate to refactor the authentication module.
Require plan approval before they make any changes.

成员以只读计划模式工作,提交计划后由 Lead 审批或驳回。可以通过提示影响 Lead 的判断标准,如"只批准包含测试覆盖的计划"。其他高级实践包括:使用 TeammateIdle 和 TaskCompleted Hook 实施质量门禁、保持 3-5 个成员和每人 5-6 个任务的最佳比例、给成员充足的上下文(spawn 提示中包含具体的任务细节而非依赖继承)。

5. 适用角色

个人开发者: 从研究和审查任务开始尝试——审查一个 PR、研究一个库、调查一个 bug。这些任务展示并行探索的价值,又没有并行实施的协调挑战。

团队 Lead / 项目经理: 用代理团队进行全方位的代码审查、架构评估和技术方案论证。通过设定审批流程(require plan approval)控制实施质量。

高级工程师: 用于复杂调试(竞争假设模式)、跨模块重构(每个成员负责一个模块)和大规模代码迁移(并行处理不同组件)。注意 Token 消耗——代理团队的成本随成员数线性增长。

注意: 代理团队目前是实验性功能,不建议在关键生产流程中使用。已知限制包括不支持进程内成员的会话恢复、任务状态可能滞后、每个会话只能管理一个团队。


三、创建插件(Plugins)

1. 是什么

插件是 Claude Code 的打包扩展机制,将技能、代理、钩子、MCP 服务器和 LSP 服务器封装成可分发的单元。每个插件有一个 .claude-plugin/plugin.json 清单文件定义元数据,以及按功能组织的目录结构。插件的技能使用命名空间(/plugin-name:skill-name)来避免多插件之间的冲突。

与独立配置(.claude/ 目录中的文件)相比,插件更适合需要跨项目、跨团队共享的场景——独立配置适合个人实验和项目专属定制,插件适合版本化发布和市场分发。

2. 怎么用

创建插件的步骤:

# 1. 创建插件目录和清单
mkdir -p my-plugin/.claude-plugin
# 2. 编写 plugin.json
cat > my-plugin/.claude-plugin/plugin.json << 'EOF'
{ "name": "my-plugin", "description": "My extension", "version": "1.0.0" }
EOF
# 3. 添加技能
mkdir -p my-plugin/skills/hello
cat > my-plugin/skills/hello/SKILL.md << 'EOF'
---
description: Greet the user with a friendly message
---
Greet the user warmly and ask how you can help.
EOF
# 4. 本地测试
claude --plugin-dir ./my-plugin

在 Claude Code 中运行 /my-plugin:hello 即可使用。可以用 --plugin-dir 标志同时加载多个插件进行测试。

3. 使用场景与痛点

插件解决的核心痛点是扩展功能的碎片化和不可共享。典型场景包括:团队统一工具链(所有成员通过安装同一插件获得相同的代码审查代理、提交工作流和格式化钩子)、社区分享(将自己开发的有用扩展发布到市场让其他人安装)、跨项目复用(一套检查规则不需要在每个项目中重新配置)、以及版本化管理(通过语义化版本号追踪发布和更新)。

4. 使用示例

入门示例——包含一个技能的插件:

创建一个 greeting 插件,包含一个 hello 技能。目录结构:greeting/.claude-plugin/plugin.json + greeting/skills/hello/SKILL.md。使用 claude --plugin-dir ./greeting 加载,然后运行 /greeting:hello Alex 测试。

进阶示例——包含代理、钩子和 LSP 的完整插件:

my-team-plugin/
├── .claude-plugin/
│   └── plugin.json
├── agents/
│   └── security-reviewer.md      # 安全审查代理
├── skills/
│   └── code-review/
│       └── SKILL.md               # 代码审查技能
├── hooks/
│   └── hooks.json                 # PostToolUse 自动格式化
├── .mcp.json                      # 集成 GitHub MCP 服务器
├── .lsp.json                      # TypeScript LSP 配置
└── settings.json                  # 默认设置 {"agent": "security-reviewer"}

设置 settings.json 中的 agent 字段可以让插件在启用时自动激活指定代理作为默认行为。

高级最佳实践:

从独立配置迁移到插件:将 .claude/commands/.claude/agents/.claude/skills/ 的文件复制到插件目录,将 settings.json 中的 hooks 迁移到 hooks/hooks.json,然后用 --plugin-dir 验证一切正常。发布前为插件添加 README.md,使用语义化版本号。注意:不要把 commands/agents/ 等目录放在 .claude-plugin/ 里面——只有 plugin.json 放在 .claude-plugin/ 中,其他目录在插件根目录。

5. 适用角色

个人开发者: 先用 .claude/ 目录中的独立配置快速实验,等稳定后再转为插件以跨项目复用。适合创建个人的提交工作流、代码模板等。

团队 Lead / 平台工程师: 为团队创建统一的插件,包含编码规范技能、代码审查代理和自动格式化钩子。通过项目的 .claude/settings.json 配置团队市场,让新成员加入时自动获取团队插件。

开源 / 社区贡献者: 创建通用插件(如 commit-commands、pr-review-toolkit)并发布到市场,供社区使用。遵循清晰的目录结构和版本号规范。

企业 IT 管理员: 通过托管设置(managed settings)部署组织级插件,确保合规性审查工具和安全检查在所有项目中强制启用。


四、发现和安装预构建插件

1. 是什么

插件市场(Marketplace)是帮助用户发现和安装 Claude Code 扩展的目录。市场本质上是一个包含 .claude-plugin/marketplace.json 的仓库或文件,列出了可供安装的插件集合。Anthropic 官方市场(claude-plugins-official)自动可用,包含代码智能(LSP)、外部集成(GitHub/Slack/Jira 等)、开发工作流和输出风格等类别的插件。用户也可以添加第三方市场或创建团队私有市场。

2. 怎么用

# 浏览官方市场
/plugin                             # 打开插件管理器,进入 Discover 标签

# 安装插件
/plugin install typescript-lsp@claude-plugins-official

# 添加第三方市场
/plugin marketplace add anthropics/claude-code        # GitHub 仓库
/plugin marketplace add https://gitlab.com/company/plugins.git  # Git URL
/plugin marketplace add ./my-marketplace              # 本地路径

# 管理插件
/plugin disable plugin-name@marketplace-name          # 禁用
/plugin enable plugin-name@marketplace-name           # 启用
/plugin uninstall plugin-name@marketplace-name        # 卸载

# 管理市场
/plugin marketplace list                              # 列出所有市场
/plugin marketplace update marketplace-name           # 刷新
/plugin marketplace remove marketplace-name           # 移除(会卸载其中的插件)

插件安装有三种作用域:用户(跨所有项目)、项目(通过 .claude/settings.json 共享给协作者)和本地(仅当前用户当前仓库)。

3. 使用场景与痛点

插件市场解决的核心痛点是手动配置外部工具的复杂性和团队配置不一致。安装代码智能插件后,Claude 在每次编辑后自动获得类型错误、缺失导入等诊断反馈,无需手动运行编译器。安装外部集成插件(GitHub、Jira、Slack)后,Claude 可以直接与这些服务交互,无需手动配置 MCP 服务器。团队管理员可以在 .claude/settings.json 中配置 extraKnownMarketplacesenabledPlugins,让团队成员信任仓库后自动安装指定市场和插件。

4. 使用示例

入门示例——安装代码智能插件:

/plugin install typescript-lsp@claude-plugins-official

安装后,Claude 在编辑 TypeScript 文件时自动获得类型检查——如果引入错误会立即发现并在同一轮修复。按 Ctrl+O 可以内联查看诊断信息。前提:系统需安装对应的语言服务器二进制文件(如 typescript-language-server)。

进阶示例——添加外部集成和工作流插件:

# 安装 GitHub 集成
/plugin install github@claude-plugins-official
# 安装提交工作流
/plugin install commit-commands@claude-plugins-official

之后可以直接说"Review PR #456 and suggest improvements"或使用 /commit-commands:commit 一键暂存、生成消息、创建提交。

高级最佳实践:

配置团队市场自动安装:在项目的 .claude/settings.json 中添加 extraKnownMarketplacesenabledPlugins,让团队成员加入项目时自动获取。启用自动更新以保持插件版本最新(官方市场默认启用,第三方默认禁用)。如果需要禁用 Claude Code 自动更新但保持插件更新,可设置 DISABLE_AUTOUPDATER=trueFORCE_AUTOUPDATE_PLUGINS=true

5. 适用角色

所有开发者: 安装代码智能插件是最基础的增强——给 Claude 实时的类型错误和语法问题反馈,减少编辑后需要手动编译验证的次数。

全栈开发者: 安装外部集成插件(GitHub、Slack、Figma、数据库),让 Claude 能直接从 issue 描述实现功能、集成设计稿、查询数据库。

团队管理员: 配置团队市场,确保所有成员使用相同的插件和版本。通过项目级安装(--scope project)将插件配置提交到版本控制。

初学者: 从 Discover 标签浏览可用插件,安装 learning-output-style 或 explanatory-output-style 获得更好的学习体验。


五、使用技能扩展 Claude(Skills)

1. 是什么

技能(Skills)是通过 SKILL.md 文件为 Claude 添加的指令和能力扩展。技能遵循 Agent Skills 开放标准,可以是参考知识(编码规范、API 文档),也可以是具体任务(部署流程、提交规范)。Claude 可以根据任务上下文自动加载相关技能,用户也可以通过 /skill-name 直接调用。

技能与子代理的区别:技能默认在主对话上下文中运行(共享上下文),子代理在隔离的上下文中运行。技能适合需要共享对话历史的场景,子代理适合需要隔离的场景。

2. 怎么用

创建技能目录和 SKILL.md 文件:

mkdir -p ~/.claude/skills/explain-code

编写 ~/.claude/skills/explain-code/SKILL.md

---
name: explain-code
description: Explains code with visual diagrams and analogies. Use when explaining how code works.
---
When explaining code, always include:
1. **Start with an analogy**: Compare the code to something from everyday life
2. **Draw a diagram**: Use ASCII art to show the flow
3. **Walk through the code**: Explain step-by-step
4. **Highlight a gotcha**: What's a common mistake?

两种使用方式:让 Claude 自动识别("How does this code work?")或直接调用(/explain-code src/auth/login.ts)。

3. 使用场景与痛点

技能解决的核心痛点是重复的指令输入和行为不一致。没有技能时,每次需要 Claude 按特定方式工作都要重新描述需求;有了技能,一次编写,反复使用。典型场景包括:团队编码规范强制执行(API 设计模式、错误处理模式作为参考技能自动加载)、标准化操作流程(部署、提交、PR 创建作为任务技能由用户触发)、自定义代码生成模板(组件创建、测试编写遵循固定结构),以及跨项目知识复用(个人级技能在所有项目中可用)。

4. 使用示例

入门示例——参考型技能(API 规范):

---
name: api-conventions
description: API design patterns for this codebase
---
When writing API endpoints:
- Use RESTful naming conventions
- Return consistent error formats: { "error": { "code": "...", "message": "..." } }
- Include request validation with Zod schemas
- Always add rate limiting middleware

Claude 在实现 API 时会自动加载这个技能,确保遵循团队约定。

进阶示例——带参数和动态上下文的任务技能:

---
name: fix-issue
description: Fix a GitHub issue
disable-model-invocation: true
---
Fix GitHub issue $ARGUMENTS following our coding standards.

## Issue context
- Issue details: !`gh issue view $0 --json title,body,labels`
- Recent commits: !`git log --oneline -5`

## Steps
1. Read the issue description
2. Implement the fix
3. Write tests
4. Create a commit

使用 /fix-issue 123 时,!command 语法预先执行 shell 命令获取实时数据,$0 替换为第一个参数。disable-model-invocation: true 确保只有用户手动触发。

高级最佳实践——在子代理中运行技能 + 可视化输出:

---
name: deep-research
description: Research a topic thoroughly
context: fork
agent: Explore
---
Research $ARGUMENTS thoroughly:
1. Find relevant files using Glob and Grep
2. Read and analyze the code
3. Summarize findings with specific file references

context: fork 使技能在隔离的 Explore 子代理中运行,不影响主对话。另一个强大模式是生成可视化输出——技能中捆绑 Python 脚本生成交互式 HTML 文件用于数据探索。其他高级实践:使用 allowed-tools 限制技能中 Claude 可用的工具、用 Skill(commit) / Skill(deploy *) 权限规则精细控制哪些技能 Claude 可以自动调用、SKILL.md 控制在 500 行内并将详细参考材料拆分到辅助文件中。

5. 适用角色

个人开发者: 创建用户级技能(~/.claude/skills/)封装个人工作习惯——自定义提交格式、代码解释风格、调试流程。用 disable-model-invocation: true 保护有副作用的操作(如部署)。

团队开发者: 创建项目级技能(.claude/skills/)并提交到版本控制,统一团队的 API 设计模式、错误处理方式、测试编写规范。新成员无需阅读长篇文档,Claude 自动遵循。

技术培训师 / 导师: 创建教学型技能(如 explain-code),让 Claude 始终用类比、图表和分步讲解的方式解释代码,帮助初级开发者学习。

平台工程师: 通过插件分发技能、通过企业托管设置强制加载组织级技能,确保合规性检查和安全扫描在所有项目中自动执行。


六、输出风格(Output Styles)

1. 是什么

输出风格直接修改 Claude Code 的系统提示,改变 Claude 的响应方式——包括格式、语调和结构。与 CLAUDE.md(作为附加的用户消息)和 --append-system-prompt(追加到系统提示末尾)不同,输出风格会关闭 Claude Code 默认系统提示中与软件工程相关的部分,用自定义指令替代。Claude Code 内置三种风格:默认(高效完成软件工程任务)、解释性(在工作中穿插教育性"洞察")、学习(协作式学做模式,用 TODO(human) 标记让用户自己写代码)。

2. 怎么用

# 交互式选择
/output-style

# 直接切换到指定风格
/output-style explanatory
/output-style learning

创建自定义输出风格,保存为 Markdown 文件到 ~/.claude/output-styles/(用户级)或 .claude/output-styles/(项目级):

---
name: My Custom Style
description: A brief description
keep-coding-instructions: false
---
# Custom Style Instructions
You are an interactive CLI tool that helps users with software engineering tasks.
[Your custom instructions...]

keep-coding-instructions: true 可以保留 Claude Code 默认的编码相关系统提示(如"用测试验证代码")。

3. 使用场景与痛点

输出风格解决的核心痛点是 Claude 的响应方式与用户需求不匹配。有些人需要简洁的执行结果,有些人需要详细的解释以学习。典型场景包括:初学者学习模式(learning 风格让 Claude 不仅写代码还要求你自己实践)、教学演示(explanatory 风格在每个实现决策后插入背景知识)、非软件工程任务(关闭默认的编码指令,让 Claude 专注于写作、分析等)、团队统一输出格式(通过项目级输出风格确保所有人看到相同格式的响应)。

4. 使用示例

入门示例——切换到学习模式:

/output-style learning

切换后,Claude 在帮你完成任务时会添加 TODO(human) 标记,要求你自己实现关键部分,同时分享"洞察"帮助你理解为什么这样做。

进阶示例——创建自定义架构师风格:

---
name: architect
description: Respond with architecture-first thinking. Always discuss trade-offs before implementing.
keep-coding-instructions: true
---
# Architect Mode
Before writing any code:
1. Identify the architectural implications
2. List alternative approaches with trade-offs
3. Recommend an approach with justification
4. Only implement after the user approves

Always think about: scalability, maintainability, testability, and security.
Use diagrams (ASCII art) to illustrate architecture decisions.

高级最佳实践:

理解输出风格与其他扩展机制的区别非常重要:输出风格修改系统提示、始终生效;技能是按需加载的任务指令;CLAUDE.md 是始终存在的上下文补充。最佳实践是用输出风格控制"Claude 如何说",用技能控制"Claude 做什么",用 CLAUDE.md 提供"Claude 需要知道什么"。变更保存在 .claude/settings.local.json,也可直接编辑其他级别设置文件中的 outputStyle 字段。

5. 适用角色

初学者 / 学生: 使用 learning 风格,让 Claude 变成交互式编程导师——不仅帮你写代码,还要求你自己实践关键部分,加速学习。

经验开发者: 使用默认风格或创建极简自定义风格,获得简洁高效的输出,减少冗余解释。

技术 Lead / 导师: 使用 explanatory 风格或创建架构师风格,在代码审查和设计讨论时获得详细的决策背景和权衡分析。

非工程人员(产品、设计): 创建自定义输出风格关闭编码指令,让 Claude 专注于文档编写、数据分析或项目管理任务。


七、使用钩子自动化工作流(Hooks)

1. 是什么

钩子(Hooks)是在 Claude Code 生命周期特定节点执行的用户定义 shell 命令,提供确定性的行为控制——确保某些操作始终发生,而非依赖 LLM 的判断。钩子支持丰富的事件类型:SessionStart(会话开始/恢复/压缩后)、PreToolUse(工具执行前,可阻止)、PostToolUse(工具执行后)、Notification(通知时)、Stop(Claude 完成响应时)、ConfigChange(配置变更时)等。除了命令型钩子外,还有提示型(type: "prompt",使用 Claude 模型判断)和代理型(type: "agent",生成子代理验证条件)。

2. 怎么用

最快的方式是运行 /hooks 进入交互式菜单,选择事件、配置匹配器和命令。也可以直接在配置文件中编写:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": "jq -r '.tool_input.file_path' | xargs npx prettier --write"
          }
        ]
      }
    ]
  }
}

钩子通过 stdin 接收 JSON 事件数据,通过退出码控制行为:0 = 继续,2 = 阻止(stderr 内容反馈给 Claude),其他 = 继续但记录。配置文件位置:~/.claude/settings.json(所有项目)、.claude/settings.json(单项目共享)、.claude/settings.local.json(单项目私有)。

3. 使用场景与痛点

钩子解决的核心痛点是手动重复操作和依赖 LLM 判断的不可靠性。典型场景包括:每次编辑后自动格式化(PostToolUse + Edit|Write 匹配器 + Prettier)、保护敏感文件不被修改(PreToolUse 检查文件路径拒绝 .env、package-lock.json)、桌面通知(Notification 事件触发 osascript/notify-send)、压缩后重新注入关键上下文(SessionStart + compact 匹配器)、审计配置变更(ConfigChange 事件记录到日志文件)。

4. 使用示例

入门示例——桌面通知:

macOS:

{
  "hooks": {
    "Notification": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "osascript -e 'display notification \"Claude Code needs your attention\" with title \"Claude Code\"'"
          }
        ]
      }
    ]
  }
}

保存到 ~/.claude/settings.json,之后每次 Claude 等待输入时都会收到系统通知。

进阶示例——保护敏感文件 + 自动格式化:

创建 .claude/hooks/protect-files.sh 脚本,从 stdin 读取 JSON,用 jq 提取 tool_input.file_path,检查是否匹配 .envpackage-lock.json.git/ 等受保护模式,匹配则 exit 2 阻止。同时配置 PostToolUse 钩子在每次 Edit/Write 后自动运行 Prettier。这样实现了"阻止 + 后处理"的双层自动化。

高级最佳实践——提示型和代理型钩子:

{
  "hooks": {
    "Stop": [
      {
        "hooks": [
          {
            "type": "prompt",
            "prompt": "Check if all tasks are complete. If not, respond with {\"ok\": false, \"reason\": \"what remains\"}."
          }

百款出海社交 App 一夜下架!2026,匿名社交的生死劫怎么破?

作者 iOS研究院
2026年2月25日 20:15

2026年2月24日,出海社交领域迎来标志性的“黑色星期二”,百余款社交类App在无任何预警、无邮件通知、无申诉通道的情况下,被App Store集体下架。即便部分应用近期刚完成版本更新、运营状态平稳,也未能幸免。此次事件引发行业震动,苹果的清理行动究竟是偶然误伤还是定向整治?下架风暴的背后暗藏哪些监管逻辑?出海社交开发者如何突破困境、实现可持续发展?本文将深入拆解事件本质,梳理监管趋势,提供合规生存路径。

ScreenShot_2026-02-25_194516_417.png

ScreenShot_2026-02-25_194451_015.png

定向整治而非偶然误伤,四大市场同步发力

此次App Store下架行动并非随机操作,而是覆盖美国、澳大利亚、巴西、新加坡四大核心市场的定向清理,各市场虽审查重点略有差异,但整治核心高度统一,均聚焦于高风险社交场景。

美国作为全球最核心的应用市场,下架应用表面涵盖AI音乐、职场社交、旅游、育儿等多个品类,但核心筛选标准清晰——凡是包含“Live Chat”“Video Chat”“Meet New Friends”等关键词、以陌生人实时互动为核心功能的社交应用,均成为清理重点。

新加坡与澳大利亚的清理逻辑高度一致,对匿名社交类应用实施“零容忍”政策,大量主打“匿名聊天”“视频聊天”的产品被集中移除,其中不乏Aloha Live - Anonymous Chat、Xonder: Anonymous Chat & Vent等直接以“匿名”为核心卖点的应用,凸显两地对不可追溯社交模式的严格监管态度。

巴西市场的清理范围进一步扩大,除纯社交应用外,春辉乐玩、玩伴Vibe等具备旅游属性的轻度社交产品也被纳入下架名单。这一举措背后,是巴西市场将用户数据安全与未成年人保护纳入核心审查维度,审查标准提升至历史新高。

中国开发者高频踩雷:四类高危产品触发监管红线

梳理此次被下架的中国开发者相关产品,可发现其普遍存在明确的“高危特征”,均精准触碰了全球监管红线,具体可分为四大类:

1. 匿名树洞类产品

以默言、nimi-i人专属匿名聊天为代表,这类产品精准定位职场人、社恐群体的表达需求,主打“匿名对话”“无社交压力”等核心卖点,部分产品甚至取消点赞、推荐、动态广场等功能,极致强化匿名属性。但在监管层面,匿名意味着用户行为不可追溯,此类模式被明确界定为“高风险交互模式”,极易成为不良信息传播的载体,从而触发监管处罚。

2. 速配交友类产品

连连婚恋、LivMe-Meet new friend等产品均以“陌生人速配”为核心模式,前者面向职场人群提供免费婚恋交友服务,后者主打全球范围内的随机匹配聊天。此类产品的核心痛点的在于,多数中小开发团队难以承担7×24小时实时内容审核的成本,缺乏完善的审核机制,导致诈骗、色情等违法违规信息极易滋生,成为监管重点整治对象。

3. AI情感伴侣类产品

Joiy、ItsMee等产品将AI技术与情感社交深度结合,推出AI聊天、情绪匹配、专属AI聊天机器人等功能,看似是产品创新,实则触碰监管敏感点。AI技术本身并非违规核心,但当AI被用于模拟人类进行情感交流,且存在触达未成年人的可能时,监管容忍度降至零。此次下架也明确释放信号:情感类AI社交已成为全球监管的下一重点领域。

4. 马甲工具/社区类产品

部分产品以工具、垂直社区为外壳,暗藏社交属性,例如摄影社区CNU-顶尖视觉精选,虽以摄影内容分享为核心,但包含UGC内容发布、用户私信互动等社交功能,最终也被纳入清理范围。这一现象表明,只要涉及用户互动与内容传播,无论产品外在形态如何,均需遵守社交应用监管规范,不存在“法外之地”。

双重监管合围:苹果新规与全球法律形成监管合力

此次下架风暴的爆发,并非苹果单独行动,而是苹果平台规则升级与全球各国监管政策收紧形成的合力,推动出海社交行业正式进入“强合规时代”。

苹果平台规则升级:匿名社交被明确禁止

2026年2月6日,苹果悄然更新《App Store审核指南》,在1.2章节“用户生成内容”中,明确将“随机或匿名聊天”与色情内容、人身威胁、欺凌等列为App Store禁入类型,并保留“未经通知即可移除应用”的权利。

此前广泛应用于陌生人社交的Chatroulette式随机匹配模式,曾是行业核心创新点,如今已被定义为高风险功能。苹果的监管逻辑清晰:匿名+随机社交模式需要极致的内容审核能力,而多数中小开发团队难以承担相应成本,为规避平台风险,采取“一刀切”的清理策略。

全球各国监管收紧:未成年人保护成核心红线

如果说苹果新规是“平台层面的管控”,全球各国的法律政策则是“市场层面的约束”,且均以未成年人保护为核心,进一步压缩不合规产品的生存空间:

——巴西、澳大利亚、新加坡:自2月24日起,下载18+应用需通过苹果年龄验证;巴西额外规定,包含“开箱抽奖”等类赌博机制的应用,直接评级为18+,直接切断此类社交+游戏类产品的未成年人用户市场。

——美国:犹他州《应用商店责任法案》已于2025年5月生效,要求应用商店强制验证用户年龄,未成年人账号需关联家长账号,开发者违规将面临家长最高1000美元/次的索赔,苹果为规避“连坐”风险,进一步提高应用审核标准。

——欧洲:欧盟近期认定TikTok的“成瘾性设计”(如无限滚动、自动播放)违反《数字服务法案》,拟处以全球年收入6%的罚款;西班牙更推进“禁止16岁以下未成年人使用社交媒体”的政策,进一步强化对未成年人的保护。

综上,此次下架风暴是全球监管层对社交产品的一次“全面清算”,过去“先野蛮生长、后合规整改”的出海模式已彻底失效。

2026年出海社交合规生存指南:三大路径实现突围

面对全球监管收紧的大环境,出海社交开发者若想实现可持续发展,核心在于放弃侥幸心理、坚守合规底线,以下三条路径可作为破局关键:

路径一:放弃匿名模式,搭建实名/强认证体系

若产品商业模式依赖“用户匿名、无需对言行负责”的核心逻辑,需尽快完成转型。未来社交产品的核心底线是“可追溯”,即便采用昵称体系,也需搭建完善的持久账户体系,通过手机号验证、身份信息核验等强认证方式,确保用户行为可追溯、可管控,从源头降低不良信息传播风险。

路径二:将合规融入产品功能,适配全球监管要求

苹果推出的“申报年龄范围API”不应被视为运营负担,而应作为核心功能进行适配。开发者可针对不同年龄段用户设计差异化内容与功能:对未成年人开启严格的内容过滤、使用时间管理机制;对成年人提供合规范围内的社交服务。这种“分龄管理”模式,不仅能满足全球监管要求,更能提升产品公信力,成为打入欧美主流市场的核心优势。

路径三:严控AI功能风险,建立完善的内容过滤机制

随着AI技术在社交领域的广泛应用,AI陪聊、AI生成头像、AI匹配等功能成为产品创新方向,但需严格把控风险。开发者在引入AI功能前,需明确三大核心问题:AI训练数据是否合法合规?是否存在生成涉黄、涉政等敏感内容的可能?是否会诱导未成年人做出危险行为?无论采用何种大模型,均需建立严格的输出过滤机制,即便牺牲部分产品趣味性,也要确保内容绝对安全——海外市场中,单一违规内容(如AI生成的疑似儿童违规图片),即可导致应用永久下架,开发者甚至需承担刑事责任。

结语:合规是出海社交的唯一生路

2026年2月24日的下架风暴,只是全球社交领域监管收紧的一个开端。随着全球数字治理体系的不断完善,过去依赖技术红利、模式创新就能快速出海的时代已一去不复返,合规能力将成为出海社交开发者的核心竞争力。

对于在此次风暴中下架的产品,行业深感遗憾;而对于仍在坚守的开发者,需重新审视产品逻辑,主动拥抱监管、搭建完善的合规体系。唯有坚守合规底线,才能在全球出海赛道中长久立足——2026年,合规才是出海社交的唯一生存通行证。

遵守规则,方得长治久安,最后祝大家大吉大利,今晚过审!

相关推荐

# 苹果开发者续费大坑及成功续费方案!亲测有效

# AppStore敏感词排查手册,多维度分析Guideline 2.3.1隐藏功能,轻松过审。

# 如何主动提防苹果3.2f的进攻,自查防御手册(代码篇)

# 如何主动提防苹果3.2f的进攻,自查防御手册(ASO篇)

# 苹果加急审核是“绿色通道”还是“死亡陷阱”?

# 苹果开发者邮箱,突然收到11.2通知严重么?

# 不想被苹果卡审最好错开这两个提审时间

# 手撕苹果审核4.3是代码问题还是设计问题?

# 有幸和Appstore审核人员进行了一场视频会议特此记录。

WKWebView 中 iframe 无法监听原生 JSBridge 回调的完整分析

作者 Neon1204
2026年2月25日 15:09

WKWebView 中 iframe 无法监听原生 JSBridge 回调的完整分析

一、问题标题

WKWebView 场景下,Web 项目通过 iframe 加载三方页面,为什么无法在纯 Web 层监听到 recharge / newTppClose 等原生 JSBridge 回调?


二、问题描述

在 iOS App 中,使用 WKWebView 加载前端 Web 项目。Web 项目内部通过 iframe 嵌入三方页面(跨域)。

三方页面在某些业务节点(如充值、关闭页面)会调用以下接口:

window.JSBridgeService.recharge(arg)
window.JSBridgeService.newTppClose(arg)

原有方案 中:

  • iOS 原生通过 WKUserScript 向 WebView 注入 JSBridgeService
  • 三方页面调用后,iOS 原生可以正常收到回调
  • 原生再通过注入 JS 或其他桥接方式通知 Web 项目

现在的目标是:

去掉 iOS 原生中转,直接让 Web 项目与三方 iframe 通信,在 Web 层监听到 recharge / newTppClose 消息。

但实际情况是:

  • Web 项目中无论通过 addEventListenerpostMessage、函数重写等方式
  • 都无法监听到这两个回调

三、定位问题:为什么 Web 一定监听不到?

3.1 原生注入的 JSBridge 本质是什么?

iOS 原生注入的代码如下(简化):

window.JSBridgeService = {
  recharge: (arg) => {
    recharge.postMessage(JSON.stringify(arg || {}))
  },
  newTppClose: (arg) => {
    newTppClose.postMessage(JSON.stringify(arg || {}))
  }
}

这里有一个非常关键的认知点

recharge / newTppClose 并不是 JavaScript 世界里的函数或事件,而是 WKWebView 提供的 Native Message Handler 代理对象


3.2 JSBridge 调用链路分析

实际调用链路如下:

┌─────────────┐
│ 三方 iframe │
└──────┬──────┘
       │ 调用
       ▼
window.JSBridgeService.recharge()
       │
       ▼
┌──────────────────────────┐
│ WKWebView messageHandler │  ← JS Runtime 到此为止
└──────────┬───────────────┘
           │
           ▼
      iOS 原生代码

重点:

  • 这个调用 不会进入 DOM Event Loop
  • 不会触发任何 JS Event
  • 不支持冒泡、捕获、监听

因此,在 Web 层以下方式全部无效:

window.addEventListener('recharge', ...)
window.onrecharge = ...
Object.defineProperty(...)
Proxy(...)

3.3 为什么 window.postMessage 方案行不通?

很多人会下意识把这个问题类比为 postMessage,但两者完全不是一个层级的东西

对比项 window.postMessage WKWebView messageHandlers
标准 Web 标准 iOS 私有实现
是否可监听
是否可冒泡
JS 可代理
跨 iframe

结论:

WKWebView 的 messageHandler 是一个「JS → Native 的单向黑洞通道」,JS 只能调用,不能监听。


四、解决方案分析

4.1 为什么原来的「原生中转方案」一定可行?

原有架构实际上是:

iframe
  ↓
JSBridgeService.recharge()
  ↓
WKWebView
  ↓
iOS 原生(协议翻译)
  ↓
注入 JS / dispatchEvent
  ↓
Web 项目监听

iOS 原生在其中承担了一个关键角色

协议翻译器(Native → Web Event)

示例:

window.dispatchEvent(
  new CustomEvent('tpp:recharge', { detail: payload })
)

4.2 纯 Web 场景下有哪些可行方案?

✅ 方案一(推荐 & 唯一标准):三方 iframe 支持 postMessage

三方页面:

window.parent.postMessage({
  type: 'recharge',
  payload: {}
}, '*')

主页面:

window.addEventListener('message', (e) => {
  if (e.data?.type === 'recharge') {
    // 业务处理
  }
})

这是唯一的纯 Web 正解。


❌ 方案二:跨域 iframe 注入 / Hook(不可行)
  • iframe 跨域
  • 浏览器同源策略限制
  • CSP 限制

👉 无法实现


⚠️ 方案三:三方通过 URL / hash / storage 通知

例如:

  • 修改 location.hash
  • 写入 localStorage

Web 监听:

window.addEventListener('hashchange', ...)

该方案依赖三方实现,稳定性与可维护性较差。


五、最终结论(工程视角)

  • recharge / newTppClose 不是 JS 事件
  • 它们是 WKWebView Native Message Handler
  • JS 世界 无法监听、劫持或转发
  • 不经过原生或三方改造,纯 Web 无解

如果三方页面只支持 JSBridge 调用: 👉 必须保留一个桥接层(原生或 SDK)


六、相关知识点总结

  • WKWebView messageHandlers 工作机制
  • JS Runtime 与 Native Runtime 的边界
  • iframe 跨域通信模型
  • window.postMessage 原理
  • Hybrid 架构中「协议翻译层」的重要性

这类问题本质不是技术实现问题,而是平台能力边界问题。理解边界,比写代码更重要。

热门中概股美股盘前普跌,网易跌超2%

2026年2月25日 20:57
36氪获悉,热门中概股美股盘前普跌,截至发稿,网易跌超2%,腾讯音乐、小鹏汽车、理想汽车、蔚来、爱奇艺跌超1%,哔哩哔哩跌0.94%,百度跌0.66%,京东跌0.44%,阿里巴巴跌0.33%,拼多多涨0.39%。

港股IPO市场爆火,业内人士:港股IPO融资规模爆发式增长

2026年2月25日 20:55
2026年开年以来,港股IPO市场呈现火热态势。数据显示,目前已有超20家企业完成港股IPO,募资总额为去年同期80多亿港元的10倍。数据显示,截至2月25日,今年已有24家企业完成港股IPO,同比增长166.67%,融资额合计892.26亿港元,同比增长1013.59%。信达证券副总经理程远认为,融资规模爆发式的增长,本质上是国际资本在用实际行动为中国的高端制造、新兴产业投下了信任票。从这些企业的结构来看,大多是新兴产业、高端制造业,这也印证了我国产业结构转型升级取得了突出的成效。(央视财经)

惠而浦:公司股票将于2月26日复牌

2026年2月25日 20:48
36氪获悉,惠而浦公告,公司全资子公司拟认购纽约证券交易所上市公司惠而浦集团发行的普通股,交易涉及境外投资,需履行境外投资备案手续,并可能涉及中国境内外其他有关部门的批准和/或备案等程序。公司股票于2月26日开市起复牌。

格力电器:第一大股东珠海明骏拟减持不超2%公司股份

2026年2月25日 20:44
36氪获悉,格力电器公告,第一大股东珠海明骏投资合伙企业(有限合伙)拟自公告披露之日起15个交易日后的3个月内,以大宗交易方式减持公司股份不超过11170.28万股,占公司剔除回购专用账户股份后的总股本的2%;减持原因为偿还银行贷款;股份来源为2020年1月23日通过协议转让自格力集团受让的股份。

美国下令外交官游说反对数据监管倡议

2026年2月25日 20:40
一份内部外交电报报道,特朗普政府已要求美国的外交官游说反对外国政府推动相关举措,这些举措旨在监管美国科技公司对外国人数据的处理。报道称,美国政府认为,外国的上述监管可能干扰与人工智能相关的服务。美国国务院未回应置评请求。(新浪财经)

使用AI从零打造炫酷医疗数据可视化大屏,源码免费拿!

作者 柳杉
2026年2月25日 20:37

在智慧医疗时代,数据可视化大屏已成为医院指挥中心、急诊监控室的核心工具。今天分享一套完整的医疗数据可视化大屏解决方案,带你深入了解从架构设计到动效实现的全流程。


🎯 项目概览

这是一个面向医疗场景的数据可视化大屏,涵盖患者就诊统计、科室床位管理、医生接诊分析、设备使用监控、全国患者流向等核心业务模块。

截屏2026-02-25 20.24.55.png

技术栈:

  • React 19.2.3 + TypeScript 5.9.3
  • Vite 7.2.4 极速构建
  • Tailwind CSS 4.1.17 原子化样式
  • ECharts 中国地图可视化
  • Recharts React 原生图表库
  • date-fns 日期处理
  • lucide-react 图标库

📊 功能模块详解

🔷 头部区域(Header)

typescript
const [time, setTime] = useState(new Date());

useEffect(() => {
  const timer = setInterval(() => setTime(new Date()), 1000);
  return () => clearInterval(timer);
}, []);
  • 实时时钟:秒级刷新,date-fns 格式化,支持中文星期显示
  • 渐变标题bg-clip-text + drop-shadow 实现发光效果
  • 滚动公告:CSS marquee 动画,无限循环

🔷 左侧面板(LeftPanel)

1. 疾病关键词搜索

typescript
const activeKeywordIndex = useHighlightCarousel(diseaseKeywords.length, 2500);
  • 6 个关键词按钮,自动轮播高亮
  • 高亮时放大 + 橙色边框 + 发光阴影

2. 患者年龄分布(柱状图)

typescript
const animatedAgeData = useChartDataRefresh(ageData, 4000, 0.12);
  • Recharts BarChart,4 个年龄段分组对比
  • 数据每 4 秒自动波动,模拟实时更新

3. 每周人流量分布(面积图)

typescript
<linearGradient id="colorFlow" x1="0" y1="0" x2="0" y2="1">
  <stop offset="5%" stopColor="#4fc3f7" stopOpacity={0.3}/>
  <stop offset="95%" stopColor="#4fc3f7" stopOpacity={0}/>
</linearGradient>
  • Recharts AreaChart,渐变填充
  • 双曲线对比展示两种类型数据

4. 就诊人数统计(翻牌器)

typescript
function useCountUp(targetValue: number, duration = 2000) {
  // easeOutQuart 缓动函数
  const easeProgress = 1 - Math.pow(1 - progress, 4);
  // ...
}
  • 自定义 FlipClock 组件
  • 数字从 0 递增到目标值,缓动动画更自然
  • 上月/本月分组展示婴幼儿、青少年、中壮年、老年人数据

🔷 中间面板(CenterPanel)

1. 全国患者流向图

typescript
useEffect(() => {
  fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
    .then(response => response.json())
    .then(geoJson => {
      echarts.registerMap('china', geoJson);
      setMapLoaded(true);
    });
}, []);

核心配置:

typescript
series: [
  // 飞线动画
  { type: 'lines', effect: { show: true, trailLength: 0.7, color: '#ffb74d' } },
  // 涟漪散点
  { type: 'effectScatter', rippleEffect: { brushType: 'stroke' } }
]
  • 动态加载阿里云 GeoJSON 地图数据
  • 飞线展示北京、上海、广州、深圳、成都、西安患者流向
  • 涟漪散点标注城市,支持缩放拖拽

2. 学历占比(SVG 圆环)

typescript
<circle
  cx="60" cy="60" r="54"
  stroke="#4fc3f7"
  strokeDasharray="339"
  strokeDashoffset={339 - (339 * educationStats.bachelor / 100)}
/>
  • 纯 SVG 实现进度圆环
  • strokeDashoffset 控制进度

3. 设备使用情况统计

typescript
const activeEquipmentIndex = useHighlightCarousel(equipmentStats.length, 1500);
  • 7 个设备卡片,轮播高亮
  • 显示设备数量、涨跌百分比、趋势迷你折线图
  • 提示语:"设备一、设备四应考虑进货"

🔷 右侧面板(RightPanel)

1. 患者就诊登记(表格轮播)

typescript
const { visibleItems: visibleRecords } = useListCarousel(patientRecords, 4, 2500);
  • 10 条记录,每次显示 4 条
  • 每 2.5 秒自动滚动,循环展示
  • 状态高亮:已治愈(绿色)/ 治疗中(橙色)

2. 科室床位使用情况(面积图)

  • Recharts AreaChart,5 个科室对比
  • 双色渐变填充

3. 医生接诊情况分析(组合图)

typescript
<ComposedChart data={animatedDoctorData}>
  <Bar dataKey="接诊数" barSize={4} fill="#29b6f6" />
  <Line dataKey="目标" stroke="#ff9800" strokeDasharray="5 5" />
</ComposedChart>
  • 柱状图展示实际接诊数
  • 虚线折线展示目标值
  • 直观对比 5 位医生的 KPI 完成情况

4. 每日医疗使用情况

typescript
const statCards = [
  { icon: Activity, label: '急诊人数', value: dailyStats.emergency },
  { icon: Users, label: '门诊人数', value: dailyStats.outpatient },
  { icon: PlusCircle, label: '住院人数', value: dailyStats.inpatient },
  { icon: ArrowUpRight, label: '出院人数', value: dailyStats.discharged },
];
  • 预约总人数翻牌器
  • 4 个统计卡片,轮播高亮
  • lucide-react 图标 + 数字递增动画

🎨 UI 设计亮点

1. 科技感卡片组件

typescript
<div className="relative bg-[#06142a]/60 border border-[#135c9d]/60 
  backdrop-blur-sm shadow-[inset_0_0_30px_rgba(19,92,157,0.2)]">
  {/* 四角装饰 */}
  <div className="absolute -top-px -left-px w-3 h-3 
    border-t-2 border-l-2 border-[#4fc3f7]" />
  {/* 顶部发光线 */}
  <div className="absolute top-0 left-10 right-10 h-px 
    bg-gradient-to-r from-transparent via-[#4fc3f7]/50 to-transparent" />
</div>

2. autofit.js 大屏适配

typescript
autofit.init({
  el: 'body',
  dw: 1920,  // 设计稿宽度
  dh: 1080,  // 设计稿高度
  resize: true
});
  • 一行代码适配任意分辨率
  • 自动监听窗口变化

3. 配色方案

元素 颜色值 用途
主背景 #020b18 深蓝科技感
边框 #135c9d 卡片边框
高亮 #4fc3f7 装饰、图表
强调 #ffb74d 高亮、警告
文字 #e0f7fa 主文字

🔧 自定义 Hooks 封装

Hook 功能 参数
useApiData<T> 泛型数据获取 fetcher, initialValue
useCountUp 数字递增动画 targetValue, duration
useListCarousel 列表轮播 items, visibleCount, interval
useHighlightCarousel 高亮轮播 itemCount, interval
useChartDataRefresh 图表数据波动 initialData, interval, range

📁 项目结构

src/
├── api/
│   ├── index.ts          # API 层(模拟延迟、响应包装)
│   └── mock/data.ts      # Mock 数据
├── components/
│   ├── Card.tsx          # 科技感卡片
│   ├── Header.tsx        # 头部(时钟 + 公告)
│   ├── LeftPanel.tsx     # 左侧(关键词 + 图表 + 翻牌器)
│   ├── CenterPanel.tsx   # 中间(地图 + 设备)
│   └── RightPanel.tsx    # 右侧(表格 + 图表 + 统计)
├── hooks/
│   ├── useData.ts        # 数据获取 Hooks
│   └── useCarousel.ts    # 动画效果 Hooks
└── utils/cn.ts           # 样式工具

🏥 适用场景

  • 医院运营指挥中心
  • 急诊科实时监控大屏
  • 卫健委数据展示平台
  • 智慧医疗解决方案演示

🌟 总结

这套方案的核心价值:

  1. 业务完整:覆盖医疗场景核心指标
  2. 动效丰富:翻牌器、轮播、飞线、涟漪
  3. 架构清晰:Hooks 封装,组件化设计
  4. 适配灵活:autofit.js 一键适配
  5. 开箱即用:Mock 数据层,快速切换生产环境

欢迎 Star ⭐,一起探索智慧医疗可视化的无限可能!


我放在公众号(柳杉前端) 回复 医疗数据可视化大屏 获取源码

#前端开发 #数据可视化 #React #智慧城市 #大屏设计

宝马正与欧盟谈判,为中国产MINI车型寻求关税豁免

2026年2月25日 20:32
据德国商业日报《商报》周二报道,BMW宝马正与欧盟委员会就最低限价机制展开谈判,该机制或将替代欧盟对这家德国车企中国产电动 MINI 车型征收的关税。此前,欧盟与大众集团已于2月初达成协议。经过数月谈判,大众旗下西雅特 / CUPRA品牌的纯电动SUV轿跑Tavascan已获得关税豁免。(新浪财经)

乔布斯「反对」的触屏 MacBook,为什么必然会来?

作者 苏伟鸿
2026年2月25日 20:29

2026 年,可以说是 Mac 的一个大年。

彭博社报道,除了有望下周亮相的 M5 Pro、M5 Max Mac 新品,以及全新入门款 MacBook,苹果已经将全新 M6 MacBook Pro 提上日程,预计将于今年年底发布。

虽然先进的 2nm 制程工艺值得期待,但 M6 MacBook 更大的亮点,在于焕然一新这个模具——更轻薄,OLED 屏幕,灵动岛,以及「违背祖训」的触控屏。

时隔五年,MacBook Pro 大升级

根据彭博社爆料,苹果两款新 MacBook Pro 的代号为 K114、K116,预计覆盖 14 英寸和 16 英寸的型号。

比起全线推广,更大的可能性是和 M1 Pro/Max 时期类似,M6 Pro、M6 Max 这些高端型号的 MacBook Pro 率先换用新模具,M6 基础款继续沿用现有的设计,几年后再逐渐下放。

当前的 MacBook Pro 采用 mini-LED 面板和前置摄像头的「刘海」设计,新款预计将升级为 OLED 面板,并在顶部中央加入围绕摄像头打孔构建的灵动岛结构。与 iPhone 类似,灵动岛不仅承载前置摄像头,也将承担通知、媒体控制、实时信息展示等功能,并支持第三方应用交互。

▲ MacBook 灵动岛效果图

彭博社透露,MacBook Pro 的 OLED 屏幕将对标 iPad Pro,意味着 MacBook Pro 很有可能会同样采用双层 OLED 技术,亮度和能耗表现都会更出色。

而根据分析师郭明錤,MacBook Pro 将采用 on-cell 触控屏幕,而不是全贴合的「in-cell」。

在最新的 macOS 26 系统,已经引入了 Mac 状态栏显示 iPhone 「实时活动」卡片的功能,想必未来也是在为「Mac 上岛」铺路;而「液态玻璃」界面图标留白增加、控制中心滑块变大等调整,均呈现出更友好的触控尺度,也被认为是为触控做铺垫。

甚至「灵动岛」本身,也是一个完全触控交互的功能特性,用鼠标反而还有点不太自然。

不过,苹果并不打算将 MacBook Pro 定位为 iPad 替代品。触控只是新增输入方式之一,而非「触控优先」。

新系统将根据用户操作方式,在触控与传统光标点击之间动态切换界面逻辑。例如,手指点击按钮时,界面会在触点周围弹出更适合触控的菜单;菜单栏项目也会在触控场景下放大,便于手指选择。

常见操作如滚动、缩放图片与 PDF 文件,将获得与 iPhone、iPad 类似的流畅触控体验。但苹果不会强化触控打字能力,MacBook Pro 将保持全键盘设计和大触控板体验。

那么问题来了,一台能触控 MacBook,能带来什么样的价值?

触屏 MacBook 是必然会到来的产品

触屏 MacBook 的设计向来饱受争议,其中最旗帜鲜明的反对者,就是苹果公司的创始人——史蒂夫·乔布斯。

当年,乔布斯曾直接否定了「触控 MacBook」的可能性,他认为触控技术不太适合用在笔记本屏幕这种垂直放置的触控界面,用户需要一直举起手臂使用,很快就会疲劳。

还有另一个问题,我相信大部分 Mac 用户都不喜欢别人用手指戳自己的电脑屏幕。MacBook 屏幕的「娇气」几乎可以和它的高素质齐名。如果直接频繁触碰屏幕,很容易对表面涂层造成损伤。

而 MacBook 那个比鼠标还好用的触控板,不仅基础的拖动点击都指哪打哪,还支持各种实用的手势,某种程度也承担了触控屏的作用。

看起来,苹果似乎真的没必要给 MacBook 装上一个触控屏——只是,时代变了。

在万元级别的高端笔记本品类,一个触控屏几乎已经是标配,作为这个定位的明星产品,越来越多用户和消费者也在呼吁 MacBook Pro 增加触控屏配置。

▲ Surface Laptop

距离 Apple Silicon 以及 MacBook Pro 已经过去五年,这个产品线也到了一个需要大幅更新刺激销量的节点。特别是这几年 Mac 的销量势头都比以往更亮眼,一些全新的产品设计和功能特性,不仅能吸引更多新用户,也能转化老用户。

比起其他可能会引发用户厌恶的变化,触控屏是一个相对更微妙的新功能:喜欢的人会被吸引购买,不喜欢的人也完全可以无视,继续使用键盘和触控板。

乔布斯之所以否决一台触控 Mac,其实是因为他想得会更深远一点:如果要为 Mac 增加触控屏,那必须要围绕全新的「触控」交互,大改整个 Mac 的界面,进一步发挥触屏的价值,要不然就不加。

但其实,用户没必要长时间悬空手臂使用 Mac,只是在一些特定的场景,使用手指直接点击、拖动,真的会比触控板更方便直观,也更符合现代人的习惯。

有没有发现,这其实还是当年「Touch Bar」推崇的理念。

只不过,「搓擦条」的最终成品相当别扭,还要单独适配,导致开发者兴趣寥寥,用户能实际得益于触控的场景也非常有限。但如今,整块屏幕都可以触控,用户想怎么用就怎么用,反而从根本上解决了交互设计的问题——毕竟,谁不会用 iPhone 和 iPad 呢?

对于移动应用的开发者来说,支持触控屏的 MacBook 在调试方面也大有裨益。这意味着,日后开发移动应用时,可以直接上手在笔记本上进行测试,而不需要另外推送到手机上。

如果把时间线拉长来看,触屏电脑的意义或许并不在当下,而在未来。

可以这么说,2010 年前后出生的新一代,他们第一台能接触到的计算设备,大概率会是平板电脑和智能手机,用手指直接点击屏幕,就是他们最自然也最熟悉的交互方式。

等到他们需要使用键盘鼠标来提升效率,这些围绕他们打造的工具,自然也需要贴合他们的习惯做出改变。

在我们评测华为「二合一」产品 MatePad Edge 时,编辑部那些伴随着平板长大的年轻同事,虽然 80% 的工作时间都在用键鼠,但也会自然地经常伸手点击屏幕,甚至换回 MacBook 后还有点不太习惯。

比起对人体工学的担忧,现在摆在苹果面前的是另一个问题——如果继续拒绝触控,体验反而会割裂。

因为移动互联网的原生一代,根本不会在意当年的争论,他们只会质疑:为什么自己面前这块巨大的屏幕,不能用手触摸?

从整个行业来看,平板和笔记本电脑都在进行着「趋同进化」——本来是不一样的物种,最终朝同一个方向改变,平板电脑可以外接键盘鼠标,电脑屏幕也可以多点触控。

这样的趋势会领向什么样的终极形态,目前行业还在探索之中,苹果当然不希望自己掉队。

不管是底层硬件还是软件 UI,iPad 和 Mac 都变得越来越趋同,连应用都开始互相兼容。最大的区别除了系统,似乎就只剩下一块触控屏,而这也迟早会被打破。

Mac 从来都不需要成为 iPad,macOS 也不需要和 iPadOS 融合,生态打通,一切大同。

▲ Mac 和 iPad 上的 Final Cut Pro

对于苹果来说,需要思考的不是 Mac 的触控屏能做什么,而是加入触控之后,这块屏幕,能不能经得住用户「指指点点」的考验。

#欢迎关注爱范儿官方微信公众号:爱范儿(微信号:ifanr),更多精彩内容第一时间为您奉上。

爱范儿 | 原文链接 · 查看评论 · 新浪微博


让 Anthropic 破防的「蒸馏」风波,美国 AI 大牛泼冷水:中国 AI 成功不靠走捷径

作者 杜晨
2026年2月25日 20:27

Anthropic 昨天点名 DeepSeek、月之暗面、MiniMax 三家中国 AI 实验室「蒸馏」Claude 模型,全网炸锅。

对于此事件,RLHF (基于人类反馈的强化学习)领域最知名的研究者之一,《RLHF》一书的作者 Nathan Lambert 指出,这件事没有人们想象的那么严重,但也没有那么简单。

他认为,中国 AI 公司的基础设施非常好,取得了很多创新,也在攻克各种技术难题,但它们取得这样的结果,靠的并不是「走捷径」。

在讨论蒸馏这件事之前,先看看 Lambert 的话为什么值得听。

Nathan Lambert 是 Allen AI 研究所的科学家,博士毕业于加州大学伯克利分校,师从机器人领域的著名学者 Pieter Abbeel。他并非 RLHF 技术的发明者,但他写的《RLHF》这本开源书籍,如今是 AI 从业者理解大模型训练流程的标准参考材料之一。

和到处都是的 AI 网红不一样,他是真正上手训练过大模型的人。

在 Anthropic 博客发出的当天,Lambert 就发布了一篇详细分析文章《蒸馏对于中国大模型到底有多重要?》。他的核心论点,和主流媒体的解读方向截然不同,也比一般网友更加深入和全面。

蒸馏是什么,Anthropic 又说了什么?

首先我们来看 Anthropic 指控的核心:「蒸馏」(distillation)。

它指的是让弱模型学习强模型的输出,从而快速获得相似能力。

Anthropic 指控三家公司通过约 2.4 万个虚假账号,在违反服务条款和地区访问限制的情况下,用 Claude 生成了超过 1600 万次对话,用于训练各自的模型。

博客还附上了安全警告:非法蒸馏出来的模型可能缺失原模型的安全护栏,一旦被用于网络攻击、生物武器研发或大规模监控,后果难以预测。

Anthropic 把这套基础设施叫做「九头蛇集群」(hydra cluster)——多达数万个账号的分布式网络,流量同时分散在 Anthropic 自己的 API 和多个第三方 API 聚合平台上。

在最极端的案例里,一个代理网络同时管理超过 2 万个虚假账号,还把蒸馏流量混入普通用户请求流里,用来规避检测算法。这种网络没有单点故障,封掉一个账号,马上换一个。

海外媒体随即跟进,复述了 Anthropic 的话术。然而这套叙事逻辑很快就翻车了:毕竟「蒸馏」这件事美国 AI 公司训练的时候也会做,更何况 Anthropic 自己也有类似行为:

以及:Anthropic「蒸馏」了人类最大的知识库

但 Lambert 更加冷静,他认为要先把这三家中国 AI 实验室分开来看

Lambert 指出,Anthropic 把三家公司并排列在同一篇博客里,掩盖了一个关键差异:它们做的根本不是同一件事,量级天差地别,动机也各有侧重。

按照 Anthropic 的指控,DeepSeek 的蒸馏数量最少,只有 15 万次,但手法更精准。与其直接收集答案,Anthropic 指控 DeepSeek 在做的是批量生产思维链 (chain-of-thought)训练数据。

要的不是「你得出了什么结论」,而是得到结论的过程。

但 15 万次是个什么体量?Lambert 认为,这点数据对 DeepSeek 传闻中的 V4 模型或任何模型整体训练的影响可以忽略不计,「更像是某个小团队在内部做实验,大概率连训练负责人都不知道。」

月暗的规模就不是「可以忽略」了:340 万次交互,目标集中在智能体推理、、工具调用、代码与数据分析、computer-use 开发、计算机视觉等方向——这些方向当中,大部分都是 Claude 近期最受企业客户欢迎的能力组合。

Anthropic 指出三家里流量最大的是 MiniMax,约 1300 万次,目标是代理编码、工具调用和复杂任务编排。

月暗和 MiniMax 相加约 1650 万次,按对话平均 token 量估算,总量大约在 1500 亿到 4000 亿 token 之间,折合数百到上千万美元的 token 成本。

但问题是,只盯着蒸馏看,其实有很大问题。

蒸馏的天花板在哪里?

这才是 Lambert 真正想说的部分,也是整件事里最被忽视的地方。

把强模型的输出喂给弱模型,弱模型能快速获得类似能力——这个逻辑本身成立,Lambert 没有否认。但他指出了一个没人说清楚的问题:蒸馏的天花板到底在哪里,取决于你想要的是什么类型的能力。

作为 RLHF 方面的专家,Lambert 认为,当前最顶尖的模型训练,已经高度依赖强化学习(RL)。而 RL 和蒸馏在本质上是两种不同的事情:

蒸馏是模仿,学强模型的输出,把它的「答案形状」复制过来;RL 是探索,模型必须大量自己推理、自己生成、在错误里反复迭代,从试错中提炼能力。

换言之,真正强大的模型,需要的从来不只是正确答案,而往往要靠模型自己摸索出来的解题路径,这是依靠蒸馏别人 API 的输出,得不到的东西。

以 DeepSeek 自己做的蒸馏尝试为例:基于隔壁千问蒸馏自家的 R1 模型后得到的 DeepSeek-R1-Distill-Qwen 1.5B 这个小模型,仅靠 7000 条样本和极低的计算成本,就在 AIME24 数学竞赛基准上超越了 OpenAI 的 o1-preview。

但关键在于:这个提升等多仰仗强化学习的结果,而非来自蒸馏这个行为本身。

换句话说,蒸馏能帮你更快「热身」,要真正到达顶级水平,还是得靠自己跑 RL。

不同模型之间的数据分布差异

Lambert 还指出了一个技术层面很少被外界提及的问题:不同模型之间存在微妙的数据分布差异。

把 Claude 的输出直接喂给另一个架构的模型,不一定有效,有时甚至会产生干扰。两个模型内部表征空间的差异,会让「老师」的回答在「学生」那里引发意想不到的偏差。

这意味着蒸馏从来不是「拿来用就行」的事,而是需要大量工程工作才能真正发挥效果。这本身就是一个研究课题。

这也是为什么 Lambert 将 Anthropic 所指控的「蒸馏」行为,看作是一种创新的做法,可以理解为试图攻克这一研究课题的努力。

Anthropic 的杀手锏,恰恰最难蒸馏

Anthropic 点名的三家公司,抓取的重心都落在代理行为 (agentic behavior) 这同一个方向上,包括 AI 自主规划、工具调用、分解复杂任务并逐步执行的能力等。

这是 Claude 目前最突出的方向,也是 Anthropic 最不想被复制的能力。

但 Lambert 的判断是,这些能力恰恰也是最难通过蒸馏获得的。

正如前面提到,一个强大的 AI agent,强大之处从来不在于知道或者训练过正确答案,而是「在面对没见过的情况时能自主探索出解决路径」,可以理解为一种 0-shot 或 few-shot 实现 SOTA 效果的能力。

这个过程中产生的价值,体现在推理轨迹,而推理轨迹是很难通过蒸馏习得的——至少现在是这样。

DeepSeek-R1-Distill(蒸馏模型)和 DeepSeek-R1(蒸馏对象)之间的差距,是 Lambert 论点最直接的例证。

在格式化的数学推理任务上,前者表现不错;但在需要自主探索、动态规划的复杂代理任务上,两者的差距是真实存在的。

为什么 Anthropic 现在公开说?

Lambert 有一个判断,很多人可能都有同感:这次 Anthropic 公开点名中国 AI 公司,「技术防御」压根不是首要动机。

在 Anthropic 这篇博客发出的几天前,美国国防部刚刚威胁 Anthropic 配合提供「不受限制的使用权限」,否则就将做出对后者不利的安排,比如将其标记为「供应链危险」,也即无法进入国防/政府供应商名单。

Anthropic 现在处于一个「既要又要」的两难境地:既想维持安全、不反人性的模型定位和公司形象,又不愿意错过美国政府的大单。

Lambert 指出了一个根本矛盾:美国的学术界和开源模型开发者也在做蒸馏行为,但包括 Anthropic 在内的大厂并没有对它们做出实质性的打击。如果仅因为对方是中国公司,未免地缘的意味太重了。

结果就是,Anthropic 这篇博客与其说是报告一个重大技术风险事件……其实更像是一封「投名状」。

双标

关于 Anthropic 在这件事上的立场,有一个绕不开的背景。

APPSO 在昨天的文章里也有提到:Anthropic「蒸馏」了人类最大的知识库

2024 年年初,美国某仓库里,工人们把一本本新书送进机器,切掉书脊,扫描,然后把纸送去回收。下令做这件事的是 Anthropic,项目内部代号「巴拿马」,目标是以破坏性方式扫描全球所有书籍——Anthropic不希望外界知道他们做了这件事。

2021 年,Anthropic 联合创始人 Ben Mann 在 11 天里从盗版网站 LibGen 下载了大量侵权书籍;次年,另一个公开宣称「在大多数国家故意违反版权法」的网站 Pirate Library Mirror 上线,Mann 把链接发给同事,留言:「来得正是时候!!!」

在后来的书籍版权诉讼中,Anthropic 被迫支付 15 亿美元和解金,折算下来每本书约赔 3000 美元。

斯坦福和耶鲁的研究者发现,Claude 3.7 Sonnet 在特定条件下会以 95.8% 的准确率「近乎逐字逐句」地输出《哈利波特》等受版权保护的作品——这不仅与 Anthropic 长期以来关于「模型只是学习了语言规律」的说法背道而驰,更让该公司对任何人的「蒸馏」指控显得缺乏底气。

Futurism 的标题写得很直接:「Anthropic 对 DeepSeek 未经授权复制 AI 大发雷霆——考虑到它是怎么构建 Claude 的,这相当讽刺。」

Musk 在 X 上也补了一刀:「Anthropic 大规模窃取训练数据,还为此支付了数十亿美元的和解金。这是事实。」

反驳者还有一个更尖锐的逻辑:Anthropic 当年从那些书里拿走的,不仅没付过任何使用费,回头还用于商业行为(Claude 和 Anthropic API 都是付费服务);而从商业角度来看,蒸馏 Claude 的公司至少付了钱……

当然,从法律层面来看,这两件事的性质完全不同。但不论怎样,Anthropic 看起来还是很像个伪善的双标者。

「后蒸馏时代」

最后再强调一遍:蒸馏有用,但没有你们想象的那么有用。

DeepSeek 的 15 万次,按任何合理标准来看都是可以忽略的数字。Moonshot 和 MiniMax 合计 1650 万次,量级是另一回事——但能转化成多少真实能力,取决于他们能不能解决「如何用好这些数据」的技术问题。

考虑到数据分布差异、模型架构差异,以及代理能力的获得本身对于强化学习的重度依赖,蒸馏从来不是「拿来就用」那么简单。

Lambert 还是给了 Anthropic 面子:「快速迭代加上高质量数据可以走很远,让学生模型超越老师也并非不可能。」

但他也明确指出,真正的创新靠的是强化学习,不是蒸馏。从 DeepSeek、月暗、MiniMax 公开的论文来看,它们都用有相当完善的基础设施和优秀的人才,远非只靠小聪明小伎俩企图弯道超车的「小作坊」。

蒸馏能帮你更快入场,但真要打到顶级水平,从来没有捷径。

某种意义上,Anthropic 提出的「蒸馏」争议,本身就是这个 AI 时代缩影。

整个行业打一开始就建立在暧昧不清的规则上:用人类写的东西训练,用别人的开源成果迭代,在法律没有明确禁止的地方快速行动。

现在,规则开始慢慢收紧——先是版权,再是芯片,现在又是 API……谁在制定规则?谁受益于规则?谁一边打着人类的旗号,却滥用规则谋求私利?

这些问题的答案,都越来越清晰。

#欢迎关注爱范儿官方微信公众号:爱范儿(微信号:ifanr),更多精彩内容第一时间为您奉上。

爱范儿 | 原文链接 · 查看评论 · 新浪微博


中金辐照:股东拟合计减持不超过1%公司股份

2026年2月25日 20:24
36氪获悉,中金辐照公告,持股2.02%的股东共青城鑫卫投资管理合伙企业(有限合伙)计划以集中竞价方式减持公司股份不超过146.5万股(占本公司总股本比例0.55%);持股1.62%的股东共青城鑫刚投资管理合伙企业(有限合伙)计划以集中竞价方式减持公司股份不超过117.5万股(占本公司总股本比例0.45%)。
❌
❌