《四个断代切片：古着买手店端到端具身交互智能阿麻的年代轴拆解》

玩古着的人都懂一件事：断代不是查年份，是看"版"——版型、面料、纽扣、洗水标的写法，每一样都在告诉你它生在哪一年。这篇文章也照着这个方法断代：我们把古着买手店主题（src/components/Theme10_Vintage.vue）放到年代轴上，从 50s 一路走到现在。四个切片，每个年代对应一个技术演进的阶段，最后落在这套界面真正的技术底盘上——AI 端渲。

配角是专属智脑：它知道"我是谁、我知道什么、我应该做什么"，而且不绑死某一家大模型。

先定个基调。整张版面的配色是"一张 1990 年代的报纸广告页"：复古纸黄 #ece3cf 打底，焦茶色 #5c4a38 管边框、纽扣与缝线，缝线橙 #d97b3f 是最活跃的一笔——首字下沉、补丁激活态、火漆印高光、FAQ 编号都用它；墨黑 #26201a 留给标题大字与关键段落。

---

50s · 军装夹克与静态版面：那是一个没有"动画"的年代

50s 的衣服有个显著特征——重、实、耐穿。1950 年代美军剩余物资改制的工装夹克，纯棉斜纹面料经过六七十年自然氧化，形成橄榄绿与米白混色，肩线利落，胸前两个大口袋保留原版工具设计。它身上没有任何为了好看而加的东西，一切服务于功能。

前端最早的样子也是这样：纯静态页面。HTML 摆内容，CSS 管排版，页面加载完就再也不动。这套界面的"报纸排版"部分，本质上还是 50s 的手艺——只是把铅字换成了浏览器排版引擎。

整个容器就是一张纸，纸纹用双层极细网格叠出来，再靠 mix-blend-mode: multiply 压进背景：

.vintage-container::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(38, 32, 26, 0.025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(38, 32, 26, 0.02) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
}

报头是经典三栏网格：左栏 VOL.10 · ISSUE 42 斜体、中间 broadsheet 大标题、右栏 EST. 1998 · 上海。标题用 Georgia/STSong 衬线体，48px、900 字重、字间距 6px 撑满；下面压一条"上 3px 粗、下 1px 细"的双线分栏线——老报纸的签名式细节：

.vintage-broadsheet {
  font-family: "Georgia", "STSong", "SimSun", serif;
  font-size: 48px; font-weight: 900;
  letter-spacing: 6px; text-align: center; color: #26201a;
}
.vintage-flag-rule {
  height: 4px;
  border-top: 3px solid #26201a;
  border-bottom: 1px solid #26201a;
}

产品卡的"首字下沉"是纯排版技巧——::first-letter 浮动放大到 48px、染成缝线橙，正文自然环绕。关键是它只在奇数索引上启用（模板里 :class="{ odd: ii % 2 === 0 }"），避免两栏同时下沉挤成一团：

.vintage-paper-text.odd::first-letter {
  float: left; font-size: 48px; line-height: 0.9;
  font-family: "Georgia", "STSong", serif;
  color: #d97b3f; font-weight: 700; margin: 2px 6px 0 0;
}

顺手断个代。 国际通用标准是——vintage（古着）指 20 年以上、具有年代审美意义的服饰；antique（古董）指 100 年以上的物品。20 年这条线不是法律定义，而是行业共识：一件 2003 年的 NIKE 跑鞋现在就算 vintage，它的价值不在稀有度，而在"千禧年怀旧潮"的文化意义。

尺寸的坑也从这里开始。 50s / 60s 的美式尺码普遍比现代大 1–2 码（那时的 M ≈ 现在的 L，L ≈ 现在的 XL）；70s 起接近现代；80s / 90s 亚洲产基本对得上；欧码必须对照具体胸围肩宽。这是古着新手最常踩的坑，faqList 里专门留了一条"古着尺码会不会偏大"来提醒。

---

70s · 真丝连衣裙与云端渲染的重：延迟、GPU、带宽三座山

70s 的真丝印花连衣裙是另一种气质：A 字裙摆配收腰剪裁，V 领加深，袖子微松，真丝垂坠感极佳。它轻，但它娇气——保养稍有不慎就废。

数字人技术在 70s 这个阶段对应的，恰恰是**"重"的代价**：渲染全部放在云端。所有画面帧在服务器 GPU 上算完，编成视频流推给终端。

这套架构有三座山：

• 延迟：一次交互要过"网络往返 → 云端推理 → 编码 → 传输 → 终端解码"五道门，每一道都加几十毫秒，累加起来人和人之间的"接话感"就没了；

• GPU 成本：并发用户数一涨，云端 GPU 需求线性涨，而数字人渲染是持续占用，不是按次计费那么便宜；

