update README.md

Author: coderlzw-cn

README.md

@@ -2,6 +2,20 @@
 
 一个用于数字动画过渡的 React 组件库，提供了两种不同的数字动画效果。
 
+[![npm version](https://img.shields.io/npm/v/@coderlzw/react-number-animation.svg)](https://www.npmjs.com/package/@coderlzw/react-number-animation)
+[![npm downloads](https://img.shields.io/npm/dm/@coderlzw/react-number-animation.svg)](https://www.npmjs.com/package/@coderlzw/react-number-animation)
+[![license](https://img.shields.io/npm/l/@coderlzw/react-number-animation.svg)](https://github.com/coderlzw/react-number-animation/blob/main/LICENSE)
+
+## 特性
+
+- 🎯 高性能：使用 React.memo 优化渲染
+- 🎨 可定制：支持自定义样式和动画参数
+- 📦 轻量级：无额外依赖（除了 motion 库）
+- 🎭 平滑动画：使用 easeOutExpo 缓动函数
+- 🔢 数字格式化：支持千位分隔和小数点设置
+- 📱 响应式：适配各种屏幕尺寸
+- 🎨 主题定制：支持自定义样式覆盖
+
 ## 安装
 
 ```bash
@@ -40,14 +54,32 @@ import { Statistic } from '@coderlzw/react-number-animation';
 
 function App() {
   return (
-    <Statistic
-      value={1234567.89}
-      title="总销售额"
-      prefix="$"
-      suffix="元"
-      decimals={2}
-      duration={1500}
-    />
+    <div>
+      {/* 基础用法 */}
+      <Statistic
+        value={1234567.89}
+        title="总销售额"
+        prefix="$"
+        suffix="元"
+        decimals={2}
+        duration={1500}
+      />
+
+      {/* 自定义格式化 */}
+      <Statistic
+        value={1234567}
+        title="访问量"
+        separator=" " // 使用空格作为千位分隔符
+        suffix="次"
+      />
+
+      {/* 不使用分组 */}
+      <Statistic
+        value={123}
+        useGrouping={false}
+        title="ID"
+      />
+    </div>
   );
 }
 ```
@@ -69,11 +101,17 @@ function App() {
 import { AnimatedNumber } from '@coderlzw/react-number-animation';
 
 function App() {
+  const [value, setValue] = useState(0);
+
   return (
-    <AnimatedNumber
-      value={1234}
-      className="custom-animation"
-    />
+    <div>
+      <AnimatedNumber
+        value={value}
+        className="custom-animation"
+      />
+      <button onClick={() => setValue(v => v + 1)}>增加</button>
+      <button onClick={() => setValue(v => v - 1)}>减少</button>
+    </div>
   );
 }
 ```
@@ -96,14 +134,6 @@ function App() {
 - `.animated-number`: 动画数字容器
 - `.digit-container`: 单个数字容器
 
-## 特性
-
-- 🎯 高性能：使用 React.memo 优化渲染
-- 🎨 可定制：支持自定义样式和动画参数
-- 📦 轻量级：无额外依赖（除了 motion 库）
-- 🎭 平滑动画：使用 easeOutExpo 缓动函数
-- 🔢 数字格式化：支持千位分隔和小数点设置
-
 ## 浏览器支持
 
 - Chrome >= 60
@@ -114,6 +144,9 @@ function App() {
 ## 开发
 
 ```bash
+# 克隆仓库
+git clone https://github.com/coderlzw/react-number-animation.git
+
 # 安装依赖
 npm install
 
@@ -124,6 +157,10 @@ npm run dev
 npm run build
 ```
 
+## 贡献
+
+欢迎提交 Pull Request 或创建 Issue！
+
 ## 许可证
 
-MIT
+MIT © [coderlzw](https://github.com/coderlzw)

package.json

@@ -29,7 +29,7 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/coderlzw/react-number-animation"
+        "url": "git+https://github.com/coderlzw/react-number-animation.git"
     },
     "bugs": {
         "url": "https://github.com/coderlzw/react-number-animation/issues"