feat: enhance mixed char demo, fix full-width layout, remove old demo

Author: tombcato

README.md

@@ -6,7 +6,7 @@
 <h1 align="center">Smart Ticker</h1>
 
 <p align="center">
-  高性能智能文本差异滚动组件，基于 Levenshtein diff 算法，支持多字符集，适用于React/Vue，<a href="https://tombcato.github.io/smart-ticker/">官网演示></a>
+  高性能智能文本差异滚动组件，支持中英、数字、字母、符号、Emoji等多种字符集，基于 Levenshtein diff 算法，适用于React/Vue，<a href="https://tombcato.github.io/smart-ticker/">官网演示></a>
 </p>
 
 <p align="center">
@@ -16,6 +16,9 @@
 <p align="center">
   <img src="./smartticker.gif" alt="Demo" width="600" />
 </p>
+<p align="center">
+  <img src="./smartticker2.gif" alt="Demo" width="600" />
+</p>
 
 <p align="center">
   <img src="https://img.shields.io/badge/React-18+-61DAFB?logo=react" alt="React" />
@@ -26,14 +29,11 @@
 
 
 ## ✨ 特性
-
-- **智能差异动画** - 只有变化的字符会滚动，相同的字符保持静止
-- **平滑中断** - 动画过程中值变化时，从当前位置无缝衔接到新目标
-- **多种缓动曲线** - 支持 `linear`、`easeInOut`、`bounce` 等多种动画效果
-- **字符宽度可调** - 通过 `charWidth` 属性控制字符间距
-- **多字符集支持** - 支持数字、字母、符号等多种字符集，可混合使用
-- **双框架支持** - 提供 React 组件和 Vue 组件
-- **高性能** - 使用 `requestAnimationFrame` 和 `React.memo` 优化渲染
+| | |
+| :--- | :--- |
+| **🌏 多字符集支持**<br>支持中英、数字、Emoji等混合滚动，基于 Unicode 宽度自动调整间距 | **🧠 智能差异动画**<br>Levenshtein 算法计算最小变更路径，相同的字符保持静止 |
+| **⚡ 平滑中断**<br>动画过程中值突变时，从当前动态位置无缝流向新目标 | **📈 丰富动效**<br>内置 `linear`, `bounce`, `easeInOut` 等缓动，支持 `charWidth` 微调 |
+| **🦄 双框架支持**<br>提供 React (Hooks) 和 Vue 3 (Composition) 组件，API 统一 | **🚀 极致性能**<br>基于 `RAF` 驱动，无多余 DOM 操作，适合高频数据流场景 |
 
 ## 📦 安装
 
@@ -155,8 +155,32 @@ const price = ref('73.18');
 import { TickerUtils } from './components/Ticker';
 
 TickerUtils.provideNumberList()        // '0123456789'