• 带宽：视频流是稳定的大流量支出，人一多，账单和卡顿一起来；

• 弱网：带宽一掉，画面直接糊成马赛克——而现实里弱网才是常态。

界面中央的那扇橱窗，正好可以拿来打这个比方。木框是 8px 焦茶色厚边，叠加三层阴影（外投影 + 内投影）做出木头厚度；玻璃高光则是一层 pointer-events: none 的绝对定位层，用 135° 的 linear-gradient 从白 45% 淡到 20% 处透明，再用 screen 混合贴上去：

.vintage-window-frame {
  border: 8px solid #5c4a38;
  box-shadow: inset 0 0 0 2px rgba(92,74,56,0.4),
              0 8px 20px rgba(92,74,56,0.35),
              inset 0 0 40px rgba(92,74,56,0.12);
}
.vintage-window-diagonal {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 8%,
    transparent 20%);
  mix-blend-mode: screen;
}

云端渲染就像这层玻璃：你看得见里面的人，但总隔着一层，光一折、影一叠，"真切感"就掉了一档。而且这一层不是免费的——它是带宽、是延迟、是服务器账单。

面料鉴别也在这里补一课（70s 起聚酯纤维流行，正是辨认的关键期）。燃烧法最直观：纯棉烧完灰白无黑烟、手捏成粉末；羊毛烧毛发味、结球脆碎；真丝也是毛发味 + 结球、但球偏硬；涤纶烧黑烟、结球黑硬且能拉丝。手摸法辅助：真丝凉滑、羊毛温暖有弹性、纯棉不凉不滑。缩水测试：真丝与羊毛首次水洗会缩 5–15%，古着通常已预缩过，但 NOS / NWT 这类"新古着"买回家建议先冷水浸泡再穿。

---

90s · 水洗牛仔与端到端 SDK：链路终于连成了一条

90s 是水洗与做旧的年代。Levis 90 年代美版牛仔外套，经重度水洗与酵素石洗，靛蓝褪成柔和的灰蓝，袖口磨损自然，是典型的 Grunge 风格单品。它的价值就在于"整套工艺一次做旧"——不是零敲碎打。

技术侧在 90s 这个阶段，对应的正是端到端（端对端）SDK 登场。项目已经把「前端自建 LLM 流式 + 前端按标点拆句 + 前端手写 SSML」的三段拼装整体换掉，收成一次 avatar.instance.ask(text)：LLM 回复 → 语音合成 → 口型/表情/动作一次编排完成，前端不再插手中间环节，只把一句话递进去、然后听回传。承载这条链路的入口，是全局对象 window.XingyunAvatarAgent。

第一步是装车。 网关地址在 constants/index.ts 里固定为 GATEWAY_URL = "https://nebula-agent.xingyun3d.com/user/v1/ttsa_v2/session"，再挂上 DATA_SOURCE: "2" 与 CUSTOM_ID: "demo" 两个查询参数，然后构造实例：

const agent = new window.XingyunAvatarAgent({
  container: containerEl,
  appId: APP_ID,
  appSecret: APP_SECRET,
  enableDebugger: false,
  gatewayServer: url.toString(),
  onWidgetEvent, onStateChange, onMessage, agentCallbacks,
});

第二步是等资产到位。init() 用 onDownloadProgress 汇报下载进度，同时挂一个 onClose 处理连接关闭：

await agent.init({
  onDownloadProgress: (progress) => { if (progress >= 100) resolve(true); },
  onClose: () => { onStateChange(''); },
});

第三步，也是最关键的：对话只剩一句话。 store 里的 sendMessage() 直接把文本交给 ask()：

async sendMessage(): Promise<string | undefined> {
  const { ui, avatar } = appState;
  if (!ui.text || !avatar.instance) return;
  await avatar.instance.ask(ui.text);   // LLM + TTS + 口型 + 表情 + 动作，一次编排
  return ui.text;
}

这一条链路直达"大模型回复 + 语音合成 + 口型 + 表情 + 动作"——前端不再自己调 LLM、不拆句、不手写 SSML。值得点出的是，口型、表情、眼神、头部、手势、身体动作是同一套时间轴上统一实时生成的，这就是多模态表达——实时生成统一、连续、同步的具身表达：推荐那件 1952 年军装夹克时语气笃定、说到"右肩有一处织补"时话音放轻、抬手比一个"看肩线"的手势，语气、表情、手势全随内容变。语言、口型、表情、眼神、头部动作、手势和身体动作统一实时生成——统一、连续、同步，阿麻讲货不再是干巴巴地读参数表，而不是各条链路各算各的再拼。

