@5even7/dlc-ui 0.2.13 → 0.2.15

package/CHANGELOG.md

@@ -2,8 +2,18 @@
 
 > **发版规则**：默认每次发布只递增补丁号（0.x.y → 0.x.(y+1)，即 +0.01）；除非手动明确指定新版本号，否则不升次版本。
 
+## 0.2.15 - 2026-08-14
+- 首个表情家族为 `type="miao"`，内置 23 个完整 Lottie 动作；素材生成阶段仍会校验并排除没有图层的空动画。
+
+## 0.2.14 - 2026-08-14
+- 新增dlc-emo表情包组件
+
 ## 0.2.13 - 2026-08-14
 
+- 新增第四类组件 `dlc-emo`：H5 `createEmo()`、Vue 2 / Vue 3 `DlcEmo`，并提供独立 `@5even7/dlc-ui/emo` 与样式入口。
+- Emo 支持主色 / 辅助色、非正方形尺寸、contain / cover、0.1~4 倍速、循环、自动播放、正倒播、暂停、帧片段、透明度、背景色、SVG / Canvas 渲染器、无障碍名称与减少动态偏好。
+- 性能与兼容：SVG / Canvas 分别按需加载无表达式的 Lottie light 播放器，未创建 Emo 时不执行播放器代码，避免影响前三类组件与 SSR 导入。
+- 补齐 Emo 类型声明、默认值、控制器方法、生命周期事件和素材生成测试；素材没有稳定器官语义，因此未提供无法可靠生效的左眼 / 右眼等伪 API。
 - Progress 新增内置预置 `森息`（NC-14）：包含植物实验室色板、独立流体运动参数和参考图集配置，可直接使用 `preset="森息"`。
 - H5、Vue 2、Vue 3 示例将“植物实验室”改为由内置预置驱动，并在默认预置列表中展示 NC-14。
 - 文档明确 Capsule 的 `click` / `dblclick` 保持原生 H5 语义：双击会先伴随两次 `click`，组件不延迟或吞掉单击事件。

package/README.md

@@ -1,8 +1,8 @@
 # @5even7/dlc-ui
 
-框架无关的 **星云胶囊**、**流体进度胶囊** 与 **星云背景层（dlc-color）** 组件库：WebGL2 实时渲染，不可用时自动降级 Canvas2D。一套核心，H5 / Vue2 / Vue3 都能用。
+框架无关的 **星云胶囊**、**流体进度胶囊**、**星云背景层（dlc-color）** 与 **Lottie 动态表情（dlc-emo）** 组件库。一套核心，H5 / Vue2 / Vue3 都能用。
 
-零运行时依赖；现代浏览器加载原生 ESM，旧浏览器 / Vue2 老工具链走转译后的 legacy 构建（Canvas2D 降级），互不影响。
+星云组件使用 WebGL2 实时渲染，不可用时自动降级 Canvas2D；Emo 使用按需加载的 `lottie-web` 轻量矢量播放器，可选 SVG / Canvas。现代浏览器加载原生 ESM，旧工具链可使用转译后的 legacy 构建。
 
 ## 发版规则
 
@@ -25,6 +25,8 @@ npm install @5even7/dlc-ui
 
 `dlc-color` 复用同一套星云渲染器，只做背景层，直接使用上表 capsule 的 6 个预置。
 
+`dlc-emo` 当前提供 `type="miao"` 与 23 个动作名：`angry / cry / sad / sigh / investigate / mute / ponder / question / static / asleep / yawn / badminton / confident / laugh / leisure / music / smile / yummy / mock / shy / snigger / panic / shocked`。`type` 为后续 `wang` 等素材家族保留扩展空间。
+
 `preset` 只接受上表中的文学名称（如 `'沧溟'`），大小写不敏感、首尾空格忽略；不传时使用默认预置 `初光`（胶囊/背景层）或 `星火`（进度条）。`colors`、`seed`、`speed` 是独立属性，传了覆盖预置内置值，不传用预置默认值。
 
 ## H5 使用