-TickerUtils.provideAlphabeticalList()  // 'abcdefghijklmnopqrstuvwxyz'
-TickerUtils.provideHexadecimalList()   // '0123456789ABCDEF'
+TickerUtils.provideAlphabeticalList()  // 'abc...zABC...Z'
+
+### 🧩 字符集配置详解
+
+`characterLists` 是控制 Ticker 动画逻辑的核心配置。它接受一个字符串数组，数组的每一项代表一组**“可以互相滚动”**的字符。
+
+**基本规则：**
+1.  **同组滚动**：如果旧字符和新字符在同一个字符串中（例如 `0` 变 `9` 在 `'0123456789'` 中），它们会产生滚动动画。
+2.  **跨组替换**：如果它们不在同一组（例如 `a` 变 `1`），或者任何一个字符不在配置列表中（例如汉字），它们会原地切换（Switch），不会产生滚动。
+
+**配置技巧：**
+
+*   **默认全字母**：`TickerUtils.provideAlphabeticalList()` 默认包含 `a-z` 和 `A-Z`。如果你希望大小写之间可以滚动（如 `a` -> `A`），使用它即可。
+*   **由于物理隔离**：如果你不希望小写字母滚动变成大写字母（希望它们直接切换），请将它们配置为两个独立的字符串，例如 `['abc...', 'ABC...']`。
+
+**示例：**
+
+```javascript
+// 场景：数字、字母（大小写隔离）、符号
+characterLists={[
+  'abcdefghijklmnopqrstuvwxyz', // 小写组
+  'ABCDEFGHIJKLMNOPQRSTUVWXYZ', // 大写组
+  '0123456789',                 // 数字组
+  '.,!@#$%^&*'                  // 符号组
+]}
+```
 ```
 
 ## 💻 运行演示

README_EN.md

@@ -5,9 +5,7 @@
 
 <h1 align="center">Smart Ticker</h1>
 
-<p align="center">
-  High-performance smart text ticker component based on Levenshtein diff algorithm. Supports multiple charsets, works with React/Vue. <a href="https://tombcato.github.io/smart-ticker/">Live Demo ></a>
-</p>
+  High-performance smart text ticker component based on Levenshtein diff algorithm. Supports CJK, numbers, letters, emojis, and mixed charsets. <a href="https://tombcato.github.io/smart-ticker/">Live Demo ></a>
 
 <p align="center">
   <a href="./README.md">简体中文</a> | <strong>English</strong>
@@ -16,6 +14,9 @@
 <p align="center">
   <img src="./smartticker.gif" alt="Demo" width="600" />
 </p>
+<p align="center">
+  <img src="./smartticker2.gif" alt="Demo" width="600" />
+</p>
 
 <p align="center">
   <img src="https://img.shields.io/badge/React-18+-61DAFB?logo=react" alt="React" />
@@ -25,15 +26,11 @@
 </p>
 
 
-## ✨ Features
-
-- **Smart Diff Animation** - Only changed characters scroll, identical ones remain static.
-- **Smooth Interruption** - Seamlessly transitions to new targets if value changes during animation.
-- **Custom Easing** - Supports `linear`, `easeInOut`, `bounce` and more.
-- **Adjustable Char Width** - Control character spacing via `charWidth` prop.
-- **Multi-Charset** - Supports numbers, letters, symbols, and mixed usage.
-- **Dual Framework Support** - Provides both React and Vue components.
-- **High Performance** - Optimized with `requestAnimationFrame` and `React.memo`.
+| | |
+| :--- | :--- |
+| **🌏 Multi-Charset Support**<br>Supports CJK, Numbers, Emojis, and mixed text rolling. Auto-adjusts spacing based on Unicode width. | **🧠 Smart Diff Animation**<br>Uses Levenshtein algorithm to find the shortest change path; identical characters remain static. |
+| **⚡ Smooth Interruption**<br>Seamlessly transitions to new targets if the value changes dynamically during animation. | **📈 Rich Motion**<br>Built-in `linear`, `bounce`, `easeInOut` easings. Supports `charWidth` for fine-tuning. |
+| **🦄 Dual Framework**<br>Provides both React (Hooks) and Vue 3 (Composition) components with a unified API. | **🚀 High Performance**<br>Powered by `RAF`, removing DOM overhead, optimized for high-frequency data streams. |
 
 ## 📦 Installation
 
@@ -155,8 +152,31 @@ The component uses the system monospace stack by default. To use a custom font (
 import { TickerUtils } from './components/Ticker';
 
 TickerUtils.provideNumberList()        // '0123456789'
-TickerUtils.provideAlphabeticalList()  // 'abcdefghijklmnopqrstuvwxyz'
-TickerUtils.provideHexadecimalList()   // '0123456789ABCDEF'
+TickerUtils.provideAlphabeticalList()  // 'abc...zABC...Z'
+
+### 🧩 Character Configuration
+
+`characterLists` controls the core animation logic. It accepts an array of strings, where each string represents a group of characters that can **scroll into each other**.
+
+**Rules:**
+1.  **Scroll**: If both the old and new characters belong to the same group string (e.g., `0` to `9` in `'0123456789'`), they will scroll.
+2.  **Switch**: If they are in different groups, or if a character is not in any list (e.g., Chinese characters), they will switch instantly without scrolling.
+
+**Configuration Tips:**
+
+*   `TickerUtils.provideAlphabeticalList()` includes both `a-z` and `A-Z`.
+*   To prevent scrolling between cases (e.g., `a` -> `A`), provide them as separate strings: `['abc...', 'ABC...']`.
+
+**Example:**
+
+```javascript
+characterLists={[
+  'abcdefghijklmnopqrstuvwxyz', // Lowercase group
+  'ABCDEFGHIJKLMNOPQRSTUVWXYZ', // Uppercase group
+  '0123456789',                 // Number group
+  '.,!@#$%^&*'                  // Symbol group
+]}
+```
 ```
 
 ## 💻 Running Demos

