样式微调

.gitignore

@@ -9,7 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
-dist-ssr
+tsc-dist
 *.local
 
 # Editor directories and files

README.md

@@ -2,6 +2,55 @@
 
 react-diff-viz is a React component that compares and renders complex object differences
 
+## Install
+
+```bash
+npm install react-diff-viz
+```
+
+## Usage
+
+```tsx
+import Diff from "react-diff-viz";
+
+// diff data1 and data2 ,then render
+<Diff
+  data1={{
+    name: "John",
+    age: 30,
+    address: {
+      city: "New York",
+      country: "USA",
+    },
+  }}
+  data2={{
+    name: "John",
+    age: 31,
+    address: {
+      city: "New York",
+      country: "USA",
+    },
+  }}
+  vizItems={[
+    {
+      path: "name",
+      label: "name",
+    },
+    {
+      path: "age",
+      label: "age",
+    },
+    {
+      path: "address",
+      label: "address",
+      content: (v) => {
+        return v.city + " of " + v.country;
+      },
+    },
+  ]}
+/>;
+```
+
 ## Features
 
 > This component integrates diff algorithm and visual rendering, features are as follows
@@ -52,56 +101,6 @@ https://littlewhite-hai.github.io/react-diff-viz/
 | arrayKey              | string                     | Key for arrays, used to mark this data as array type                                                                                      |
 | alignAlignType        | "lcs" \| "data2" \| "none" | Array alignment method, default is longest common subsequence ([lcs](https://en.wikipedia.org/wiki/Longest_common_subsequence)) alignment |
 
-## Install
-
-```bash
-npm install react-diff-viz
-```
-
-## Usage
-
-```tsx
-import Diff from "react-diff-viz";
-
-const data1 = {
-  name: "John",
-  age: 30,
-  address: {
-    city: "New York",
-    country: "USA",
-  },
-};
-
-const data2 = {
-  name: "John",
-  age: 31,
-  address: {
-    city: "New York",
-    country: "USA",
-  },
-};
-
-const vizItems = [
-  {
-    path: "name",
-    label: "name",
-  },
-  {
-    path: "age",
-    label: "age",
-  },
-  {
-    path: "address",
-    label: "address",
-    content: (v) => {
-      return v.city + " of " + v.country;
-    },
-  },
-];
-
-<Diff data1={data1} data2={data2} vizItems={vizItems} />;
-```
-
 ## License
 
 MIT

docs/package.json

@@ -17,7 +17,7 @@
     "json-edit-react": "^1.17.0",
     "lodash": "^4.17.21",
     "react": "^18.3.1",
-    "react-diff-viz": "^1.1.3",
+    "react-diff-viz": "^1.1.5",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {