diff --git a/mock/tools.ts b/mock/tools.ts
index 8352eda..b3d866d 100644
--- a/mock/tools.ts
+++ b/mock/tools.ts
@@ -129,66 +129,30 @@ function getTools() {
     },
     {
       id: 1,
-      title: '单位换算(ing)',
+      title: '单位换算',
       logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
       desc: '在线体积、重量、字节、长度、面积、时间、角度、速度、温度、压力、热量、功率等换算',
-      url: '/danmu',
+      url: '/unit',
       cateId: 4,
       cate: '教育学术'
     },
     {
       id: 1,
-      title: '色板(ing)',
+      title: '色板',
       logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
       desc: '包含纯色、渐变与阶梯色和常用色彩组合',
-      url: '/danmu',
+      url: '/palettes',
       cateId: 5,
       cate: '设计工具'
     },
     {
       id: 1,
-      title: '三才五格起名(ing)',
-      logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-      desc: '根据三才五格起名',
-      url: '/danmu',
-      cateId: 4,
-      cate: '教育学术'
-    },
-    {
-      id: 1,
-      title: '二维码生成(ing)',
+      title: '二维码生成',
       logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
       desc: '在线生成带logo、透明、艺术的二维码',
-      url: '/danmu',
+      url: '/qrcode',
       cateId: 5,
       cate: '设计工具'
-    },
-    {
-      id: 1,
-      title: 'logo生成(ing)',
-      logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-      desc: '在线生成logo，免费下载',
-      url: '/danmu',
-      cateId: 5,
-      cate: '设计工具'
-    },
-    {
-      id: 1,
-      title: '头像生成(ing)',
-      logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-      desc: '在线生成头像',
-      url: '/danmu',
-      cateId: 5,
-      cate: '设计工具'
-    },
-    {
-      id: 1,
-      title: 'linux命令查询(ing)',
-      logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-      desc: 'linux命令查询',
-      url: '/danmu',
-      cateId: 2,
-      cate: '开发运维'
     }
   ]
 }
diff --git a/package.json b/package.json
index 1da1b37..23e21fc 100644
--- a/package.json
+++ b/package.json
@@ -17,12 +17,13 @@
     "@codemirror/language": "^6.9.2",
     "@codemirror/lint": "^6.4.2",
     "@codemirror/search": "^6.5.4",
-    "@codemirror/state": "^6.3.1",
+    "@codemirror/state": "^6.3.3",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.22.0",
     "@element-plus/icons-vue": "^2.1.0",
     "axios": "^1.6.2",
     "element-plus": "^2.4.2",
+    "qrcode-vue3": "^1.6.8",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "ts-md5": "^1.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2c57c4a..07c4a55 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ dependencies:
     specifier: ^6.5.4
     version: 6.5.5
   '@codemirror/state':
-    specifier: ^6.3.1
-    version: 6.3.2
+    specifier: ^6.3.3
+    version: registry.npmmirror.com/@codemirror/state@6.3.3
   '@codemirror/theme-one-dark':
     specifier: ^6.1.2
     version: 6.1.2
@@ -41,6 +41,9 @@ dependencies:
   element-plus:
     specifier: ^2.4.2
     version: 2.4.3(vue@3.3.10)
+  qrcode-vue3:
+    specifier: ^1.6.8
+    version: registry.npmmirror.com/qrcode-vue3@1.6.8
   sass:
     specifier: ^1.69.5
     version: 1.69.5
