diff --git a/package-lock.json b/package-lock.json
index a2814fbb484456e252b864b5fdfce844cb6c242e..7ad0334f4d70e41689bd23cc658f1df56393ca2d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
                 "serialize-php": "^1.1.2",
                 "sm-crypto": "^0.1.4",
                 "system": "^2.0.1",
+                "uuid": "^8.3.2",
                 "view-design": "^4.3.2",
                 "vue": "^2.6.12",
                 "vue-codemirror": "^4.0.6",
@@ -11533,6 +11534,15 @@
                 "request": "^2.34"
             }
         },
+        "node_modules/request/node_modules/uuid": {
+            "version": "3.4.0",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+            "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+            "dev": true,
+            "bin": {
+                "uuid": "bin/uuid"
+            }
+        },
         "node_modules/require-directory": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -12349,6 +12359,15 @@
                 "node": ">=0.8.0"
             }
         },
+        "node_modules/sockjs/node_modules/uuid": {
+            "version": "3.4.0",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+            "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+            "dev": true,
+            "bin": {
+                "uuid": "bin/uuid"
+            }
+        },
         "node_modules/sort-keys": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
@@ -13907,12 +13926,11 @@
             }
         },
         "node_modules/uuid": {
-            "version": "3.4.0",
-            "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-            "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-            "dev": true,
+            "version": "8.3.2",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+            "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
             "bin": {
-                "uuid": "bin/uuid"
+                "uuid": "dist/bin/uuid"
             }
         },
         "node_modules/v-click-outside-x": {
@@ -14764,6 +14782,15 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/webpack-log/node_modules/uuid": {
+            "version": "3.4.0",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+            "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+            "dev": true,
+            "bin": {
+                "uuid": "bin/uuid"
+            }
+        },
         "node_modules/webpack-merge": {
             "version": "4.2.2",
             "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
@@ -24613,6 +24640,14 @@
                 "tough-cookie": "~2.5.0",
                 "tunnel-agent": "^0.6.0",
                 "uuid": "^3.3.2"
+            },
+            "dependencies": {
+                "uuid": {
+                    "version": "3.4.0",
+                    "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+                    "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+                    "dev": true
+                }
             }
         },
         "request-promise-core": {
@@ -25299,6 +25334,14 @@
                 "faye-websocket": "^0.10.0",
                 "uuid": "^3.4.0",
                 "websocket-driver": "0.6.5"
+            },
+            "dependencies": {
+                "uuid": {
+                    "version": "3.4.0",
+                    "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+                    "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+                    "dev": true
+                }
             }
         },
         "sockjs-client": {
@@ -26631,10 +26674,9 @@
             "dev": true
         },
         "uuid": {
-            "version": "3.4.0",
-            "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-            "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-            "dev": true
+            "version": "8.3.2",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+            "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
         },
         "v-click-outside-x": {
             "version": "3.7.1",
@@ -27309,6 +27351,14 @@
             "requires": {
                 "ansi-colors": "^3.0.0",
                 "uuid": "^3.3.2"
+            },
+            "dependencies": {
+                "uuid": {
+                    "version": "3.4.0",
+                    "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+                    "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+                    "dev": true
+                }
             }
         },
         "webpack-merge": {
diff --git a/package.json b/package.json
index d15c5350ec83d67d037fbb3cf4839a16067982a9..028cf5f986787433bb55f57375d428833045279c 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
         "serialize-php": "^1.1.2",
         "sm-crypto": "^0.1.4",
         "system": "^2.0.1",
+        "uuid": "^8.3.2",
         "view-design": "^4.3.2",
         "vue": "^2.6.12",
         "vue-codemirror": "^4.0.6",
diff --git a/src/tool.router.js b/src/tool.router.js
index eaa4c9b605bb87bc1ba8a5e94d106586be726feb..a47b512a0b20a9b8c43cd440d1123897153cd189 100644
--- a/src/tool.router.js
+++ b/src/tool.router.js
@@ -85,6 +85,10 @@ const routes = [
     {
         path: '/tool/json',
         component: r => require(['./views/tool/json.vue'], r)
+    },
+    {
+        path: '/tool/uuid',
+        component: r => require(['./views/tool/uuid.vue'], r)
     }
 ]
 
diff --git a/src/tool/config.js b/src/tool/config.js
index 357cd334df87cd84dccf0ab0fd4d342fe61d2b1a..574421f5d5742145109e335d879e7e0857ba4de5 100644
--- a/src/tool/config.js
+++ b/src/tool/config.js
@@ -6,9 +6,9 @@ export const TOOL_DATA_EXPIRY = 3600 * 24
 // 徽章过期时间(天)
 export const BADGE_EXPIRY = 10
 // 分类徽章
-export const BADGE_CATEGORY = []
+export const BADGE_CATEGORY = ['serialize','other']
 // 工具徽章
-export const BADGE_TOOL = []
+export const BADGE_TOOL = ['uuid','serializeConversion']
 // 默认常用工具
 export const DEFAULT_COMMON_TOOL = [
     'hash', 'encrypt', 'json', 'base64', 'url', 'timestamp',
@@ -45,6 +45,7 @@ const tool = [
     {'name': 'websocket', 'title': 'websocket调试', 'cat': ['other']},
     {'name': 'unit', 'title': '单位换算', 'cat': ['other']},
     {'name': 'time', 'title': '时间计算器', 'cat': ['other']},
+    {'name': 'uuid', 'title': 'UUID生成', 'cat': ['other']},
 ]
 
 // 徽章是否显示
diff --git a/src/views/tool/uuid.vue b/src/views/tool/uuid.vue
index 5a26b53852890de9345d7a096d8235203d2c72d9..00a2148f98268abac19e3be0d31eebd4f1d44799 100644
--- a/src/views/tool/uuid.vue
+++ b/src/views/tool/uuid.vue
@@ -1,80 +1,61 @@
 <template>
     <div>
-        <option-block class="page-option-block">
-            <FormItem style="width: 170px">
-                <Input v-model="current.amount" type="number">
-                    <div slot="prepend">{{ $t('uuid_amount') }}</div>
-                    <Button slot="append" icon="md-refresh" @click="handle()"></Button>
+        <option-block>
+            <FormItem>
+                <Input v-model="current.amount">
+                    <div slot="prepend" style="width: 70px">生成数量</div>
                 </Input>
             </FormItem>
-            <FormItem style="width: 140px">
+            <FormItem>
                 <Input v-model="current.delimiter">
-                    <div slot="prepend">{{ $t('uuid_delimiter') }}</div>
+                    <div slot="prepend" style="width: 70px">分隔符</div>
                 </Input>
             </FormItem>
             <FormItem>
-                <Checkbox v-model="current.hyphens">{{ $t('uuid_hyphens') }}</Checkbox>
+                <Checkbox v-model="current.filterLine">过滤中划线(-)</Checkbox>
+            </FormItem>
+            <FormItem>
+                <Checkbox v-model="current.isUpper">大写字母</Checkbox>
             </FormItem>
             <FormItem>
-                <Checkbox v-model="current.isUpper">{{ $t('uuid_is_upper') }}</Checkbox>
+                <Checkbox v-model="current.isAddQuote">添加引号</Checkbox>
             </FormItem>
             <FormItem>
-                <Checkbox v-model="current.isAddQuote">{{ $t('uuid_is_add_quote') }}</Checkbox>
+                <Checkbox v-model="current.uint8Array">Uint8 Array</Checkbox>
             </FormItem>
             <FormItem>
-                <Checkbox v-model="current.uint8Array">{{ $t('uuid_uint8_array') }}</Checkbox>
+                <Button type="primary" @click="handle()">生成</Button>
             </FormItem>
         </option-block>
-        <heightResize :append="['.page-option-block']">
-            <autoHeightTextarea v-model="output" :placeholder="$t('uuid_output')" />
-        </heightResize>
+        <Input v-model="current.output" :rows="12" type="textarea" placeholder="结果"></Input>
     </div>
 </template>
 <script>
-import {parse as uuidParse, v4 as uuidV4} from 'uuid';
-import heightResize from "./components/heightResize";
-import autoHeightTextarea from "./components/autoHeightTextarea";
+import {v4 as uuidV4,parse as uuidParse} from 'uuid';
+
 export default {
-    components:{
-        heightResize,
-        autoHeightTextarea
-    },
     created() {
-        this.$initToolData()
-    },
-    mounted() {
-        if (this.current.result.length < 1){
-            this.handle()
-        }
-    },
-    computed:{
-        output(){
-            if (this.current.result.length < 1){
-                return "";
-            }
-            return this.current.result.map((item)=>{
-                if (this.current.uint8Array) {
-                    item = "[" + uuidParse(item).toString() + "]"
-                }
-                if (!this.current.hyphens) {
-                    item = item.replace(/-/g, "")
-                }
-                item = this.current.isUpper ? item.toUpperCase() : item.toLowerCase()
-                if (this.current.isAddQuote){
-                    item = `"${item}"`
-                }
-                return item
-            }).join(this.current.delimiter.replace(/\\n/g, "\n"));
-        }
+        this.current = Object.assign(this.current, this.$getToolData())
     },
     methods: {
         handle() {
             let result = [];
             for (let i = 0, l = this.current.amount; i < l; i++) {
-                result.push(uuidV4());
+                result.push(this.current.isAddQuote ? '"' + this.generate() + '"' : this.generate());
             }
-            this.current.result = result
+            this.current.output = result.join(this.current.delimiter.replace(/\\n/g, "\n"));
             this.$saveToolData(this.current);
+        },
+        generate() {
+            let uuid = uuidV4()
+            if(this.current.uint8Array){
+                return "["+uuidParse(uuid).toString()+"]"
+            }
+            if (this.current.filterLine) {
+                uuid = uuid.replace(/-/g, "")
+            }
+            uuid = this.current.isUpper ? uuid.toUpperCase() : uuid.toLowerCase()
+            return uuid;
         }
     },
     data() {
@@ -82,13 +63,13 @@ export default {
             current: {
                 amount: 10,
                 delimiter: ",\\n",
-                hyphens: true,
+                filterLine: false,
                 isAddQuote: false,
                 isUpper: false,
                 uint8Array: false,
-                result: []
+                output: ""
             }
         }
     },
 }
-</script>
+</script>
\ No newline at end of file