@@ -55,6 +57,30 @@ const progress = createProgressCapsule(document.querySelector('#host-b'), {
 progress.on('change', ({ value, source }) => console.log(value, source));
 ```
 
+### 动态表情（dlc-emo）
+
+```js
+import { createEmo } from '@5even7/dlc-ui/emo';
+import '@5even7/dlc-ui/emo/style.css';
+
+const emo = createEmo(document.querySelector('#emo-host'), {
+  type: 'miao',
+  name: 'smile',
+  width: 240,
+  height: 160,
+  color: '#fff8dc',
+  accentColor: '#ffd24a',
+  speed: 1.5,
+  fit: 'contain',
+  renderer: 'svg'
+});
+
+emo.setName('laugh').setSegment([0, 80]);
+// 宿主销毁时：emo.dispose();
+```
+
+当前素材未提供稳定的左眼、右眼等语义图层，无法保证器官级换色。因此 `color` 只替换白色主通道，`accentColor` 统一替换其余填充/描边；部分动作没有辅助通道，不传 `accentColor` 时保留素材原色。
+
 工厂调用用 `text` / `colorContent` 选项填插槽；Vue 组件直接用默认插槽和 `#color` 插槽（见下）。
 
 ### 插槽与 CSS 约定（重要）
@@ -102,7 +128,7 @@ background.pause();
 <link rel="stylesheet" href="https://unpkg.com/@5even7/dlc-ui/styles/theme.css" />
 <script src="https://unpkg.com/@5even7/dlc-ui/dist/index.umd.min.js"></script>
 <script>
-  const { createCapsule, createProgressCapsule } = window.CosmicCapsules;
+  const { createCapsule, createProgressCapsule, createEmo } = window.CosmicCapsules;
 </script>
 ```
 
@@ -110,7 +136,7 @@ background.pause();
 
 ```vue
 <script setup>
-import { DlcCapsule, DlcProgress, DlcColor } from '@5even7/dlc-ui/vue3';
+import { DlcCapsule, DlcProgress, DlcColor, DlcEmo } from '@5even7/dlc-ui/vue3';
 import '@5even7/dlc-ui/style.css';
 
 function onProgressChange({ value }) {
@@ -132,17 +158,19 @@ function onProgressChange({ value }) {
   <dlc-color preset="沧溟" style="height: 200px">
     这段内容显示在星云背景上方
   </dlc-color>
+
+  <dlc-emo type="miao" name="smile" :width="180" :height="180" />
 </template>
 ```
 
 ## Vue2
 
 ```js
-import { DlcCapsule, DlcProgress } from '@5even7/dlc-ui/vue2';
+import { DlcCapsule, DlcProgress, DlcEmo } from '@5even7/dlc-ui/vue2';
 import '@5even7/dlc-ui/style.css';
 
 export default {
-  components: { DlcCapsule, DlcProgress },
+  components: { DlcCapsule, DlcProgress, DlcEmo },
   template: `
     <dlc-progress preset="汐潮" :width="454" :height="104" @change="onChange">
       <span class="prog-name">画境观屿</span>
@@ -164,6 +192,8 @@ export default {
 
 dlc-color 背景层（`createColorBackground(host, options)`）：`preset`、`colors`、`seed`、`speed`、`quality`、`renderer`、`mouseColor`、`respectReducedMotion`、`opacity`（0~1）、`fallbackColor`（预置底色 / 十六进制色 / false）。控制器支持 `setPreset / setColors / setSeed / setSpeed / setQuality / setOpacity / setFallbackColor / setMouseColor / randomize / pause / resume / dispose` 和 `ready / presetchange / error` 事件。Vue 里可用官方组件 `dlc-color`（从 `@5even7/dlc-ui/vue2` 或 `/vue3` 导入），它的默认插槽内容会显示在背景层上方。
 
+dlc-emo：`type`、`name`、`width`、`height`、`color`、`accentColor`、`speed`（0.1~4，常用 0.5/1/1.5/2）、`loop`、`autoplay`、`direction`（forward/reverse 或 1/-1）、`paused`、`segment`（帧区间）、`opacity`、`fit`（contain/cover）、`renderer`（svg/canvas）、`background`、`label`、`instanceName`、`respectReducedMotion`。控制器提供 `play / pause / stop / setPaused / setSpeed / setDirection / setSegment / setName / setType / setColors / setOpacity / setBackground / setSize / setFit / setRenderer / setLoop / setAutoplay / setLabel / dispose`。
+
 胶囊控制器额外支持 `setSeed(seed)` / `setSpeed(speed)` / `setMouseColor(value)` / `setText(content)` / `setColorContent(content)` / `setTextRatio(ratio)` / `setCssVars(vars)` / `setLabel(label)` 热更新；进度控制器额外支持 `setEdgeStyle('flow' | 'tide')` / `setValueSuffix(suffix)` / `setShowValue(show)` 和同样的插槽热更新方法。`setPreset` 只接受文学名称字符串（如 `'汐潮'`）。Vue 组件实例也暴露 `setText` / `setColorContent` / `setTextRatio` / `setCssVars` / `setLabel`（胶囊另有 `setMouseColor`，进度另有 `setValueSuffix` / `setShowValue`），与 H5 控制器对称。
 
 > 进度条是完全受控组件：组件自身不再自动增长，`value` 由使用方驱动。要自动步进，自己写定时器加值即可：
@@ -238,6 +268,10 @@ createProgressCapsule(el, {
 | progress | `change` | `{ value, source }`，source ∈ `drag/prop` |
 | progress | `dragstart` / `dragend` | `{ value }` |
 | progress | `error` | `{ message }` |
+| emo | `ready` | `{ preset, duration, frames }` |
+| emo | `complete` / `loopComplete` / `segmentStart` | 播放生命周期 |
+| emo | `namechange` / `typechange` | `{ preset }` |
+| emo | `error` | `{ message }` |
 
 `click` 与 `dblclick` 保持原生 H5 的独立事件语义：一次双击会先产生两次 `click`，随后产生一次 `dblclick`。组件不会延迟或吞掉 `click`；若业务需要单击与双击互斥，应由业务层根据自己的等待时长与交互后果处理。
 
@@ -245,10 +279,12 @@ createProgressCapsule(el, {
 
 | 目标 | 构建 | 渲染 |
 | --- | --- | --- |
-| Chrome 56+ / Edge 79+ / Firefox 51+ / Safari 15+ / iOS 15+ / 新版 Android WebView | `dist/*.mjs`（原生 ESM） | WebGL2 完整效果 |
-| IE11 / 旧 WebView / Vue2 老工具链（webpack4） | `dist/*.cjs` / `dist/index.umd.min.js`（ES5 + 内置 polyfill） | Canvas2D 降级动画 |
+| Chrome / Chromium / Edge / Android WebView 84+ | `dist/*.mjs`（原生 ESM） | 星云 WebGL2；Emo SVG / Canvas |
+| Firefox 90+ | `dist/*.mjs`（原生 ESM） | 星云 WebGL2；Emo SVG / Canvas |
+| Safari / iOS Safari 15+ | `dist/*.mjs`（原生 ESM） | 星云 WebGL2；Emo SVG / Canvas |
+| Samsung Internet 14+ | `dist/*.mjs`（原生 ESM） | 星云 WebGL2；Emo SVG / Canvas |
 
-现代浏览器永远加载不到 legacy 代码，所以老设备兼容不影响新浏览器的效果、性能与观感。
+IE11 不在当前官方支持范围内。星云组件的 WebGL2 可能因显卡、驱动或浏览器策略不可用，此时自动降级 Canvas2D；Emo 的 renderer 是独立的 `svg` / `canvas`，不会走 WebGL2。
 
 ## 开发
 
@@ -258,7 +294,7 @@ npm run build   # 产出 dist（ESM + CJS + UMD）
 npm test        # node --test tests/
 ```
 
-源码入口：`src/dlc-capsule/`（星云胶囊）、`src/dlc-progress/`（进度胶囊）、`src/dlc-color/`（星云背景层）、`src/config/`（预置/默认值/文案）、`src/core/`（调度/尺寸/质量/可见性等公共核心）。
+源码入口：`src/dlc-capsule/`（星云胶囊）、`src/dlc-progress/`（进度胶囊）、`src/dlc-color/`（星云背景层）、`src/dlc-emo/`（动态表情）、`src/config/`（预置/默认值/文案）、`src/core/`（调度/尺寸/质量/可见性等公共核心）。
 
 ## 示例怎么看