@@ -163,7 +166,7 @@ packages:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
-  /@codemirror/autocomplete@6.11.1(@codemirror/language@6.9.3)(@codemirror/state@6.3.2)(@codemirror/view@6.22.1)(@lezer/common@1.1.1):
+  /@codemirror/autocomplete@6.11.1(@codemirror/language@6.9.3)(@codemirror/state@6.3.3)(@codemirror/view@6.22.1)(@lezer/common@1.1.1):
     resolution: {integrity: sha512-L5UInv8Ffd6BPw0P3EF7JLYAMeEbclY7+6Q11REt8vhih8RuLreKtPy/xk8wPxs4EQgYqzI7cdgpiYwWlbS/ow==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
@@ -172,7 +175,7 @@ packages:
       '@lezer/common': ^1.0.0
     dependencies:
       '@codemirror/language': 6.9.3
-      '@codemirror/state': 6.3.2
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
       '@codemirror/view': 6.22.1
       '@lezer/common': 1.1.1
     dev: false
@@ -181,7 +184,7 @@ packages:
     resolution: {integrity: sha512-tjoi4MCWDNxgIpoLZ7+tezdS9OEB6pkiDKhfKx9ReJ/XBcs2G2RXIu+/FxXBlWsPTsz6C9q/r4gjzrsxpcnqCQ==}
     dependencies:
       '@codemirror/language': 6.9.3
-      '@codemirror/state': 6.3.2
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
       '@codemirror/view': 6.22.1
       '@lezer/common': 1.1.1
     dev: false
@@ -189,10 +192,10 @@ packages:
   /@codemirror/lang-javascript@6.2.1:
     resolution: {integrity: sha512-jlFOXTejVyiQCW3EQwvKH0m99bUYIw40oPmFjSX2VS78yzfe0HELZ+NEo9Yfo1MkGRpGlj3Gnu4rdxV1EnAs5A==}
     dependencies:
-      '@codemirror/autocomplete': 6.11.1(@codemirror/language@6.9.3)(@codemirror/state@6.3.2)(@codemirror/view@6.22.1)(@lezer/common@1.1.1)
+      '@codemirror/autocomplete': 6.11.1(@codemirror/language@6.9.3)(@codemirror/state@6.3.3)(@codemirror/view@6.22.1)(@lezer/common@1.1.1)
       '@codemirror/language': 6.9.3
       '@codemirror/lint': 6.4.2
-      '@codemirror/state': 6.3.2
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
       '@codemirror/view': 6.22.1
       '@lezer/common': 1.1.1
       '@lezer/javascript': 1.4.9
@@ -208,7 +211,7 @@ packages:
   /@codemirror/language@6.9.3:
     resolution: {integrity: sha512-qq48pYzoi6ldYWV/52+Z9Ou6QouVI+8YwvxFbUypI33NbjG2UeRHKENRyhwljTTiOqjQ33FjyZj6EREQ9apAOQ==}
     dependencies:
-      '@codemirror/state': 6.3.2
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
       '@codemirror/view': 6.22.1
       '@lezer/common': 1.1.1
       '@lezer/highlight': 1.2.0
@@ -219,7 +222,7 @@ packages:
   /@codemirror/lint@6.4.2:
     resolution: {integrity: sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==}
     dependencies:
-      '@codemirror/state': 6.3.2
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
       '@codemirror/view': 6.22.1
       crelt: 1.0.6
     dev: false
@@ -227,20 +230,16 @@ packages:
   /@codemirror/search@6.5.5:
     resolution: {integrity: sha512-PIEN3Ke1buPod2EHbJsoQwlbpkz30qGZKcnmH1eihq9+bPQx8gelauUwLYaY4vBOuBAuEhmpDLii4rj/uO0yMA==}
     dependencies:
-      '@codemirror/state': 6.3.2
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
       '@codemirror/view': 6.22.1
       crelt: 1.0.6
     dev: false
 
-  /@codemirror/state@6.3.2:
-    resolution: {integrity: sha512-5jEikOfU0r9y+OTlZn5AEQB15mibu3deLBUp+GnLzVUNezEEuPt/JdSeniQNi+0YviblAvOPO2JQAlgJ3SYYaA==}
-    dev: false
-
   /@codemirror/theme-one-dark@6.1.2:
     resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
     dependencies:
       '@codemirror/language': 6.9.3
-      '@codemirror/state': 6.3.2
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
       '@codemirror/view': 6.22.1
       '@lezer/highlight': 1.2.0
     dev: false
@@ -248,7 +247,7 @@ packages:
   /@codemirror/view@6.22.1:
     resolution: {integrity: sha512-38BRn1nPqZqiHbmWfI8zri23IbRVbmSpSmh1E/Ysvc+lIGGdBC17K8zlK7ZU6fhfy9x4De9Zyj5JQqScPq5DkA==}
     dependencies:
-      '@codemirror/state': 6.3.2
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
       style-mod: 4.1.0
       w3c-keyname: 2.2.8
     dev: false
@@ -737,6 +736,7 @@ packages:
   /ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
+    requiresBuild: true
     dev: false
 
   /ansi-styles@2.2.1:
@@ -4167,6 +4167,7 @@ packages:
 
   /tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    requiresBuild: true
     dev: false
 
   /tr46@1.0.1:
@@ -4468,7 +4469,7 @@ packages:
     dependencies:
       '@codemirror/commands': 6.3.2
       '@codemirror/language': 6.9.3
-      '@codemirror/state': 6.3.2
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
       '@codemirror/view': 6.22.1
       codemirror: registry.npmmirror.com/codemirror@6.0.1(@lezer/common@1.1.1)
       vue: 3.3.10(typescript@5.3.2)
@@ -4556,6 +4557,7 @@ packages:
 
   /webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    requiresBuild: true
     dev: false
 
   /webidl-conversions@4.0.2:
@@ -4580,6 +4582,7 @@ packages:
 
   /whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    requiresBuild: true
     dependencies:
       tr46: 0.0.3
       webidl-conversions: 3.0.1
@@ -4700,7 +4703,7 @@ packages:
       fd-slicer: 1.1.0
     dev: false
 
-  registry.npmmirror.com/@codemirror/autocomplete@6.11.1(@codemirror/language@6.9.3)(@codemirror/state@6.3.2)(@codemirror/view@6.22.1)(@lezer/common@1.1.1):
+  registry.npmmirror.com/@codemirror/autocomplete@6.11.1(@codemirror/language@6.9.3)(@codemirror/state@6.3.3)(@codemirror/view@6.22.2)(@lezer/common@1.1.1):
     resolution: {integrity: sha512-L5UInv8Ffd6BPw0P3EF7JLYAMeEbclY7+6Q11REt8vhih8RuLreKtPy/xk8wPxs4EQgYqzI7cdgpiYwWlbS/ow==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@codemirror/autocomplete/-/autocomplete-6.11.1.tgz}
     id: registry.npmmirror.com/@codemirror/autocomplete/6.11.1
     name: '@codemirror/autocomplete'
@@ -4712,8 +4715,8 @@ packages:
       '@lezer/common': ^1.0.0
     dependencies:
       '@codemirror/language': registry.npmmirror.com/@codemirror/language@6.9.3
-      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.2
-      '@codemirror/view': registry.npmmirror.com/@codemirror/view@6.22.1
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
+      '@codemirror/view': registry.npmmirror.com/@codemirror/view@6.22.2
       '@lezer/common': 1.1.1
     dev: false
 
@@ -4723,9 +4726,9 @@ packages:
     version: 6.3.2
     dependencies:
       '@codemirror/language': registry.npmmirror.com/@codemirror/language@6.9.3
-      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.2
-      '@codemirror/view': registry.npmmirror.com/@codemirror/view@6.22.1
-      '@lezer/common': registry.npmmirror.com/@lezer/common@1.1.1
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
+      '@codemirror/view': registry.npmmirror.com/@codemirror/view@6.22.2
+      '@lezer/common': registry.npmmirror.com/@lezer/common@1.1.2
     dev: false
 
   registry.npmmirror.com/@codemirror/language@6.9.3:
@@ -4733,9 +4736,9 @@ packages:
     name: '@codemirror/language'
     version: 6.9.3
     dependencies:
-      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.2
-      '@codemirror/view': registry.npmmirror.com/@codemirror/view@6.22.1
-      '@lezer/common': registry.npmmirror.com/@lezer/common@1.1.1
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
+      '@codemirror/view': registry.npmmirror.com/@codemirror/view@6.22.2
+      '@lezer/common': registry.npmmirror.com/@lezer/common@1.1.2
       '@lezer/highlight': registry.npmmirror.com/@lezer/highlight@1.2.0
       '@lezer/lr': registry.npmmirror.com/@lezer/lr@1.3.14
       style-mod: registry.npmmirror.com/style-mod@4.1.0
@@ -4746,8 +4749,8 @@ packages:
     name: '@codemirror/lint'
     version: 6.4.2
     dependencies:
-      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.2
-      '@codemirror/view': registry.npmmirror.com/@codemirror/view@6.22.1
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
+      '@codemirror/view': registry.npmmirror.com/@codemirror/view@6.22.2
       crelt: registry.npmmirror.com/crelt@1.0.6
     dev: false
 
@@ -4756,23 +4759,23 @@ packages:
     name: '@codemirror/search'
     version: 6.5.5
     dependencies:
-      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.2
-      '@codemirror/view': registry.npmmirror.com/@codemirror/view@6.22.1
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
+      '@codemirror/view': registry.npmmirror.com/@codemirror/view@6.22.2
       crelt: registry.npmmirror.com/crelt@1.0.6
     dev: false
 
-  registry.npmmirror.com/@codemirror/state@6.3.2:
-    resolution: {integrity: sha512-5jEikOfU0r9y+OTlZn5AEQB15mibu3deLBUp+GnLzVUNezEEuPt/JdSeniQNi+0YviblAvOPO2JQAlgJ3SYYaA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@codemirror/state/-/state-6.3.2.tgz}
+  registry.npmmirror.com/@codemirror/state@6.3.3:
+    resolution: {integrity: sha512-0wufKcTw2dEwEaADajjHf6hBy1sh3M6V0e+q4JKIhLuiMSe5td5HOWpUdvKth1fT1M9VYOboajoBHpkCd7PG7A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@codemirror/state/-/state-6.3.3.tgz}
     name: '@codemirror/state'
-    version: 6.3.2
+    version: 6.3.3
     dev: false
 
-  registry.npmmirror.com/@codemirror/view@6.22.1:
-    resolution: {integrity: sha512-38BRn1nPqZqiHbmWfI8zri23IbRVbmSpSmh1E/Ysvc+lIGGdBC17K8zlK7ZU6fhfy9x4De9Zyj5JQqScPq5DkA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@codemirror/view/-/view-6.22.1.tgz}
+  registry.npmmirror.com/@codemirror/view@6.22.2:
+    resolution: {integrity: sha512-cJp64cPXm7QfSBWEXK+76+hsZCGHupUgy8JAbSzMG6Lr0rfK73c1CaWITVW6hZVkOnAFxJTxd0PIuynNbzxYPw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@codemirror/view/-/view-6.22.2.tgz}
     name: '@codemirror/view'
-    version: 6.22.1
+    version: 6.22.2
     dependencies:
-      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.2
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
       style-mod: registry.npmmirror.com/style-mod@4.1.0
       w3c-keyname: registry.npmmirror.com/w3c-keyname@2.2.8
     dev: false
@@ -5068,10 +5071,10 @@ packages:
       '@jridgewell/sourcemap-codec': registry.npmmirror.com/@jridgewell/sourcemap-codec@1.4.15
     dev: false
 
-  registry.npmmirror.com/@lezer/common@1.1.1:
-    resolution: {integrity: sha512-aAPB9YbvZHqAW+bIwiuuTDGB4DG0sYNRObGLxud8cW7osw1ZQxfDuTZ8KQiqfZ0QJGcR34CvpTMDXEyo/+Htgg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@lezer/common/-/common-1.1.1.tgz}
+  registry.npmmirror.com/@lezer/common@1.1.2:
+    resolution: {integrity: sha512-V+GqBsga5+cQJMfM0GdnHmg4DgWvLzgMWjbldBg0+jC3k9Gu6nJNZDLJxXEBT1Xj8KhRN4jmbC5CY7SIL++sVw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@lezer/common/-/common-1.1.2.tgz}
     name: '@lezer/common'
-    version: 1.1.1
+    version: 1.1.2
     dev: false
 
   registry.npmmirror.com/@lezer/highlight@1.2.0:
@@ -5079,7 +5082,7 @@ packages:
     name: '@lezer/highlight'
     version: 1.2.0
     dependencies:
-      '@lezer/common': registry.npmmirror.com/@lezer/common@1.1.1
+      '@lezer/common': registry.npmmirror.com/@lezer/common@1.1.2
     dev: false
 
   registry.npmmirror.com/@lezer/lr@1.3.14:
@@ -5087,7 +5090,7 @@ packages:
     name: '@lezer/lr'
     version: 1.3.14
     dependencies:
-      '@lezer/common': registry.npmmirror.com/@lezer/common@1.1.1
+      '@lezer/common': registry.npmmirror.com/@lezer/common@1.1.2
     dev: false
 
   registry.npmmirror.com/@sxzz/popperjs-es@2.11.7:
@@ -5126,10 +5129,10 @@ packages:
     version: 7.0.15
     dev: false
 
-  registry.npmmirror.com/@types/node@20.10.3:
-    resolution: {integrity: sha512-XJavIpZqiXID5Yxnxv3RUDKTN5b81ddNC3ecsA0SoFXz/QU8OGBwZGMomiq0zw+uuqbL/krztv/DINAQ/EV4gg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/node/-/node-20.10.3.tgz}
+  registry.npmmirror.com/@types/node@20.10.4:
+    resolution: {integrity: sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/node/-/node-20.10.4.tgz}
     name: '@types/node'
-    version: 20.10.3
+    version: 20.10.4
     dependencies:
       undici-types: registry.npmmirror.com/undici-types@5.26.5
     dev: false
@@ -5341,7 +5344,7 @@ packages:
     hasBin: true
     dependencies:
       caniuse-lite: registry.npmmirror.com/caniuse-lite@1.0.30001566
-      electron-to-chromium: registry.npmmirror.com/electron-to-chromium@1.4.601
+      electron-to-chromium: registry.npmmirror.com/electron-to-chromium@1.4.609
       node-releases: registry.npmmirror.com/node-releases@2.0.14
       update-browserslist-db: registry.npmmirror.com/update-browserslist-db@1.0.13(browserslist@4.22.2)
     dev: false
@@ -5387,13 +5390,13 @@ packages:
     name: codemirror
     version: 6.0.1
     dependencies:
-      '@codemirror/autocomplete': registry.npmmirror.com/@codemirror/autocomplete@6.11.1(@codemirror/language@6.9.3)(@codemirror/state@6.3.2)(@codemirror/view@6.22.1)(@lezer/common@1.1.1)
+      '@codemirror/autocomplete': registry.npmmirror.com/@codemirror/autocomplete@6.11.1(@codemirror/language@6.9.3)(@codemirror/state@6.3.3)(@codemirror/view@6.22.2)(@lezer/common@1.1.1)
       '@codemirror/commands': registry.npmmirror.com/@codemirror/commands@6.3.2
       '@codemirror/language': registry.npmmirror.com/@codemirror/language@6.9.3
       '@codemirror/lint': registry.npmmirror.com/@codemirror/lint@6.4.2
       '@codemirror/search': registry.npmmirror.com/@codemirror/search@6.5.5
-      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.2
-      '@codemirror/view': registry.npmmirror.com/@codemirror/view@6.22.1
+      '@codemirror/state': registry.npmmirror.com/@codemirror/state@6.3.3
+      '@codemirror/view': registry.npmmirror.com/@codemirror/view@6.22.2
     transitivePeerDependencies:
       - '@lezer/common'
     dev: false
@@ -5410,10 +5413,10 @@ packages:
     version: 1.0.6
     dev: false
 
-  registry.npmmirror.com/electron-to-chromium@1.4.601:
-    resolution: {integrity: sha512-SpwUMDWe9tQu8JX5QCO1+p/hChAi9AE9UpoC3rcHVc+gdCGlbT3SGb5I1klgb952HRIyvt9wZhSz9bNBYz9swA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.601.tgz}
+  registry.npmmirror.com/electron-to-chromium@1.4.609:
+    resolution: {integrity: sha512-ihiCP7PJmjoGNuLpl7TjNA8pCQWu09vGyjlPYw1Rqww4gvNuCcmvl+44G+2QyJ6S2K4o+wbTS++Xz0YN8Q9ERw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.609.tgz}
     name: electron-to-chromium
-    version: 1.4.601
+    version: 1.4.609
     dev: false
 
   registry.npmmirror.com/enhanced-resolve@5.15.0:
@@ -5524,7 +5527,7 @@ packages:
     version: 27.5.1
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': registry.npmmirror.com/@types/node@20.10.3
+      '@types/node': registry.npmmirror.com/@types/node@20.10.4
       merge-stream: registry.npmmirror.com/merge-stream@2.0.0
       supports-color: registry.npmmirror.com/supports-color@8.1.1
     dev: false
@@ -5659,6 +5662,20 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  registry.npmmirror.com/qrcode-generator@1.4.4:
+    resolution: {integrity: sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/qrcode-generator/-/qrcode-generator-1.4.4.tgz}
+    name: qrcode-generator
+    version: 1.4.4
+    dev: false
+
+  registry.npmmirror.com/qrcode-vue3@1.6.8:
+    resolution: {integrity: sha512-LtMnwKWi58ZqHbXBcsTF/VxDYhI6RrBIrDQw8fbDVlO8p5tJBZa7TaIaVYLY937vKO2WCEBmOKksGlpm5ccEIg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/qrcode-vue3/-/qrcode-vue3-1.6.8.tgz}
+    name: qrcode-vue3
+    version: 1.6.8
+    dependencies:
+      qrcode-generator: registry.npmmirror.com/qrcode-generator@1.4.4
+    dev: false
+
   registry.npmmirror.com/randombytes@2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz}
     name: randombytes
