主播酱

主题

快速开始 ​

本篇用 5 分钟带你做出第一张皮肤——给「礼物菜单」换一套霓虹粉配色。读完你会理解皮肤的最小骨架，剩下的细节去皮肤机制和各组件 DOM 参考里查。

1. 看一眼目标组件的 DOM ​

礼物菜单（el-gift-menu.vue）渲染出来的结构大致是：

html
<div class="gift-menu" data-skin-id="...">
  <div class="gift-list horizontal">
    <div class="gift-item">
      <img />                <!-- 礼物图标 -->
      <span class="size">x3</span>   <!-- 数量 -->
      <span class="desc">送上一发</span>  <!-- 描述文字 -->
    </div>
    <!-- 更多 gift-item ... -->
  </div>
</div>

要改的就是文字：.desc（描述）和 .size（数量）。完整 DOM 见 礼物菜单皮肤。

2. 写皮肤 CSS ​

皮肤的全部规则都包在 .gift-menu[data-skin-id="<本皮肤 id>"] 之下，子选择器用 CSS 原生嵌套、以 & 开头：

css
.gift-menu[data-skin-id="gift.neon-pink"] {
  & .desc,
  & .size {
    color: #ffc6e6;
    font-weight: bold;
    text-shadow:
      0 0 10px rgba(255, 92, 184, 0.95),
      0 0 20px rgba(255, 92, 184, 0.7),
      0 0 3px #ffffff;
    -webkit-text-stroke: 0 transparent;
  }
  & .size {
    color: #ff6fb1;
    text-shadow: 0 0 12px #ff3aa0, 0 0 24px rgba(255, 58, 160, 0.8);
  }
}

要点：

  • 前缀里的 id 必须和皮肤定义的 id 完全一致，否则作用域对不上、皮肤不生效。
  • 这段前缀的特异性是 (0,3,0)，高于组件 scoped 样式的 (0,2,0)，所以不用 !important 就能盖过默认描边 / 阴影（默认值用的是 -webkit-text-stroke: var(--stroke) 之类，写死归零即可关掉）。

3. 注册成内置皮肤（开发期最快的验证方式） ​

把皮肤对象塞进对应组件的内置皮肤数组 src/assets/data/skins/gift-menu.ts：

ts
export const giftMenuSkins: Skin[] = [
  // ...已有皮肤
  {
    id: "gift.neon-pink",            // 命名约定 "<组件>.<变体>"
    name: "霓虹粉",                   // 「我的皮肤」/ 商城里显示的名字
    elementType: ElementType.GIFT_MENU,
    description: "热粉霓虹 / 双层发光",
    tags: ["霓虹", "粉色", "发光"],
    price: 0,                        // 0 / 不填 = 免费，内置皮肤恒为已拥有
    css: `
.gift-menu[data-skin-id="gift.neon-pink"] {
  & .desc, & .size { color: #ffc6e6; font-weight: bold; /* ... */ }
}
`
  }
];

skinsList（src/assets/data/skins/index.ts）会自动汇总所有内置皮肤，启动时由 injectAllBuiltinSkins() 一次性注入。

4. 在客户端里看效果 ​

  1. pnpm dev 启动客户端。
  2. 画布上添加一个「礼物菜单」元素并选中。
  3. 右侧配置区切到「样式」Tab → 点「皮肤」卡片 → 在「我的皮肤」里选中你刚加的「霓虹粉」。

切中后元素根节点 data-skin-id 变成 gift.neon-pink，你的 CSS 立刻命中。改 CSS 字符串后热更即可看到变化。

下一步 ​

  • 想做需要切换版式的皮肤（如加班机经典/简约）→ 你需要 data 字段，见 皮肤机制 §结构字段。
  • 想做带动效的皮肤（旋转极光、呼吸光晕）→ 看加班机里的 overtime.classic-aurora 范例与 加班机皮肤。
  • 想把皮肤上架卖给别人，而不是打包进客户端 → 看 上架与分发。