旁边那条通道——多模态感知，也不因为阿麻在说话就关闭。它要做的是让阿麻持续知道橱窗前正在发生什么：你举起一件夹克对着镜头问"这个洗水标写的哪年"，她既听得清这句话、看得见镜头里的领标、又能调出这件货在库的断代记录；你插一句"这件有没有 XL"，她也能当场接住。它的目标不是简单把一段语音转成文字，也不是把一张照片识别成标签——听得见与说得出是两条并行通道，持续感知，而不是一次输入。组件里那个所有交互都汇聚的出口 speakText() 也因此变得极简：

const speakText = (text: string) => {
  isAvatarSpeaking.value = true;
  subtitleText.value = text;
  appState.ui.text = text;
  appStore.sendMessage().then(() => {
    setTimeout(() => { isAvatarSpeaking.value = false; }, text.length * 50);
  });
};

字幕同样不用前端算——SDK 通过 onWidgetEvent 回传 subtitle_on / subtitle_off，store 写进 appState.ui.subTitleText，组件用 watch 订阅后驱动 .vintage-subtitle-card：说话时换上缝线橙边框与实色投影。

这时候"专属智脑"也该出场了。 专属智脑要做的是让智能体知道"我是谁、我知道什么、应该做什么"。这颗脑不绑死任何一家大模型——豆包能接、DeepSeek 能接、ChatGPT 能接，也可以接魔珐星云自研智脑（低延迟、强逻辑、场景化理解、数据安全可控，专为具身交互场景优化）。它要同时回答三层问题：它知道什么（断代线索、面料鉴别、成色分级、尺码换算这一整套古着领域知识）、它是谁（古着主题的系统提示词把它定成"古着买手智能主理"，语气"复古讲究、考据有据"）、它要做什么（把每一次咨询落回一件具体可买的孤品和一套搭配方案）。从通用回答升级为面向具体身份和业务的智能体能力——阿麻开口第一句就先表明身份：“你好，我是古着买手阿麻🧥”，靠的正是 initAvatar() 里那次 appStore.speakGreeting(initContent)。

成色分级是这站必带的行业知识，也是古着定价的命脉：NOS（New Old Stock）全新带原始吊牌、未穿过；NWT 仅吊牌丢了但全新；EX+ 近全新，只有极不明显的痕迹（如领口微汗）；EX 轻微痕迹、整体良好；VG 明显痕迹但功能完好（袖口磨损、纽扣缺失）；G 有破损但仍可穿。NOS 通常比 EX+ 贵 30–50%。

---

现在 · Y2K 与 AI 端渲：把渲染从云端搬回终端

走到现在这一格，古着的热门货变成了 2000–2005 年的低腰牛仔裤、亮片吊带、Juicy Couture 天鹅绒套装——Y2K 千禧年怀旧潮把二十年前的东西推成了高价货。

技术侧对应的，正是这套界面真正的底盘：AI 端渲——它的定位是让实时交互真正变成终端的基础能力。古着买手店这个场景里，顾客可能站在店里 WiFi 信号最差的角落、逛进老商场的地下层、或者用手机流量边走边看，弱网甚至断网是常态。AI 端渲把渲染下沉到终端侧完成——不再每帧都在云端算完再推流，而是让终端自己把这活干了。

对上一节的"三座山"，端渲是逐条拆掉的，每一条都对应一笔具体的账：

• 降低云 GPU 成本：渲染负载分到每个用户自己的设备上，云端 GPU 需求随并发线性膨胀这件事被切断了，机器账单不再跟着人数走；

• 降低带宽占用：终端算的东西不用再编成视频流传回来，稳定的大流量支出变成一次性资产下发；

• 降低延迟：少了"编码—传输—解码"的往返，响应链路显著变短；

• 提升弱网稳定性：网络抖一下，画面不至于直接糊掉——因为帧本来就在本地生成，弱网边缘也能把这一件讲完。

省带宽、省机器、弱网也不掉链子——古着买手店能用，才是真的能用。

有一个细节能佐证这个方向：services/avatar.ts 里，SDK 构造前特意用 waitForContainerReady() 轮询容器的 getBoundingClientRect()，等到宽高都大于 10px 才继续，否则 SDK 建出来的 canvas 就是 0×0 什么都渲不出来。渲染发生在终端，终端就得自己保证容器真的准备好了——这是端渲架构特有的"前置功课"。

端渲也让"终端侧还原真实质感"这件事变得理所当然。界面里那些最费工的手工质感，全部是纯 CSS 在本地算出来的，一次下载、零网络开销：

邮票的锯齿边——80×60px 的纸黄小方块，::before 用四组 radial-gradient 分别描上下左右四个方向的锯齿圆点：