@@ -5770,14 +5787,14 @@ packages:
       jest-worker: registry.npmmirror.com/jest-worker@27.5.1
       schema-utils: registry.npmmirror.com/schema-utils@3.3.0
       serialize-javascript: registry.npmmirror.com/serialize-javascript@6.0.1
-      terser: registry.npmmirror.com/terser@5.25.0
+      terser: registry.npmmirror.com/terser@5.26.0
       webpack: registry.npmmirror.com/webpack@5.89.0
     dev: false
 
-  registry.npmmirror.com/terser@5.25.0:
-    resolution: {integrity: sha512-we0I9SIsfvNUMP77zC9HG+MylwYYsGFSBG8qm+13oud2Yh+O104y614FRbyjpxys16jZwot72Fpi827YvGzuqg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/terser/-/terser-5.25.0.tgz}
+  registry.npmmirror.com/terser@5.26.0:
+    resolution: {integrity: sha512-dytTGoE2oHgbNV9nTzgBEPaqAWvcJNl66VZ0BkJqlvp71IjO8CxdBx/ykCNb47cLnCmCvRZ6ZR0tLkqvZCdVBQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/terser/-/terser-5.26.0.tgz}
     name: terser
-    version: 5.25.0
+    version: 5.26.0
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
diff --git a/src/components/Example/Example.vue b/src/components/Example/Example.vue
new file mode 100644
index 0000000..c7f31e3
--- /dev/null
+++ b/src/components/Example/Example.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import { copy } from '@/utils/string'
+const info = reactive({
+  title: "tool name",
+})
+
+//copy
+const copyRes = async (resStr: string) => {
+  copy(resStr)
+}
+</script>
+
+<template>
+  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+    <DetailHeader :title="info.title"></DetailHeader>
+
+    <div class="">
+      
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Palettes/Palettes.vue b/src/components/Palettes/Palettes.vue
new file mode 100644
index 0000000..239098f
--- /dev/null
+++ b/src/components/Palettes/Palettes.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import { copy } from '@/utils/string'
+const info = reactive({
+  title: "色板",
+  palettes: [
+    {
+      theme: 'last summer day',    // 
+      item: ['#A7C5C5', '#DEE0D5', '#E2AC48', '#B96028', '#983C2D'],
+    },
+    {
+      theme: 'Hazy Summer Afternoon',    // 
+      item: ['#26C4A5', '#54D99F', '#ACE08C', '#E8E284', '#F2B652'],
+    },
+    {
+      theme: 'Summering',    // 
+      item: ['#FFBE4C', '#B33127', '#93EDFF', '#648FAD', '#FFFFFF'],
+    },
+    {
+      theme: 'Bare August — Footcare Essentials',    // 
+      item: ['#F2636F', '#F2858E', '#F2AEB4', '#F27999', '#F2D9D0'],
+    },
+    {
+      theme: 'Big Vilnius Summer Loto',    // 
+      item: ['#D90416', '#BF2A45', '#528C49', '#BF7B54', '#F28D8D'],
+    },
+    {
+      theme: 'Illustration Design',    // 
+      item: ['#D9D2D6', '#010326', '#4C5D73', '#808C65', '#F2E750'],
+    },
+    {
+      theme: 'Beautiful tropical beach with blue sky and white clouds abstract texture background',    // 
+      item: ['#04B2D9', '#CEECF2', '#04C4D9', '#15BFBF', '#D9D0C7'],
+    },
+  ]
+})
+
+//copy
+const copyRes = async (resStr: string) => {
+  copy(resStr)
+}
+</script>
+
+<template>
+  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+    <DetailHeader :title="info.title"></DetailHeader>
+
+    <div class="">
+      <div class="flex flex-col">
+        <div v-for="(item, index) in info.palettes" :key="index" class="flex flex-col mb-3">
+          <div class="flex h-28 rounded-lg overflow-hidden items-center">
+            <span 
+              v-for="(color, index) in item.item"
+              :key="index" 
+              class="w-1/5 h-full color-palette" 
+              :style="'background-color:' + color + ';'" 
+              @click="copyRes(color)" 
+            >
+              <div class="color-text hidden flex items-center justify-center h-full w-full" :style="'color:' + color + ';'" >{{ color }}</div>
+            </span>
+            <!--  @change="(val: any) => (changeCheckBox(val, 3)) -->
+          </div>
+          <!-- <div class="">
+            <el-text>主题：{{ item.theme }}</el-text>
+          </div> -->
+          <el-divider v-if="index != item.item.length + 1"/>
+        </div>
+        
+      </div>
+      <div></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.color-palette:hover .color-text{
+  display: flex;
+  filter: grayscale(1) contrast(999) invert(1)
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Qrcode/Qrcode.vue b/src/components/Qrcode/Qrcode.vue
new file mode 100644
index 0000000..2407b38
--- /dev/null
+++ b/src/components/Qrcode/Qrcode.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { reactive,ref } from 'vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import QRCodeVue3 from 'qrcode-vue3'
+import { Delete, Plus } from '@element-plus/icons-vue'
+import { ElMessage, type UploadFile } from 'element-plus'
+const info = reactive({
+  title: "二维码生成",
+  content: '可在此输入文字或网址,右键图片另存为可保存图片',
+  width: 200,
+  height: 200,
+  size: '200',
+  sizeSelect: '',
+  margin: 1,
+  fileList: [],
+  fileUrl: '',
+  preColor: '#000',
+  bgColor: '#fff',
+  qrKey: 1,
+  errorCorrectionLevel: 'Q',
+})
+
+const uploadLogo = ref()
+
+//上传达到上限触发
+const handleExceed = () => {
+  ElMessage({
+    message: '上传数量已达上限，请清除后重新上传',
+    type: 'warning',
+  })
+}
+
+//设置尺寸
+const setQRSize = () => {
+  info.width = parseInt(info.size)
+  info.height = parseInt(info.size)
+}
+
+const handleChange = (file: UploadFile) => {
+  info.fileList.push(file.url)
+  info.fileUrl = info.fileList[0] ?? ''
+}
+
+const handleRemove = (file: UploadFile) => {
+  info.fileList = uploadLogo.value.handleRemove(file)
+}
+
+
+//生成二维码
+const gen = () => {
+  //设置尺寸
+  setQRSize()
+  info.qrKey += 1
+}
+</script>
+
+<template>
+  <div class="flex flex-col mt-3 ml-4 flex-1 mr-3">
+    <DetailHeader :title="info.title"></DetailHeader>
+
+    <div class="flex justify-between w-full">
+      <div class="w-4/6">
+        <div class="flex mb-3">
+          <div class="w-16 mr-2"><el-text>内容</el-text></div>
+          <el-input v-model="info.content" type="textarea" rows="3" class="w-full" placeholder="可在此输入文字或网址"></el-input>
+        </div>
+        <div class="flex mb-3">
+          <div class="w-16 mr-2"><el-text>尺寸</el-text></div>
+          <el-input v-model="info.size" class="">
+            <template #append>
+              <el-select v-model="info.size" class="w-32">
+                <el-option label="常规 200px" value="200" />
+                <el-option label="常规 300px" value="300" />
+                <el-option label="适中 350px" value="350" />
+                <el-option label="较大 500px" value="500" />
+                <!-- 分割线 start -->
+                <div class="flex justify-center bg-gray-200 w-full">
+                  <div class="h-[1px] bg-gray-200 w-4/5"></div>
+                </div>
+                <!-- 分割线 end -->
+                <el-option label="超大 1000px" value="1000" />
+                <el-option label="超大 1200px" value="1200" />
+              </el-select>
+            </template>
+          </el-input>
+        </div>
+        <div class="flex mb-3">
+          <el-text class="w-16">纠错级别</el-text>
+          <el-select v-model="info.errorCorrectionLevel" class="w-36">
+            <el-option label="L 可遮挡 7%" value="L" />
+            <el-option label="M 可遮挡 15%" value="M" />
+            <el-option label="Q 可遮挡 25%" value="Q" />
+            <el-option label="H 可遮挡 30%" value="H" />
+          </el-select>
+        </div>
+        <div class="flex mb-3">
+          <div class="w-16"><el-text>边距</el-text></div>
+          <el-input-number v-model="info.margin" :step="1" :min="0"/>
+        </div>
+        <div class="flex mb-3">
+          <div class="w-16"><el-text>颜色</el-text></div>
+          <!-- <div class="w-16 flex flex-col items-center bg-gray-100 p-1 rounded-md mr-2">
+            <el-text>前景色</el-text>
+            <el-color-picker v-model="info.preColor" />
+          </div> -->
+          <div class="w-16 flex flex-col items-center bg-gray-100 p-1 rounded-md">
+            <el-text>背景色</el-text>
+            <el-color-picker v-model="info.bgColor" />
+          </div>
+        </div>
+        <div class="flex mb-3">
+          <div class="w-16"><el-text>logo</el-text></div>
+          <el-upload 
+            ref="uploadLogo"
+            action="#" 
+            :auto-upload="false" 
+            :limit="1" 
+            list-type="picture-card" 
+            accept=".png,.ico,.jpg,.jpeg"
+            :on-change="handleChange"
+            :on-exceed="handleExceed">
+            <el-icon><Plus /></el-icon>
+            <template #file="{ file }">
+              <div class="border-2 w-full border-blue-400">
+                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+                <span class="el-upload-list__item-actions">
+                  <span
+                    class="el-upload-list__item-delete"
+                    @click="handleRemove(file)"
+                  >
+                    <el-icon><Delete /></el-icon>
+                  </span>
+                </span>
+              </div>
+            </template>
+          </el-upload>
+        </div>
+        <div class="flex mb-3">
+          <div class="w-16"></div>
+          <el-button type="primary" @click="gen">生成二维码</el-button>
+        </div>
+      </div>
+      <div>
+        <QRCodeVue3
+          :key="info.qrKey"
+          :width="info.width"
+          :height="info.height"
+          :value="info.content"
+          :margin="info.margin"
+          :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: info.errorCorrectionLevel }"
+          :imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
+          :image="info.fileList[0]"
+          :dotsOptions="{
+            type: 'none',
+            color: '#26249a',
+            gradient: {
+              type: 'linear',
+              rotation: 0,
+              colorStops: [
+                { offset: 0, color: '#26249a' },
+                { offset: 1, color: '#26249a' },
+              ],
+            },
+          }"
+          :backgroundOptions="{ color: info.bgColor }"
+          :cornersSquareOptions="{ type: 'square', color: '#000000' }"
+          :cornersDotOptions="{ type: undefined, color: '#000000' }"
+          fileExt="png"
+          myclass="my-qur"
+          imgclass="img-qr"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.my-button{
+  background-color:red;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Unit/Area.vue b/src/components/Unit/Area.vue
new file mode 100644
index 0000000..081caf9
--- /dev/null
+++ b/src/components/Unit/Area.vue
@@ -0,0 +1,415 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const lengthInfo: {
+  [key: string]: string|number
+} = reactive({
+  km: '',
+  m: '',
+  dm: '',
+  cm: '',
+  mm: '',
+  ha: '',
+  tradition_mu: '',
+  tradition_fen: '',
+  tradition_mill: '',
+  tradition_hao: '',
+  eng_nmi: '',
+  eng_mi: '',
+  eng_acre: '',
+  eng_rd: '',
+  eng_yd: '',
+  eng_ft: '',
+  eng_in: '',
+})
+
+//clear
+const clear = () => {
+  for (let item in lengthInfo) {
+    lengthInfo[item] = ''
+  }
+}
+
+/**
+ * 转换
+ * @param type 
+ */
+const tran = (key: string) => {
+  //转换成平方米
+  switch (key) {
+    case 'km':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * (1000 * 1000)
+      break;
+    case 'm':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1
+      break;
+    case 'dm':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.01
+      break;
+    case 'cm':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.0001
+      break;
+    case 'mm':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.000001
+      break;
+    case 'ha':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 10000
+      break;
+    case 'tradition_mu':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 666.6666667
+      lengthInfo.tradition_mu = parseFloat(lengthInfo[key] as string) * 1
+      break;
+    case 'tradition_fen':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 66.67
+      lengthInfo.tradition_mu = parseFloat(lengthInfo[key] as string) * 0.1
+      break;
+    case 'tradition_mill':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 6.67
+      lengthInfo.tradition_mu = parseFloat(lengthInfo[key] as string) * 0.01
+      break;
+    case 'tradition_hao':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.67
+      lengthInfo.tradition_mu = parseFloat(lengthInfo[key] as string) * 0.001
+      break;
+    case 'eng_nmi':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * (1852 * 1852)
+      break;
+    case 'eng_mi':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 2589988.110336
+      lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 27878400
+      break;
+    case 'eng_acre':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 4046.8564224
+      lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 43560
+      break;
+    case 'eng_rd':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 25.2928526
+      lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 272.25
+      break;
+    case 'eng_yd':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.8361274
+      lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 9
+      break;
+    case 'eng_ft':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.092903
+      lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 1
+      break;
+    case 'eng_in':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.0006452
+      lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 0.0069444
+      break;
+    default:
+      break;
+  }
+
+  //平方米转换成其他单位
+  let mVal = lengthInfo.m as number
+  //传统面积处理
+  let muVal = mVal * 0.0015
+  if (['tradition_mu', 'tradition_fen', 'tradition_mill', 'tradition_hao'].includes(key)) {
+    muVal = (lengthInfo.tradition_mu == '' ? muVal : lengthInfo.tradition_mu) as number
+  }
+  //英制
+  let engFtVal = mVal / 0.092903
+  if (['eng_mi', 'eng_acre', 'eng_rd', 'eng_yd', 'eng_ft', 'eng_in'].includes(key)) {
+    engFtVal = (lengthInfo.eng_ft == '' ? engFtVal : lengthInfo.eng_ft) as number
+  }
+
+  lengthInfo.km = mVal * 0.000001
+  lengthInfo.dm = mVal * 100
+  lengthInfo.cm = mVal * 10000
+  lengthInfo.mm = mVal * 1000000
+  lengthInfo.ha = mVal * 0.0001
+
+  lengthInfo.tradition_mu = muVal
+  lengthInfo.tradition_fen = muVal / 0.1
+  lengthInfo.tradition_mill = muVal / 0.01
+  lengthInfo.tradition_hao = muVal / 0.001
+
+  lengthInfo.eng_nmi = mVal / (1852 * 1852)
+  lengthInfo.eng_mi = engFtVal / 27878400
+  lengthInfo.eng_acre = engFtVal / 43560
+  lengthInfo.eng_rd = engFtVal / 272.25
+  lengthInfo.eng_yd = engFtVal / 9
+  lengthInfo.eng_ft = engFtVal
+  lengthInfo.eng_in = engFtVal / 0.0069444
+}
+
+</script>
+
+<template>
+    <div>
+      <div>
+        <el-divider content-position="left">国际面积单位(公制)</el-divider>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">平方千米(km<sup>2</sup>)</el-text>
+            <el-input
+              v-model="lengthInfo.km"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('km')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">平方米(m<sup>2</sup>)</el-text>
+            <el-input
+              v-model="lengthInfo.m"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('m')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">平方分米(dm<sup>2</sup>)</el-text>
+            <el-input
+              v-model="lengthInfo.dm"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('dm')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">平方厘米(cm<sup>2</sup>)</el-text>
+            <el-input
+              v-model="lengthInfo.cm"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('cm')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">平方毫米(mm<sup>2</sup>)</el-text>
+            <el-input
+              v-model="lengthInfo.mm"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('mm')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">公顷(ha)</el-text>
+            <el-input
+              v-model="lengthInfo.ha"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('ha')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <el-divider content-position="left">中国传统面积单位(市制)</el-divider>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">亩</el-text>
+            <el-input
+              v-model="lengthInfo.tradition_mu"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('tradition_mu')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">分</el-text>
+            <el-input
+              v-model="lengthInfo.tradition_fen"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('tradition_fen')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">厘</el-text>
+            <el-input
+              v-model="lengthInfo.tradition_mill"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('tradition_mill')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">毫</el-text>
+            <el-input
+              v-model="lengthInfo.tradition_hao"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('tradition_hao')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <el-divider content-position="left">英制面积单位</el-divider>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">平方海里(nmi<sup>2</sup>)</el-text>
+            <el-input
+              v-model="lengthInfo.eng_nmi"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('eng_nmi')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">平方英里(mi<sup>2</sup>)</el-text>
+            <el-input
+              v-model="lengthInfo.eng_mi"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('eng_mi')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">英亩(acre)</el-text>
+            <el-input
+              v-model="lengthInfo.eng_acre"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('eng_acre')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">平方竿(rd<sup>2</sup>)</el-text>
+            <el-input
+              v-model="lengthInfo.eng_rd"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('eng_rd')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">平方码(yd<sup>2</sup>)</el-text>
+            <el-input
+              v-model="lengthInfo.eng_yd"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('eng_yd')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">平方英尺(ft<sup>2</sup>)</el-text>
+            <el-input
+              v-model="lengthInfo.eng_ft"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('eng_ft')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">平方英寸(in<sup>2</sup>)</el-text>
+            <el-input
+              v-model="lengthInfo.eng_in"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('eng_in')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+      </div>
+
+      <div class="w-full text-center">
+        <el-button type="primary" @click="clear">清除全部</el-button>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+.custom-box{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.75rem/* 12px */;
+}
+.custom-box-single{
+  display: flex;
+  width: 50%;
+}
+.custom-box-text{
+  text-align: center;
+  width: 10rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Unit/Heat.vue b/src/components/Unit/Heat.vue
new file mode 100644
index 0000000..0ac8fd2
--- /dev/null
+++ b/src/components/Unit/Heat.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const info: {
+  [key: string]: string|number
+} = reactive({
+  wh: '',
+  mmwh: '',
+  kwh: '',
+  mwh: '',
+  j: '',
+  kj: '',
+})
+
+//clear
+const clear = () => {
+  for (let item in info) {
+    info[item] = ''
+  }
+}
+
+/**
+ * 转换
+ * @param type 
+ */
+const tran = (key: string) => {
+  //转换成瓦
+  switch (key) {
+    case 'wh':
+      info.wh = parseFloat(info[key] as string) * 1
+      break;
+    case 'mmwh':
+      info.wh = parseFloat(info[key] as string) * 0.001
+      break;
+    case 'kwh':
+      info.wh = parseFloat(info[key] as string) * 1000
+      break;
+    case 'mwh':
+      info.wh = parseFloat(info[key] as string) * 1000000
+      break;
+    case 'j':
+      info.wh = parseFloat(info[key] as string) * 0.0002777777777777778
+      break;
+    case 'kj':
+      info.wh = parseFloat(info[key] as string) * 0.2777777777777778
+      break;
+    default:
+      break;
+  }
+
+  //转换成其他单位
+  let val = info.wh as number
+  info.mmwh = val / 0.001
+  info.kwh = val / 1000
+  info.mwh = val / 1000000
+  info.j = val / 0.0002777777777777778
+  info.kj = info.j / 1000
+}
+
+</script>
+
+<template>
+    <div>
+      <div>
+        <el-divider content-position="left">热量单位</el-divider>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">瓦(Wh)</el-text>
+            <el-input
+              v-model="info.wh"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('wh')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">毫瓦时(mWh)</el-text>
+            <el-input
+              v-model="info.mmwh"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('mmwh')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">千瓦时(kWh)</el-text>
+            <el-input
+              v-model="info.kwh"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('kwh')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">兆瓦时(MWh)</el-text>
+            <el-input
+              v-model="info.mwh"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('mwh')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">焦(J)</el-text>
+            <el-input
+              v-model="info.j"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('j')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">千焦(kJ)</el-text>
+            <el-input
+              v-model="info.kj"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('kj')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="w-full text-center">
+        <el-button type="primary" @click="clear">清除全部</el-button>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+.custom-box{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.75rem/* 12px */;
+}
+.custom-box-single{
+  display: flex;
+  width: 50%;
+}
+.custom-box-text{
+  text-align: center;
+  width: 10rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Unit/Length.vue b/src/components/Unit/Length.vue
new file mode 100644
index 0000000..a5ff54e
--- /dev/null
+++ b/src/components/Unit/Length.vue
@@ -0,0 +1,512 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const lengthInfo: {
+  [key: string]: string|number
+} = reactive({
+  km: '',
+  m: '',
+  dm: '',
+  cm: '',
+  mm: '',
+  dmm: '',
+  um: '',
+  nm: '',
+  tradition_li: '',
+  tradition_zhang: '',
+  tradition_chi: '',
+  tradition_cun: '',
+  tradition_fen: '',
+  tradition_mill: '',
+  tradition_hao: '',
+  eng_nmi: '',
+  eng_fm: '',
+  eng_mi: '',
+  eng_fur: '',
+  eng_yd: '',
+  eng_ft: '',
+  eng_in: '',
+})
+
+//clear
+const clear = () => {
+  for (let item in lengthInfo) {
+    lengthInfo[item] = ''
+  }
+}
+
+/**
+ * 转换
+ * @param type 
+ */
+const tran = (key: string) => {
+  //转换成米
+  switch (key) {
+    case 'km':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1000
+      break;
+    case 'm':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1
+      break;
+    case 'dm':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.1
+      break;
+    case 'cm':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.01
+      break;
+    case 'mm':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.001
+      break;
+    case 'dmm':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.0001
+      break;
+    case 'um':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.000001
+      break;
+    case 'nm':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.000000001
+      break;
+    case 'tradition_li':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 500
+      lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 1500
+      break;
+    case 'tradition_zhang':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 3.3333333
+      lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 10
+      break;
+    case 'tradition_chi':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.3
+      lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 1
+      break;
+    case 'tradition_cun':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.03
+      lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 0.1
+      break;
+    case 'tradition_fen':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.003
+      lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 0.01
+      break;
+    case 'tradition_mill':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.0003
+      lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 0.001
+      break;
+    case 'tradition_hao':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.00003
+      lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 0.0001
+      break;
+    case 'eng_nmi':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1852
+      break;
+    case 'eng_fm':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1.852
+      lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 6
+      break;
+    case 'eng_mi':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1609.34
+      lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 5280
+      break;
+    case 'eng_fur':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 201.168
+      lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 660
+      break;
+    case 'eng_yd':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.9144
+      lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 3
+      break;
+    case 'eng_ft':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.3048
+      lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 1
+      break;
+    case 'eng_in':
+      lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.0254
+      break;
+    default:
+      break;
+  }
+
+  //米转换成其他单位
+  let mVal = lengthInfo.m as number
+  //中国传统单位处理
+  let chiVal = mVal * 3
+  if (['tradition_li', 'tradition_zhang', 'tradition_chi', 'tradition_cun', 'tradition_fen', 'tradition_mill', 'tradition_hao'].includes(key)) {
+    chiVal =  (lengthInfo.tradition_chi == '' ? chiVal : lengthInfo.tradition_chi) as number
+  }
+  //英制处理
+  let engFtVal = mVal / 0.3048
+  if (['eng_fm', 'eng_mi', 'eng_fur', 'eng_yd', 'eng_ft'].includes(key)) {
+    engFtVal = (lengthInfo.eng_ft == '' ? mVal / 0.3048 : lengthInfo.eng_ft) as number
+  }
+  lengthInfo.km = mVal / 1000
+  lengthInfo.dm = mVal * 10
+  lengthInfo.cm = mVal * 100
+  lengthInfo.mm = mVal * 1000
+  lengthInfo.dmm = mVal * 10000
+  lengthInfo.um = mVal * 1000000
+  lengthInfo.nm = mVal * 1000000000
+  lengthInfo.tradition_li = mVal / 500
+  lengthInfo.tradition_chi = chiVal
+  lengthInfo.tradition_zhang = chiVal / 10
+  lengthInfo.tradition_cun = chiVal / 0.1
+  lengthInfo.tradition_fen = chiVal / 0.01
+  lengthInfo.tradition_mill = chiVal / 0.001
+  lengthInfo.tradition_hao = chiVal / 0.0001
+  lengthInfo.eng_nmi = mVal / 1852
+  lengthInfo.eng_ft = engFtVal
+  lengthInfo.eng_fm = engFtVal / 6
+  lengthInfo.eng_mi = engFtVal / 5280
+  lengthInfo.eng_fur = engFtVal / 660
+  lengthInfo.eng_yd = engFtVal / 3
+  lengthInfo.eng_in = engFtVal * 12
+}
+</script>
+
+<template>
+    <div>
+      <div>
+        <el-divider content-position="left">国际长度单位(公制)</el-divider>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">公里(km)</el-text>
+            <el-input
+              v-model="lengthInfo.km"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('km')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">米(m)</el-text>
+            <el-input
+              v-model="lengthInfo.m"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('m')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">分米(dm)</el-text>
+            <el-input
+              v-model="lengthInfo.dm"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('dm')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">厘米(cm)</el-text>
+            <el-input
+              v-model="lengthInfo.cm"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('cm')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">毫米(mm)</el-text>
+            <el-input
+              v-model="lengthInfo.mm"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('mm')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">丝(dmm)</el-text>
+            <el-input
+              v-model="lengthInfo.dmm"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('dmm')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">微米(um)</el-text>
+            <el-input
+              v-model="lengthInfo.um"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('um')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">纳米(nm)</el-text>
+            <el-input
+              v-model="lengthInfo.nm"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('nm')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <el-divider content-position="left">中国传统长度单位(市制)</el-divider>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">里</el-text>
+            <el-input
+              v-model="lengthInfo.tradition_li"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('tradition_li')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">丈</el-text>
+            <el-input
+              v-model="lengthInfo.tradition_zhang"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('tradition_zhang')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">尺</el-text>
+            <el-input
+              v-model="lengthInfo.tradition_chi"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('tradition_chi')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">寸</el-text>
+            <el-input
+              v-model="lengthInfo.tradition_cun"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('tradition_cun')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">分</el-text>
+            <el-input
+              v-model="lengthInfo.tradition_fen"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('tradition_fen')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">厘</el-text>
+            <el-input
+              v-model="lengthInfo.tradition_mill"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('tradition_mill')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">毫</el-text>
+            <el-input
+              v-model="lengthInfo.tradition_hao"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('tradition_hao')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <el-divider content-position="left">英制长度单位</el-divider>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">海里(nmi)</el-text>
+            <el-input
+              v-model="lengthInfo.eng_nmi"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('eng_nmi')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">英寻(fm)</el-text>
+            <el-input
+              v-model="lengthInfo.eng_fm"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('eng_fm')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">英里(mi)</el-text>
+            <el-input
+              v-model="lengthInfo.eng_mi"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('eng_mi')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">弗隆(fur)</el-text>
+            <el-input
+              v-model="lengthInfo.eng_fur"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('eng_fur')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">码(yd)</el-text>
+            <el-input
+              v-model="lengthInfo.eng_yd"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('eng_yd')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">英尺(ft)</el-text>
+            <el-input
+              v-model="lengthInfo.eng_ft"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('eng_ft')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">英寸(in)</el-text>
+            <el-input
+              v-model="lengthInfo.eng_in"
+              placeholder=""
+              class="input-with-select"
+              type="number"
+            >
+              <template #append>
+                <el-button @click="tran('eng_in')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+      </div>
+
+      <div class="w-full text-center">
+        <el-button type="primary" @click="clear">清除全部</el-button>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+.custom-box{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.75rem/* 12px */;
+}
+.custom-box-single{
+  display: flex;
+  width: 45%;
+}
+.custom-box-text{
+  text-align: center;
+  width: 5rem/* 80px */;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Unit/Power.vue b/src/components/Unit/Power.vue
new file mode 100644
index 0000000..c25b16c
--- /dev/null
+++ b/src/components/Unit/Power.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const info: {
+  [key: string]: string|number
+} = reactive({
+  w: '',
+  mmw: '',
+  kw: '',
+  mw: '',
+  gw: '',
+})
+
+//clear
+const clear = () => {
+  for (let item in info) {
+    info[item] = ''
+  }
+}
+
+/**
+ * 转换
+ * @param type 
+ */
+const tran = (key: string) => {
+//转换成瓦
+switch (key) {
+    case 'w':
+      info.w = parseFloat(info[key] as string) * 1
+      break;
+    case 'mmw':
+      info.w = parseFloat(info[key] as string) * 0.001
+      break;
+    case 'kw':
+      info.w = parseFloat(info[key] as string) * 1000
+      break;
+    case 'mw':
+      info.w = parseFloat(info[key] as string) * 1000000
+      break;
+    case 'gw':
+      info.w = parseFloat(info[key] as string) * 1000000000
+      break;
+    default:
+      break;
+  }
+
+  //转换成其他单位
+  let val = info.w as number
+  info.mmw = val / 0.001
+  info.kw = val / 1000
+  info.mw = val / 1000000
+  info.gw = val / 1000000000
+}
+
+</script>
+
+<template>
+    <div>
+      <div>
+        <el-divider content-position="left">功率单位</el-divider>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">瓦(W)</el-text>
+            <el-input
+              v-model="info.w"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('w')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">毫瓦(mW)</el-text>
+            <el-input
+              v-model="info.mmw"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('mmw')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">千瓦(kW)</el-text>
+            <el-input
+              v-model="info.kw"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('kw')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">兆瓦(MW)</el-text>
+            <el-input
+              v-model="info.mw"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('mw')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">亿瓦(GW)</el-text>
+            <el-input
+              v-model="info.gw"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('gw')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="w-full text-center">
+        <el-button type="primary" @click="clear">清除全部</el-button>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+.custom-box{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.75rem/* 12px */;
+}
+.custom-box-single{
+  display: flex;
+  width: 50%;
+}
+.custom-box-text{
+  text-align: center;
+  width: 10rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Unit/Pressure.vue b/src/components/Unit/Pressure.vue
new file mode 100644
index 0000000..f54df99
--- /dev/null
+++ b/src/components/Unit/Pressure.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const info: {
+  [key: string]: string|number
+} = reactive({
+  pa: '',
+  hpa: '',
+  kpa: '',
+  mpa: '',
+  bar: '',
+  torr: '',
+  psi: '',
+})
+
+//clear
+const clear = () => {
+  for (let item in info) {
+    info[item] = ''
+  }
+}
+
+/**
+ * 转换
+ * @param type 
+ */
+const tran = (key: string) => {
+  //转换成帕
+  switch (key) {
+    case 'pa':
+      info.pa = parseFloat(info[key] as string) * 1
+      break;
+    case 'hpa':
+      info.pa = parseFloat(info[key] as string) * 100
+      break;
+    case 'kpa':
+      info.pa = parseFloat(info[key] as string) * 1000
+      break;
+    case 'mpa':
+      info.pa = parseFloat(info[key] as string) * 1000000
+      break;
+    case 'bar':
+      info.pa = parseFloat(info[key] as string) * 100000
+      break;
+    case 'torr':
+      info.pa = parseFloat(info[key] as string) * 133.322368
+      break;
+    case 'psi':
+      info.pa = parseFloat(info[key] as string) * 6894.76
+      break;
+    default:
+      break;
+  }
+
+  //转换成其他单位
+  let val = info.pa as number
+  info.hpa = val / 100
+  info.kpa = val / 1000
+  info.mpa = val / 1000000
+  info.bar = val / 100000
+  info.torr = val / 133.322368
+  info.psi = val / 6894.76
+}
+
+</script>
+
+<template>
+    <div>
+      <div>
+        <el-divider content-position="left">压力单位</el-divider>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">帕(Pa)</el-text>
+            <el-input
+              v-model="info.pa"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('pa')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">百帕(hPa)</el-text>
+            <el-input
+              v-model="info.hpa"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('hpa')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">千帕(kPa)</el-text>
+            <el-input
+              v-model="info.kpa"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('kpa')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">兆帕(MPa)</el-text>
+            <el-input
+              v-model="info.mpa"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('mpa')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">巴(bar)</el-text>
+            <el-input
+              v-model="info.bar"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('bar')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">托(torr)</el-text>
+            <el-input
+              v-model="info.torr"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('torr')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text" style="font-size: 0.8rem;;">磅力/平方英寸(psi)</el-text>
+            <el-input
+              v-model="info.psi"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('psi')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="w-full text-center">
+        <el-button type="primary" @click="clear">清除全部</el-button>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+.custom-box{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.75rem/* 12px */;
+}
+.custom-box-single{
+  display: flex;
+  width: 50%;
+}
+.custom-box-text{
+  text-align: center;
+  width: 10rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Unit/Temperature.vue b/src/components/Unit/Temperature.vue
new file mode 100644
index 0000000..cb878ee
--- /dev/null
+++ b/src/components/Unit/Temperature.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const info: {
+  [key: string]: string|number
+} = reactive({
+  c: '',
+  f: '',
+  k: '',
+  re: '',
+  r: '',
+})
+
+//clear
+const clear = () => {
+  for (let item in info) {
+    info[item] = ''
+  }
+}
+
+/**
+ * 转换
+ * @param type 
+ */
+const tran = (key: string) => {
+  //转换成摄氏度
+  switch (key) {
+    case 'c':
+      info.c = parseFloat(info[key] as string) * 1
+      break;
+    case 'f':
+      info.c = parseFloat(info[key] as string) * -17.2222222
+      break;
+    case 'k':
+      info.c = parseFloat(info[key] as string) * -272.15
+      break;
+    case 're':
+      info.c = parseFloat(info[key] as string) * 1.25
+      break;
+    case 'r':
+      info.c = parseFloat(info[key] as string) * -272.5944444
+      break;
+    default:
+      break;
+  }
+
+  //转换成其他单位
+  let val = info.c as number
+  info.f = 32 + (val * 1.8)
+  info.k = 273.15 + val
+  info.re = val / 1.25
+  info.r = (val + 273.15) * 1.8
+}
+
+</script>
+
+<template>
+    <div>
+      <div>
+        <el-divider content-position="left">国际温度单位</el-divider>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">摄氏度(℃)</el-text>
+            <el-input
+              v-model="info.c"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('c')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">华氏度(℉)</el-text>
+            <el-input
+              v-model="info.f"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('f')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">开氏度(K)</el-text>
+            <el-input
+              v-model="info.k"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('k')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">列氏度(°Re)</el-text>
+            <el-input
+              v-model="info.re"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('re')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">兰氏度(°R)</el-text>
+            <el-input
+              v-model="info.r"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('r')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="w-full text-center">
+        <el-button type="primary" @click="clear">清除全部</el-button>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+.custom-box{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.75rem/* 12px */;
+}
+.custom-box-single{
+  display: flex;
+  width: 50%;
+}
+.custom-box-text{
+  text-align: center;
+  width: 10rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Unit/Time.vue b/src/components/Unit/Time.vue
new file mode 100644
index 0000000..b2a755f
--- /dev/null
+++ b/src/components/Unit/Time.vue
@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const info: {
+  [key: string]: string|number
+} = reactive({
+  year: '',
+  month: '',
+  d: '',
+  h: '',
+  min: '',
+  s: '',
+  ms: '',
+  week: ''
+})
+
+//clear
+const clear = () => {
+  for (let item in info) {
+    info[item] = ''
+  }
+}
+
+/**
+ * 转换
+ * @param type 
+ */
+const tran = (key: string) => {
+  //转换成秒
+  switch (key) {
+    case 'year':
+      info.s = parseFloat(info[key] as string) * 31536000
+      break;
+    case 'month':
+      info.s = parseFloat(info[key] as string) * 2629800
+      break;
+    case 'd':
+      info.s = parseFloat(info[key] as string) * 86400
+      break;
+    case 'h':
+      info.s = parseFloat(info[key] as string) * 3600
+      break;
+    case 'min':
+      info.s = parseFloat(info[key] as string) * 60
+      break;
+    case 's':
+      info.s = parseFloat(info[key] as string) * 1
+      break;
+    case 'ms':
+      info.s = parseFloat(info[key] as string) * 0.001
+      break;
+    case 'week':
+      info.s = parseFloat(info[key] as string) * 604800
+      break;
+    default:
+      break;
+  }
+
+  //转换成其他单位
+  let val = info.s as number
+  info.year = val / 31536000
+  info.month = info.year * 12
+  info.d = val / 86400
+  info.h = val / 3600
+  info.min = val / 60
+  info.ms = val / 0.001
+  info.week = val / 604800
+}
+
+</script>
+
+<template>
+    <div>
+      <div>
+        <el-divider content-position="left">国际时间单位</el-divider>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">年(year)</el-text>
+            <el-input
+              v-model="info.year"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('year')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">月(month)</el-text>
+            <el-input
+              v-model="info.month"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('month')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">日(d)</el-text>
+            <el-input
+              v-model="info.d"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('d')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">时(h)</el-text>
+            <el-input
+              v-model="info.h"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('h')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">分(min)</el-text>
+            <el-input
+              v-model="info.min"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('min')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">秒(s)</el-text>
+            <el-input
+              v-model="info.s"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('s')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">毫秒(ms)</el-text>
+            <el-input
+              v-model="info.ms"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('ms')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">周(week)</el-text>
+            <el-input
+              v-model="info.week"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('week')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="w-full text-center">
+        <el-button type="primary" @click="clear">清除全部</el-button>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+.custom-box{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.75rem/* 12px */;
+}
+.custom-box-single{
+  display: flex;
+  width: 50%;
+}
+.custom-box-text{
+  text-align: center;
+  width: 10rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Unit/Unit.vue b/src/components/Unit/Unit.vue
new file mode 100644
index 0000000..3be08d5
--- /dev/null
+++ b/src/components/Unit/Unit.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
+import Length from './Length.vue'
+import Area from './Area.vue'
+import Heat from './Heat.vue'
+import Power from './Power.vue'
+import Pressure from './Pressure.vue'
+import Temperature from './Temperature.vue'
+import Time from './Time.vue'
+import Weight from './Weight.vue'
+const info = reactive({
+  title: "单位转换",
+  activeName: 'lengthTab',
+})
+
+const handleClick = () => {
+
+}
+</script>
+
+<template>
+  <div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
+    <DetailHeader :title="info.title"></DetailHeader>
+    <div>
+      <div>
+        <el-tabs v-model="info.activeName" class="demo-tabs" @tab-click="handleClick">
+          <el-tab-pane label="长度" name="lengthTab">
+            <Length/>
+          </el-tab-pane>
+          <el-tab-pane label="面积" name="areaTab">
+            <Area/>
+          </el-tab-pane>
+          <!-- <el-tab-pane label="体积" name="lengthTab">体积</el-tab-pane> -->
+          <el-tab-pane label="重量" name="weightTab">
+            <Weight/>
+          </el-tab-pane>
+          <el-tab-pane label="时间" name="timeTab">
+            <Time/>
+          </el-tab-pane>
+          <!-- <el-tab-pane label="角度" name="fourth">角度</el-tab-pane> -->
+          <!-- <el-tab-pane label="速度" name="fourth">速度</el-tab-pane> -->
+          <el-tab-pane label="温度" name="temperatureTab">
+            <Temperature/>
+          </el-tab-pane>
+          <el-tab-pane label="压力" name="pressureTab">
+            <Pressure/>
+          </el-tab-pane>
+          <el-tab-pane label="热量" name="heatTab">
+            <Heat/>
+          </el-tab-pane>
+          <el-tab-pane label="功率" name="powerTab">
+            <Power/>
+          </el-tab-pane>
+          <!-- <el-tab-pane label="字节" name="fourth">字节</el-tab-pane> -->
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.custom-box{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.75rem/* 12px */;
+}
+.custom-box-single{
+  display: flex;
+  width: 45%;
+}
+.custom-box-text{
+  text-align: center;
+  width: 5rem/* 80px */;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Unit/Weight.vue b/src/components/Unit/Weight.vue
new file mode 100644
index 0000000..d1a552f
--- /dev/null
+++ b/src/components/Unit/Weight.vue
@@ -0,0 +1,447 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const info: {
+  [key: string]: string|number
+} = reactive({
+  t: '',
+  kg: '',
+  g: '',
+  mg: '',
+
+  jin: '',
+  liang: '',
+  qian: '',
+  dan: '',
+
+  eng_lb: '',
+  eng_oz: '',
+  eng_st: '',
+  eng_cwt: '',
+  eng_dr: '',
+  eng_gr: '',
+  eng_lt: '',
+
+  eng_lbt: '',
+  eng_ozt: '',
+  eng_grain: '',
+  eng_dwt: '',
+})
+
+//clear
+const clear = () => {
+  for (let item in info) {
+    info[item] = ''
+  }
+}
+
+/**
+ * 转换
+ * @param type 
+ */
+const tran = (key: string) => {
+  switch (key) {
+    case 't':
+      info.g = parseFloat(info[key] as string) * 1000000
+      break;
+    case 'kg':
+      info.g = parseFloat(info[key] as string) * 1000
+      break;
+    case 'g':
+      info.g = parseFloat(info[key] as string) * 1
+      break;
+    case 'mg':
+      info.g = parseFloat(info[key] as string) * 0.001
+      break;
+
+    case 'jin':
+      info.g = parseFloat(info[key] as string) * 500
+      break;
+    case 'liang':
+      info.g = parseFloat(info[key] as string) * 50
+      break;
+    case 'qian':
+      info.g = parseFloat(info[key] as string) * 5
+      break;
+    case 'dan':
+      info.g = parseFloat(info[key] as string) * 50000
+      break;
+
+    case 'eng_lb':
+      info.g = parseFloat(info[key] as string) * 453.59237
+      info.eng_lb = parseFloat(info[key] as string) * 1
+      break;
+    case 'eng_oz':
+      info.g = parseFloat(info[key] as string) * 28.3495231
+      info.eng_lb = parseFloat(info[key] as string) * 0.0625
+      break;
+    case 'eng_st':
+      info.g = parseFloat(info[key] as string) * 6350.29318
+      info.eng_lb = parseFloat(info[key] as string) * 14
+      break;
+    case 'eng_cwt':
+      info.g = parseFloat(info[key] as string) * 50802.34544
+      info.eng_lb = parseFloat(info[key] as string) * 112
+      break;
+    case 'eng_dr':
+      info.g = parseFloat(info[key] as string) * 1.7718452
+      info.eng_lb = parseFloat(info[key] as string) * 0.0039063
+      break;
+    case 'eng_gr':
+      info.g = parseFloat(info[key] as string) * 0.0647989
+      info.eng_lb = parseFloat(info[key] as string) * 0.0001429
+      break;
+    case 'eng_lt':
+      info.g = parseFloat(info[key] as string) * 1016046.9088
+      info.eng_lb = parseFloat(info[key] as string) * 2240
+      break;
+    
+    case 'eng_lbt':
+      info.g = parseFloat(info[key] as string) * 373.2417216
+      info.eng_lbt = parseFloat(info[key] as string) * 1
+      break;
+    case 'eng_ozt':
+      info.g = parseFloat(info[key] as string) * 31.1034768
+      info.eng_lbt = parseFloat(info[key] as string) * 0.0833333
+      break;
+    case 'eng_grain':
+      info.g = parseFloat(info[key] as string) * 0.0647989
+      info.eng_lbt = parseFloat(info[key] as string) * 0.0001736
+      break;
+    case 'eng_dwt':
+      info.g = parseFloat(info[key] as string) * 1.5551738
+      info.eng_lbt = parseFloat(info[key] as string) * 0.0041667
+      break;
+    default:
+      break;
+  }
+
+  //转换成其他单位
+  let val = info.g as number
+  //英制 - 常衡制
+  let engLbVal = val / 453.59237
+  if (['tradition_mu', 'tradition_fen', 'tradition_mill', 'tradition_hao'].includes(key)) {
+    engLbVal = (info.eng_lb == '' ? engLbVal : info.eng_lb) as number
+  }
+  //英制 - 金衡制
+  let engLbtVal = val / 373.2417216
+  if (['eng_lbt', 'eng_ozt', 'eng_grain', 'eng_dwt'].includes(key)) {
+    engLbtVal = (info.eng_lbt == '' ? engLbtVal : info.eng_lbt) as number
+  }
+  info.t = val * 0.000001
+  info.kg = val * 0.001
+  info.mg = val * 1000
+
+  info.jin = val * 0.002
+  info.liang = val * 0.02
+  info.qian = val * 0.2
+  info.dan = val * 0.00002
+
+  info.eng_lb = engLbVal * 1
+  info.eng_oz = engLbVal * 16
+  info.eng_st = engLbVal * 0.0714286
+  info.eng_cwt = engLbVal * 0.0089286
+  info.eng_dr = engLbVal * 256
+  info.eng_gr = engLbVal * 7000
+  info.eng_lt = engLbVal * 0.0004464
+
+  info.eng_lbt = engLbtVal * 1
+  info.eng_ozt = engLbtVal * 12
+  info.eng_grain = engLbtVal * 5760
+  info.eng_dwt = engLbtVal * 240
+}
+
+</script>
+
+<template>
+    <div>
+      <div>
+        <el-divider content-position="left">国际重量单位(公制)</el-divider>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">吨(t)</el-text>
+            <el-input
+              v-model="info.t"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('t')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">千克/公斤(kg)</el-text>
+            <el-input
+              v-model="info.kg"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('kg')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">克(g)</el-text>
+            <el-input
+              v-model="info.g"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('g')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">毫克(mg)</el-text>
+            <el-input
+              v-model="info.mg"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('mg')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <!-- ----- -->
+        <el-divider content-position="left">中国传统重量单位(市制)</el-divider>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">斤</el-text>
+            <el-input
+              v-model="info.jin"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('jin')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">两</el-text>
+            <el-input
+              v-model="info.liang"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('liang')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">钱</el-text>
+            <el-input
+              v-model="info.qian"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('qian')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">担</el-text>
+            <el-input
+              v-model="info.dan"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('dan')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <el-divider content-position="left">英制重量单位(常衡制)</el-divider>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">磅(lb)</el-text>
+            <el-input
+              v-model="info.eng_lb"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('eng_lb')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">盎司(oz)</el-text>
+            <el-input
+              v-model="info.eng_oz"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('eng_oz')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">英石(st)</el-text>
+            <el-input
+              v-model="info.eng_st"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('eng_st')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">英担(cwt)</el-text>
+            <el-input
+              v-model="info.eng_cwt"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('eng_cwt')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">打兰(dr)</el-text>
+            <el-input
+              v-model="info.eng_dr"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('eng_dr')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">格令(gr)</el-text>
+            <el-input
+              v-model="info.eng_gr"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('eng_gr')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">长吨(lt)</el-text>
+            <el-input
+              v-model="info.eng_lt"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('eng_lt')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <el-divider content-position="left">英制重量单位(金衡制)</el-divider>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">磅(lbt)</el-text>
+            <el-input
+              v-model="info.eng_lbt"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('eng_lbt')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">盎司(ozt)</el-text>
+            <el-input
+              v-model="info.eng_ozt"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('eng_ozt')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <!-- group -->
+        <div class="custom-box">
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">格令</el-text>
+            <el-input
+              v-model="info.eng_grain"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('eng_grain')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+          <div class="custom-box-single">
+            <el-text class="custom-box-text">英钱(dwt)</el-text>
+            <el-input
+              v-model="info.eng_dwt"
+              placeholder=""
+              class="input-with-select"
+            >
+              <template #append>
+                <el-button @click="tran('eng_dwt')">转换</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+      </div>
+
+      <div class="w-full text-center">
+        <el-button type="primary" @click="clear">清除全部</el-button>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+.custom-box{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.75rem/* 12px */;
+}
+.custom-box-single{
+  display: flex;
+  width: 50%;
+}
+.custom-box-text{
+  text-align: center;
+  width: 10rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/router.ts b/src/router/router.ts
index 728e355..61d54af 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -120,6 +120,30 @@ export const constantRoute = [
       title: "手持弹幕"
     }
   },
+  {
+    path: '/palettes',
+    component: () => import('@/components/Palettes/Palettes.vue'),
+    name: 'palettes',
+    meta: {
+      title: "色板"
+    }
+  },
+  {
+    path: '/unit',
+    component: () => import('@/components/Unit/Unit.vue'),
+    name: 'unit',
+    meta: {
+      title: "单位转换"
+    }
+  },
+  {
+    path: '/qrcode',
+    component: () => import('@/components/Qrcode/Qrcode.vue'),
+    name: 'qrcode',
+    meta: {
+      title: "二维码生成"
+    }
+  },
   {
     path: '/404',
     component: () => import('@/components/404/404.vue'),
diff --git a/tsconfig.node.json b/tsconfig.node.json
index eaa9730..3da8e41 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -6,5 +6,5 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts", "./src/router/router.ts"]
+  "include": ["vite.config.ts", "./src/router/router.ts", "./ssr.config.ts"]
 }