examples/react-demo/src/App.tsx

@@ -1,24 +1,59 @@
 import { useState, useEffect } from 'react'
-import { Ticker } from '@tombcato/smart-ticker'
+import { Ticker, TickerUtils } from '@tombcato/smart-ticker'
 import '@tombcato/smart-ticker/style.css'
 
 type EasingType = 'linear' | 'easeInOut' | 'bounce'
+type DemoMode = 'price' | 'text'
 
 function App() {
-    const [value, setValue] = useState(173.50)
+    const [mode, setMode] = useState<DemoMode>('price')
+    const [value, setValue] = useState<string | number>(173.50)
     const [charWidth, setCharWidth] = useState(1)
     const [duration, setDuration] = useState(800)
     const [easing, setEasing] = useState<EasingType>('easeInOut')
 
     useEffect(() => {
-        const prices = [73.18, 76.58, 173.50, 9.10]
-        let idx = 0
-        const timer = setInterval(() => {
-            idx = (idx + 1) % prices.length
-            setValue(prices[idx])
-        }, 2000)
+        let timer: number
+
+        if (mode === 'price') {
+            const prices = [73.18, 76.58, 173.50, 9.10]
+            let idx = 0
+            setValue(prices[0])
+            timer = setInterval(() => {
+                idx = (idx + 1) % prices.length
+                setValue(prices[idx])
+            }, 2000)
+        } else {
+            const words = [
+                'Smart Ticker',
+                'Small Diff',
+                '哈基米 Dif@#$',
+                '硅基生命 %@#$',
+                '宇宙生命 Smart',
+            ]
+            let idx = 0
+            setValue(words[0])
+            timer = setInterval(() => {
+                idx = (idx + 1) % words.length
+                setValue(words[idx])
+            }, 2000)
+        }
+
         return () => clearInterval(timer)
-    }, [])
+    }, [mode])
+
+    // Determine character lists based on mode
+    const currentCharacterLists = mode === 'price'
+        ? ['0123456789.,']
+        : [
+            TickerUtils.provideAlphabeticalList(),
+            TickerUtils.provideAlphabeticalList().toUpperCase(),
+            TickerUtils.provideNumberList(),
+            ' .%v-@#$'
+        ]
+
+    // Determine display value
+    const displayValue = mode === 'price' ? Number(value).toFixed(2) : String(value)
 
     return (
         <div className="app-container">
@@ -31,19 +66,28 @@ function App() {
             </header>
 
             <div className="ticker-display">
-                <span className="currency-symbol">$</span>
+                {mode === 'price' && <span className="currency-symbol">$</span>}
                 <div className="ticker-main">
                     <Ticker
-                        value={value.toFixed(2)}
+                        value={displayValue}
                         duration={duration}
                         easing={easing}
                         charWidth={charWidth}
-                        characterLists={['0123456789.,']}
+                        characterLists={currentCharacterLists}
                     />
                 </div>
             </div>
 
             <div className="controls">
+                {/* 模式切换 */}
+                <div className="control-group">
+                    <div className="label">演示模式</div>
+                    <div className="options">
+                        <button className={mode === 'price' ? 'active' : ''} onClick={() => setMode('price')}>数字</button>
+                        <button className={mode === 'text' ? 'active' : ''} onClick={() => setMode('text')}>文本</button>
+                    </div>
+                </div>
+
                 {/* 字符宽度控制 */}
                 <div className="control-group">
                     <div className="label">字符宽度</div>
@@ -99,15 +143,15 @@ function App() {
 
             <footer className="code-section">
                 <h2>💻 使用代码</h2>
-                <pre><code>{`import { Ticker } from '@tombcato/smart-ticker'
+                <pre><code>{`import { Ticker, TickerUtils } from '@tombcato/smart-ticker'
 import '@tombcato/smart-ticker/style.css'
 
 <Ticker
-  value="${value.toFixed(2)}"
+  value="${displayValue}"
   duration={${duration}}
   easing="${easing}"
   charWidth={${charWidth}}
-  characterLists={['0123456789.,']}
+  characterLists={${mode === 'price' ? "['0123456789.,']" : "[TickerUtils.provideAlphabeticalList()]"}}
 />`}</code></pre>
             </footer>
         </div>