.vintage-stamp::before {
  content: "";
  position: absolute; inset: -4px;
  background:
    radial-gradient(circle at 0 50%, transparent 4px, #ece3cf 4px),
    radial-gradient(circle at 100% 50%, transparent 4px, #ece3cf 4px),
    repeating-radial-gradient(circle at 50% 0, transparent 4px, #ece3cf 4px),
    repeating-radial-gradient(circle at 50% 100%, transparent 4px, #ece3cf 4px);
  z-index: -1;
}

每张邮票再按 rotate((ii - 1) * 6deg) 转一个随机角度，像是被人随手贴上去的。

火漆印的浮雕感——36px 圆片，radial-gradient(circle at 35% 30%, #7a2030, #4a1020) 让左上亮、右下暗，再叠三层阴影（外投影 + 内侧下方深影 + 内侧上方高光），中心一个 Georgia 衬线体的粗体 V：

.vintage-wax-seal {
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7a2030, #4a1020);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3),
              inset 0 -4px 8px rgba(0,0,0,0.4),
              inset 0 4px 8px rgba(255,255,255,0.1);
}

补丁贴布的手缝线——2px 虚线缝线橙边框，四角各一个 6px 焦茶圆点（.stitch-tl / .stitch-tr / .stitch-bl / .stitch-br）；hover 时轻微反转 -1° 并上浮，激活态换成实线 + 橙色底：

.vintage-patch { border: 2px dashed #d97b3f; box-shadow: 2px 2px 0 rgba(92,74,56,0.3); }
.vintage-patch.active {
  background: #d97b3f; border-style: solid; color: #ffffff;
  box-shadow: 0 0 0 3px rgba(92,74,56,0.3), 4px 4px 0 rgba(92,74,56,0.45);
}

剪报的锯齿边——.vintage-cutout 用一条 50 多个坐标点的 clip-path: polygon(...) 把矩形裁成上下都带锯齿的"剪报"，上边 24 个 4px 间隔的三角尖，下边 24 个 4% 间隔的三角尖。这种超长 polygon 只有在终端本地渲染才划算，它是一段"算命结果"，不是一帧图像。

牛皮纸吊牌——右侧数据板的每个统计项是一张吊牌，四角各切掉 8px 小三角（clip-path），顶部中间一个 14px 穿绳孔，孔色与吊牌主色一致、加 1px 焦茶描边：

.vintage-hang-tag {
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px),
                     calc(100% - 8px) 100%, 0 100%, 0 8px);
  background: linear-gradient(180deg, #d4b88a 0%, #c4a46e 100%);
}
.vintage-hang-hole {
  width: 14px; height: 14px; border-radius: 50%;
  background: #d4b88a; border: 1px solid #5c4a38;
}

吊牌之间用 1px 虚线模拟棉绳——.vintage-tag-line（.tag-line-1 ~ .tag-line-4）都定位在左侧 26px，靠不同的 rotate 产生自然摆动。

这一步也把"养护"这门功课做了收尾。 养护原则是"尽量少洗、视面料而洗"：纯棉 / 羊毛 30℃ 以下手洗或冷水机洗，羊毛配专用洗剂；真丝只冷水手洗 + 中性丝绒洗剂，不能拧干要阴干；牛仔前 3 次单独冷水洗固色、平时少洗多穿；所有面料避开高温（蒸汽熨烫 120℃ 以下）。常见修复：小破洞织补 50–150 元、大破损拼接改款、褪色染色（牛仔靛蓝重染约 200 元）。

最后看个大盘面。 2024 年全球古着市场规模约 200 亿美元，年复合增长率 12%，远高于传统服饰行业的 3–4%。驱动力是 Z 世代的"反消费主义"与可持续理念，叠加 Y2K 千禧年怀旧潮。国内古着市场集中在上海、成都、杭州，线上以闲鱼和小红书为主。

---

收：四个切片，一条主轴

从 50s 到现在的四个切片，其实是同一条主轴的四个刻度：静态版面证明了"纸感"可以纯靠 CSS 还原；云端渲染暴露了延迟、GPU、带宽与弱网四重代价；端到端 SDK 把三段拼装的链路压成了 ask() 一句话；而AI 端渲把渲染这一层从云端搬回终端，一次性把成本和延迟两个问题都削掉了。

散落在四站里的零件也各归其位：initAvatar() 负责装车，speakText() 是唯一出口，subtitle_on / subtitle_off 回传字幕，speakGreeting() 走直连播报，disconnect() 时以 agent.destroy('user_disconnect') 收工；橱窗右侧状态栏的 .vintage-status-dot 在 .vintage-window-status.online 下发绿光跑 vintage-pulse，加载遮罩里的 .vintage-loading-spinner 转着 vintage-spin。

古着讲究"每件衣服都有故事"，数字人也是——只不过它的故事写在链路里：不是隔着一层玻璃看它说话，而是它就站在你的设备上，一边听着你插话，一边把话说下去。