diff --git a/components.d.ts b/components.d.ts
index 1f2799a..1e49101 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -17,6 +17,7 @@ declare module 'vue' {
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElUpload: typeof import('element-plus/es')['ElUpload']
diff --git a/package.json b/package.json
index 215a419..aaffa37 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "font-awesome": "^4.7.0",
     "prismjs": "^1.27.0",
     "qs": "^6.10.3",
+    "vite-plugin-prismjs": "^0.0.8",
     "vue": "^3.2.25",
     "vue-axios": "^3.4.1",
     "vue-router": "^4.0.14",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3dceb49..5f37e8c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,6 +18,7 @@ specifiers:
   unplugin-auto-import: ^0.6.6
   unplugin-vue-components: ^0.18.3
   vite: ^2.8.0
+  vite-plugin-prismjs: ^0.0.8
   vue: ^3.2.25
   vue-axios: ^3.4.1
   vue-router: ^4.0.14
@@ -35,6 +36,7 @@ dependencies:
   font-awesome: registry.npmmirror.com/font-awesome/4.7.0
   prismjs: registry.npmmirror.com/prismjs/1.27.0
   qs: registry.npmmirror.com/qs/6.10.3
+  vite-plugin-prismjs: registry.npmmirror.com/vite-plugin-prismjs/0.0.8_prismjs@1.27.0
   vue: registry.npmmirror.com/vue/3.2.31
   vue-axios: registry.npmmirror.com/vue-axios/3.4.1_axios@0.26.1+vue@3.2.31
   vue-router: registry.npmmirror.com/vue-router/4.0.14_vue@3.2.31
@@ -58,18 +60,208 @@ packages:
     version: 0.0.1
     dev: false
 
+  registry.npmmirror.com/@ampproject/remapping/2.1.2:
+    resolution: {integrity: sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.1.2.tgz}
+    name: '@ampproject/remapping'
+    version: 2.1.2
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/trace-mapping': registry.npmmirror.com/@jridgewell/trace-mapping/0.3.4
+    dev: false
+
   registry.npmmirror.com/@antfu/utils/0.5.0:
     resolution: {integrity: sha512-MrAQ/MrPSxbh1bBrmwJjORfJymw4IqSHFBXqvxaga3ZdDM+/zokYF8DjyJpSjY2QmpmgQrajDUBJOWrYeARfzA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@antfu/utils/-/utils-0.5.0.tgz}
     name: '@antfu/utils'
     version: 0.5.0
     dev: true
 
+  registry.npmmirror.com/@babel/code-frame/7.16.7:
+    resolution: {integrity: sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.16.7.tgz}
+    name: '@babel/code-frame'
+    version: 7.16.7
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': registry.npmmirror.com/@babel/highlight/7.16.10
+    dev: false
+
+  registry.npmmirror.com/@babel/compat-data/7.17.7:
+    resolution: {integrity: sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.17.7.tgz}
+    name: '@babel/compat-data'
+    version: 7.17.7
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  registry.npmmirror.com/@babel/core/7.17.8:
+    resolution: {integrity: sha512-OdQDV/7cRBtJHLSOBqqbYNkOcydOgnX59TZx4puf41fzcVtN3e/4yqY8lMQsK+5X2lJtAdmA+6OHqsj1hBJ4IQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/core/-/core-7.17.8.tgz}
+    name: '@babel/core'
+    version: 7.17.8
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': registry.npmmirror.com/@ampproject/remapping/2.1.2
+      '@babel/code-frame': registry.npmmirror.com/@babel/code-frame/7.16.7
+      '@babel/generator': registry.npmmirror.com/@babel/generator/7.17.7
+      '@babel/helper-compilation-targets': registry.npmmirror.com/@babel/helper-compilation-targets/7.17.7_@babel+core@7.17.8
+      '@babel/helper-module-transforms': registry.npmmirror.com/@babel/helper-module-transforms/7.17.7
+      '@babel/helpers': registry.npmmirror.com/@babel/helpers/7.17.8
+      '@babel/parser': registry.npmmirror.com/@babel/parser/7.17.8
+      '@babel/template': registry.npmmirror.com/@babel/template/7.16.7
+      '@babel/traverse': registry.npmmirror.com/@babel/traverse/7.17.3
+      '@babel/types': registry.npmmirror.com/@babel/types/7.17.0
+      convert-source-map: registry.npmmirror.com/convert-source-map/1.8.0
+      debug: registry.npmmirror.com/debug/4.3.4
+      gensync: registry.npmmirror.com/gensync/1.0.0-beta.2
+      json5: registry.npmmirror.com/json5/2.2.0
+      semver: registry.npmmirror.com/semver/6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  registry.npmmirror.com/@babel/generator/7.17.7:
+    resolution: {integrity: sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/generator/-/generator-7.17.7.tgz}
+    name: '@babel/generator'
+    version: 7.17.7
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': registry.npmmirror.com/@babel/types/7.17.0
+      jsesc: registry.npmmirror.com/jsesc/2.5.2
+      source-map: registry.npmmirror.com/source-map/0.5.7
+    dev: false
+
+  registry.npmmirror.com/@babel/helper-compilation-targets/7.17.7_@babel+core@7.17.8:
+    resolution: {integrity: sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz}
+    id: registry.npmmirror.com/@babel/helper-compilation-targets/7.17.7
+    name: '@babel/helper-compilation-targets'
+    version: 7.17.7
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/compat-data': registry.npmmirror.com/@babel/compat-data/7.17.7
+      '@babel/core': registry.npmmirror.com/@babel/core/7.17.8
+      '@babel/helper-validator-option': registry.npmmirror.com/@babel/helper-validator-option/7.16.7
+      browserslist: registry.npmmirror.com/browserslist/4.20.2
+      semver: registry.npmmirror.com/semver/6.3.0
+    dev: false
+
+  registry.npmmirror.com/@babel/helper-environment-visitor/7.16.7:
+    resolution: {integrity: sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz}
+    name: '@babel/helper-environment-visitor'
+    version: 7.16.7
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': registry.npmmirror.com/@babel/types/7.17.0
+    dev: false
+
+  registry.npmmirror.com/@babel/helper-function-name/7.16.7:
+    resolution: {integrity: sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz}
+    name: '@babel/helper-function-name'
+    version: 7.16.7
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-get-function-arity': registry.npmmirror.com/@babel/helper-get-function-arity/7.16.7
+      '@babel/template': registry.npmmirror.com/@babel/template/7.16.7
+      '@babel/types': registry.npmmirror.com/@babel/types/7.17.0
+    dev: false
+
+  registry.npmmirror.com/@babel/helper-get-function-arity/7.16.7:
+    resolution: {integrity: sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz}
+    name: '@babel/helper-get-function-arity'
+    version: 7.16.7
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': registry.npmmirror.com/@babel/types/7.17.0
+    dev: false
+
+  registry.npmmirror.com/@babel/helper-hoist-variables/7.16.7:
+    resolution: {integrity: sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz}
+    name: '@babel/helper-hoist-variables'
+    version: 7.16.7
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': registry.npmmirror.com/@babel/types/7.17.0
+    dev: false
+
+  registry.npmmirror.com/@babel/helper-module-imports/7.16.7:
+    resolution: {integrity: sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz}
+    name: '@babel/helper-module-imports'
+    version: 7.16.7
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': registry.npmmirror.com/@babel/types/7.17.0
+    dev: false
+
+  registry.npmmirror.com/@babel/helper-module-transforms/7.17.7:
+    resolution: {integrity: sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz}
+    name: '@babel/helper-module-transforms'
+    version: 7.17.7
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-environment-visitor': registry.npmmirror.com/@babel/helper-environment-visitor/7.16.7
+      '@babel/helper-module-imports': registry.npmmirror.com/@babel/helper-module-imports/7.16.7
+      '@babel/helper-simple-access': registry.npmmirror.com/@babel/helper-simple-access/7.17.7
+      '@babel/helper-split-export-declaration': registry.npmmirror.com/@babel/helper-split-export-declaration/7.16.7
+      '@babel/helper-validator-identifier': registry.npmmirror.com/@babel/helper-validator-identifier/7.16.7
+      '@babel/template': registry.npmmirror.com/@babel/template/7.16.7
+      '@babel/traverse': registry.npmmirror.com/@babel/traverse/7.17.3
+      '@babel/types': registry.npmmirror.com/@babel/types/7.17.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  registry.npmmirror.com/@babel/helper-simple-access/7.17.7:
+    resolution: {integrity: sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz}
+    name: '@babel/helper-simple-access'
+    version: 7.17.7
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': registry.npmmirror.com/@babel/types/7.17.0
+    dev: false
+
+  registry.npmmirror.com/@babel/helper-split-export-declaration/7.16.7:
+    resolution: {integrity: sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz}
+    name: '@babel/helper-split-export-declaration'
+    version: 7.16.7
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': registry.npmmirror.com/@babel/types/7.17.0
+    dev: false
+
   registry.npmmirror.com/@babel/helper-validator-identifier/7.16.7:
     resolution: {integrity: sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz}
     name: '@babel/helper-validator-identifier'
     version: 7.16.7
     engines: {node: '>=6.9.0'}
-    dev: true
+
+  registry.npmmirror.com/@babel/helper-validator-option/7.16.7:
+    resolution: {integrity: sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz}
+    name: '@babel/helper-validator-option'
+    version: 7.16.7
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  registry.npmmirror.com/@babel/helpers/7.17.8:
+    resolution: {integrity: sha512-QcL86FGxpfSJwGtAvv4iG93UL6bmqBdmoVY0CMCU2g+oD2ezQse3PT5Pa+jiD6LJndBQi0EDlpzOWNlLuhz5gw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/helpers/-/helpers-7.17.8.tgz}
+    name: '@babel/helpers'
+    version: 7.17.8
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': registry.npmmirror.com/@babel/template/7.16.7
+      '@babel/traverse': registry.npmmirror.com/@babel/traverse/7.17.3
+      '@babel/types': registry.npmmirror.com/@babel/types/7.17.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  registry.npmmirror.com/@babel/highlight/7.16.10:
+    resolution: {integrity: sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/highlight/-/highlight-7.16.10.tgz}
+    name: '@babel/highlight'
+    version: 7.16.10
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': registry.npmmirror.com/@babel/helper-validator-identifier/7.16.7
+      chalk: registry.npmmirror.com/chalk/2.4.2
+      js-tokens: registry.npmmirror.com/js-tokens/4.0.0
+    dev: false
 
   registry.npmmirror.com/@babel/parser/7.17.8:
     resolution: {integrity: sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/parser/-/parser-7.17.8.tgz}
@@ -87,6 +279,37 @@ packages:
       regenerator-runtime: registry.npmmirror.com/regenerator-runtime/0.13.9
     dev: false
 
+  registry.npmmirror.com/@babel/template/7.16.7:
+    resolution: {integrity: sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/template/-/template-7.16.7.tgz}
+    name: '@babel/template'
+    version: 7.16.7
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': registry.npmmirror.com/@babel/code-frame/7.16.7
+      '@babel/parser': registry.npmmirror.com/@babel/parser/7.17.8
+      '@babel/types': registry.npmmirror.com/@babel/types/7.17.0
+    dev: false
+
+  registry.npmmirror.com/@babel/traverse/7.17.3:
+    resolution: {integrity: sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/traverse/-/traverse-7.17.3.tgz}
+    name: '@babel/traverse'
+    version: 7.17.3
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': registry.npmmirror.com/@babel/code-frame/7.16.7
+      '@babel/generator': registry.npmmirror.com/@babel/generator/7.17.7
+      '@babel/helper-environment-visitor': registry.npmmirror.com/@babel/helper-environment-visitor/7.16.7
+      '@babel/helper-function-name': registry.npmmirror.com/@babel/helper-function-name/7.16.7
+      '@babel/helper-hoist-variables': registry.npmmirror.com/@babel/helper-hoist-variables/7.16.7
+      '@babel/helper-split-export-declaration': registry.npmmirror.com/@babel/helper-split-export-declaration/7.16.7
+      '@babel/parser': registry.npmmirror.com/@babel/parser/7.17.8
+      '@babel/types': registry.npmmirror.com/@babel/types/7.17.0
+      debug: registry.npmmirror.com/debug/4.3.4
+      globals: registry.npmmirror.com/globals/11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   registry.npmmirror.com/@babel/types/7.17.0:
     resolution: {integrity: sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/types/-/types-7.17.0.tgz}
     name: '@babel/types'
@@ -95,7 +318,6 @@ packages:
     dependencies:
       '@babel/helper-validator-identifier': registry.npmmirror.com/@babel/helper-validator-identifier/7.16.7
       to-fast-properties: registry.npmmirror.com/to-fast-properties/2.0.0
-    dev: true
 
   registry.npmmirror.com/@braintree/sanitize-url/3.1.0:
     resolution: {integrity: sha512-GcIY79elgB+azP74j8vqkiXz8xLFfIzbQJdlwOPisgbKT00tviJQuEghOXSMVxJ00HoYJbGswr4kcllUc4xCcg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@braintree/sanitize-url/-/sanitize-url-3.1.0.tgz}
@@ -144,6 +366,28 @@ packages:
     version: 1.0.0
     dev: true
 
+  registry.npmmirror.com/@jridgewell/resolve-uri/3.0.5:
+    resolution: {integrity: sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz}
+    name: '@jridgewell/resolve-uri'
+    version: 3.0.5
+    engines: {node: '>=6.0.0'}
+    dev: false
+
+  registry.npmmirror.com/@jridgewell/sourcemap-codec/1.4.11:
+    resolution: {integrity: sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz}
+    name: '@jridgewell/sourcemap-codec'
+    version: 1.4.11
+    dev: false
+
+  registry.npmmirror.com/@jridgewell/trace-mapping/0.3.4:
+    resolution: {integrity: sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz}
+    name: '@jridgewell/trace-mapping'
+    version: 0.3.4
+    dependencies:
+      '@jridgewell/resolve-uri': registry.npmmirror.com/@jridgewell/resolve-uri/3.0.5
+      '@jridgewell/sourcemap-codec': registry.npmmirror.com/@jridgewell/sourcemap-codec/1.4.11
+    dev: false
+
   registry.npmmirror.com/@kangc/v-md-editor/2.3.14_vue@3.2.31:
     resolution: {integrity: sha512-T1AdLnM4QflJqXC5nWLiUU0t8ajw/2GVLIrAsZhDimNaoxly28A+AqZ5OeBVJx/1vpFkkE4CYafqWS3k23h5HQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@kangc/v-md-editor/-/v-md-editor-2.3.14.tgz}
     id: registry.npmmirror.com/@kangc/v-md-editor/2.3.14
@@ -696,6 +940,17 @@ packages:
       - debug
     dev: false
 
+  registry.npmmirror.com/babel-plugin-prismjs/2.1.0_prismjs@1.27.0:
+    resolution: {integrity: sha512-ehzSKYfeAz4U78zi/sfwsjDPlq0LvDKxNefcZTJ/iKBu+plsHsLqZhUeGf1+82LAcA35UZGbU6ksEx2Utphc/g==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/babel-plugin-prismjs/-/babel-plugin-prismjs-2.1.0.tgz}
+    id: registry.npmmirror.com/babel-plugin-prismjs/2.1.0
+    name: babel-plugin-prismjs
+    version: 2.1.0
+    peerDependencies:
+      prismjs: ^1.18.0
+    dependencies:
+      prismjs: registry.npmmirror.com/prismjs/1.27.0
+    dev: false
+
   registry.npmmirror.com/babel-walk/3.0.0-canary-5:
     resolution: {integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/babel-walk/-/babel-walk-3.0.0-canary-5.tgz}
     name: babel-walk
@@ -776,6 +1031,20 @@ packages:
       fill-range: registry.npmmirror.com/fill-range/7.0.1
     dev: true
 
+  registry.npmmirror.com/browserslist/4.20.2:
+    resolution: {integrity: sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/browserslist/-/browserslist-4.20.2.tgz}
+    name: browserslist
+    version: 4.20.2
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: registry.npmmirror.com/caniuse-lite/1.0.30001319
+      electron-to-chromium: registry.npmmirror.com/electron-to-chromium/1.4.88
+      escalade: registry.npmmirror.com/escalade/3.1.1
+      node-releases: registry.npmmirror.com/node-releases/2.0.2
+      picocolors: registry.npmmirror.com/picocolors/1.0.0
+    dev: false
+
   registry.npmmirror.com/cache-base/1.0.1:
     resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/cache-base/-/cache-base-1.0.1.tgz}
     name: cache-base
@@ -807,6 +1076,12 @@ packages:
     version: 1.0.1
     dev: false
 
+  registry.npmmirror.com/caniuse-lite/1.0.30001319:
+    resolution: {integrity: sha512-xjlIAFHucBRSMUo1kb5D4LYgcN1M45qdKP++lhqowDpwJwGkpIRTt5qQqnhxjj1vHcI7nrJxWhCC1ATrCEBTcw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001319.tgz}
+    name: caniuse-lite
+    version: 1.0.30001319
+    dev: false
+
   registry.npmmirror.com/chalk/2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/chalk/-/chalk-2.4.2.tgz}
     name: chalk
@@ -930,6 +1205,14 @@ packages:
       '@babel/types': registry.npmmirror.com/@babel/types/7.17.0
     dev: true
 
+  registry.npmmirror.com/convert-source-map/1.8.0:
+    resolution: {integrity: sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/convert-source-map/-/convert-source-map-1.8.0.tgz}
+    name: convert-source-map
+    version: 1.8.0
+    dependencies:
+      safe-buffer: registry.npmmirror.com/safe-buffer/5.1.2
+    dev: false
+
   registry.npmmirror.com/copy-descriptor/0.1.1:
     resolution: {integrity: sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz}
     name: copy-descriptor
@@ -1602,7 +1885,6 @@ packages:
         optional: true
     dependencies:
       ms: registry.npmmirror.com/ms/2.1.2
-    dev: true
 
   registry.npmmirror.com/decode-uri-component/0.2.0:
     resolution: {integrity: sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz}
@@ -1716,6 +1998,12 @@ packages:
       domhandler: registry.npmmirror.com/domhandler/4.3.1
     dev: true
 
+  registry.npmmirror.com/electron-to-chromium/1.4.88:
+    resolution: {integrity: sha512-oA7mzccefkvTNi9u7DXmT0LqvhnOiN2BhSrKerta7HeUC1cLoIwtbf2wL+Ah2ozh5KQd3/1njrGrwDBXx6d14Q==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.88.tgz}
+    name: electron-to-chromium
+    version: 1.4.88
+    dev: false
+
   registry.npmmirror.com/element-plus/2.1.4_1a412d14def5ff5ca1122000e4bee666:
     resolution: {integrity: sha512-pcwgDbKUrzyWbixYB/zIbLPLBQ/NPGPJnGXJ+jYozUSthPW4SuriaUGJKgbAE6PDBAtw3IodiT2E2GbiaZLxww==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.1.4.tgz}
     id: registry.npmmirror.com/element-plus/2.1.4
@@ -2026,6 +2314,13 @@ packages:
       esbuild-windows-arm64: registry.npmmirror.com/esbuild-windows-arm64/0.14.27
     dev: true
 
+  registry.npmmirror.com/escalade/3.1.1:
+    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz}
+    name: escalade
+    version: 3.1.1
+    engines: {node: '>=6'}
+    dev: false
+
   registry.npmmirror.com/escape-html/1.0.3:
     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz}
     name: escape-html
@@ -2225,6 +2520,13 @@ packages:
     name: function-bind
     version: 1.1.1
 
+  registry.npmmirror.com/gensync/1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz}
+    name: gensync
+    version: 1.0.0-beta.2
+    engines: {node: '>=6.9.0'}
+    dev: false
+
   registry.npmmirror.com/get-intrinsic/1.1.1:
     resolution: {integrity: sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz}
     name: get-intrinsic
@@ -2278,6 +2580,13 @@ packages:
       path-is-absolute: registry.npmmirror.com/path-is-absolute/1.0.1
     dev: false
 
+  registry.npmmirror.com/globals/11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz}
+    name: globals
+    version: 11.12.0
+    engines: {node: '>=4'}
+    dev: false
+
   registry.npmmirror.com/globby/9.2.0:
     resolution: {integrity: sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/globby/-/globby-9.2.0.tgz}
     name: globby
@@ -2690,6 +2999,12 @@ packages:
     version: 1.0.2
     dev: true
 
+  registry.npmmirror.com/js-tokens/4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz}
+    name: js-tokens
+    version: 4.0.0
+    dev: false
+
   registry.npmmirror.com/js-yaml/3.14.1:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/js-yaml/-/js-yaml-3.14.1.tgz}
     name: js-yaml
@@ -2700,6 +3015,24 @@ packages:
       esprima: registry.npmmirror.com/esprima/4.0.1
     dev: false
 
+  registry.npmmirror.com/jsesc/2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz}
+    name: jsesc
+    version: 2.5.2
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: false
+
+  registry.npmmirror.com/json5/2.2.0:
+    resolution: {integrity: sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/json5/-/json5-2.2.0.tgz}
+    name: json5
+    version: 2.2.0
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      minimist: registry.npmmirror.com/minimist/1.2.5
+    dev: false
+
   registry.npmmirror.com/jsonc-parser/2.3.1:
     resolution: {integrity: sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/jsonc-parser/-/jsonc-parser-2.3.1.tgz}
     name: jsonc-parser
@@ -3038,6 +3371,12 @@ packages:
       brace-expansion: registry.npmmirror.com/brace-expansion/2.0.1
     dev: true
 
+  registry.npmmirror.com/minimist/1.2.5:
+    resolution: {integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/minimist/-/minimist-1.2.5.tgz}
+    name: minimist
+    version: 1.2.5
+    dev: false
+
   registry.npmmirror.com/mixin-deep/1.3.2:
     resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/mixin-deep/-/mixin-deep-1.3.2.tgz}
     name: mixin-deep
@@ -3064,7 +3403,6 @@ packages:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz}
     name: ms
     version: 2.1.2
-    dev: true
 
   registry.npmmirror.com/nanoid/3.3.1:
     resolution: {integrity: sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/nanoid/-/nanoid-3.3.1.tgz}
@@ -3098,6 +3436,12 @@ packages:
     version: 2.6.2
     dev: true
 
+  registry.npmmirror.com/node-releases/2.0.2:
+    resolution: {integrity: sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/node-releases/-/node-releases-2.0.2.tgz}
+    name: node-releases
+    version: 2.0.2
+    dev: false
+
   registry.npmmirror.com/normalize-path/3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz}
     name: normalize-path
@@ -3508,6 +3852,12 @@ packages:
     version: 1.3.3
     dev: false
 
+  registry.npmmirror.com/safe-buffer/5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz}
+    name: safe-buffer
+    version: 5.1.2
+    dev: false
+
   registry.npmmirror.com/safe-regex/1.1.0:
     resolution: {integrity: sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/safe-regex/-/safe-regex-1.1.0.tgz}
     name: safe-regex
@@ -3768,7 +4118,6 @@ packages:
     name: to-fast-properties
     version: 2.0.0
     engines: {node: '>=4'}
-    dev: true
 
   registry.npmmirror.com/to-object-path/0.3.0:
     resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/to-object-path/-/to-object-path-0.3.0.tgz}
@@ -3998,6 +4347,20 @@ packages:
       vue: registry.npmmirror.com/vue/3.2.31
     dev: false
 
+  registry.npmmirror.com/vite-plugin-prismjs/0.0.8_prismjs@1.27.0:
+    resolution: {integrity: sha512-mBPPMS/hwVUArdqCtp/oajZT7iq1qwJDDCciNZ3R5+Q5tQUuUHXtDKuZHYnklPLElNbENf2FyuOtC4FrgxQRAA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vite-plugin-prismjs/-/vite-plugin-prismjs-0.0.8.tgz}
+    id: registry.npmmirror.com/vite-plugin-prismjs/0.0.8
+    name: vite-plugin-prismjs
+    version: 0.0.8
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      '@babel/core': registry.npmmirror.com/@babel/core/7.17.8
+      babel-plugin-prismjs: registry.npmmirror.com/babel-plugin-prismjs/2.1.0_prismjs@1.27.0
+    transitivePeerDependencies:
+      - prismjs
+      - supports-color
+    dev: false
+
   registry.npmmirror.com/vite/2.8.6_sass@1.49.9:
     resolution: {integrity: sha512-e4H0QpludOVKkmOsRyqQ7LTcMUDF3mcgyNU4lmi0B5JUbe0ZxeBBl8VoZ8Y6Rfn9eFKYtdXNPcYK97ZwH+K2ug==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vite/-/vite-2.8.6.tgz}
     id: registry.npmmirror.com/vite/2.8.6
diff --git a/src/App.vue b/src/App.vue
index 364f5ff..4cf924d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -124,6 +124,7 @@ a {
    cursor: pointer;
    position: relative;
    overflow: hidden;
+   background-color: #fbfdff;
    transition: var(--el-transition-duration-fast);
  }
 .avatar-uploader .el-upload:hover {
@@ -141,4 +142,42 @@ a {
   height: 178px;
   display: block;
 }
+
+*::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+*::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background   : #33613A;
+}
+*::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  background   : #ededed;
+}
+
+@media screen and (min-width: 768px){
+  .sticky-box {
+    position: -webkit-sticky;
+    position: sticky;
+    height: 60px;
+    margin-bottom: 30px;
+    top: 70px;
+  }
+
+  .hide-big-screen{
+    display: none!important;
+  }
+}
+@media screen and (max-width: 767px){
+  .hide-small-screen{
+    opacity: 0;
+    transform: scale(0.5);
+  }
+}
 </style>
diff --git a/src/env.d.ts b/src/env.d.ts
index f524f67..50c8aed 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -8,5 +8,6 @@ declare module '*.vue' {
 }
 
 declare module '@kangc/v-md-editor'
+declare module '@kangc/v-md-editor/lib/preview'
 declare module '@kangc/v-md-editor/lib/theme/vuepress'
 declare module 'prismjs'
diff --git a/src/main.ts b/src/main.ts
index d6ef5c3..3441354 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,6 +9,8 @@ import qs from 'qs'
 
 import VMdEditor from '@kangc/v-md-editor';
 import '@kangc/v-md-editor/lib/style/base-editor.css';
+import VMdPreview from '@kangc/v-md-editor/lib/preview';
+import '@kangc/v-md-editor/lib/style/preview.css';
 
 import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress';
 import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
@@ -26,8 +28,12 @@ axios.defaults.baseURL='https://www.peteralbus.com:8089/'
 VMdEditor.use(vuepressTheme, {
     Prism
 });
+
+VMdPreview.use(vuepressTheme, {
+    Prism
+});
 const app=createApp(App)
 app.config.globalProperties.$axios=axios;
 app.config.globalProperties.$qs=qs;
-app.use(VueAxios,axios).use(router).use(VMdEditor).use(PeterAlbusVue).mount('#app')
+app.use(VueAxios,axios).use(router).use(VMdEditor).use(VMdPreview).use(PeterAlbusVue).mount('#app')
 // app.config.devtools=true
diff --git a/src/views/About.vue b/src/views/About.vue
index 7465565..810e2e0 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -43,7 +43,7 @@
         </div>
 
         <div class="module">
-          <h2 class="title">友情链接</h2>
+          <h2 class="title"><el-icon style="vertical-align: -10%"><link-icon /></el-icon>友情链接</h2>
           <div class="content paragraph">
             <p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
           </div>
@@ -54,7 +54,9 @@
 </template>
 
 <script>
+import {Link} from "@element-plus/icons-vue";
 export default {
+  components:{LinkIcon:Link},
   name: "About",
   data(){
     return{
diff --git a/src/views/Blog.vue b/src/views/Blog.vue
index 76f75f7..e9cfb5d 100644
--- a/src/views/Blog.vue
+++ b/src/views/Blog.vue
@@ -10,11 +10,11 @@
     <el-row>
       <el-col :lg="{span:11,offset:3}" :sm="15">
         <div class="blog-header">
-          <h1>{{blog.blogTitle}}</h1>
-          <p><i class="fa fa-user"></i> {{blog.blogAuthor}}&emsp;<i class="fa fa-calendar"></i> 发布于{{blog.blogTime}} <i class="fa fa-eye"></i> {{blog.blogViews}}次访问</p>
+          <h1 style="padding: 8px 20px 2px;">{{blog.blogTitle}}</h1>
+          <p style="padding: 0 5px 5px 5px"><i class="fa fa-user"></i> {{blog.blogAuthor}}&emsp;<i class="fa fa-calendar"></i> 发布于{{blog.blogTime}} <i class="fa fa-eye"></i> {{blog.blogViews}}次访问</p>
         </div>
         <div class="blog-content">
-          <v-md-editor v-model="blog.blogContent" mode="preview"></v-md-editor>
+          <v-md-preview :text="blog.blogContent" ref="mdRef"></v-md-preview>
         </div>
       </el-col>
       <el-col :lg="{span:6}" :sm="9">
@@ -39,89 +39,147 @@
             </el-tooltip>
           </div>
         </div>
-        <div class="module">
-          <h2 class="title">友情链接</h2>
-          <div class="content paragraph">
-            <p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
+        <div class="sticky-box">
+          <div class="module anchors" :class="{'hide-small-screen':hideCatalogue}">
+            <h2 class="title"><el-icon style="vertical-align: -10%"><notebook /></el-icon>目录</h2>
+            <div class="content" style="padding: 10px">
+              <el-scrollbar max-height="30vh">
+                <div
+                    v-for="anchor in titleList"
+                    :style="{ padding: `2px 20px 2px ${anchor.indent * 20 + 20}px` }"
+                    class="anchor"
+                    @click="handleAnchorClick(anchor)"
+                >
+                  <a style="cursor: pointer"><el-icon class="arrow-icon" style="vertical-align: -15%"><arrow-right /></el-icon> {{ anchor.title }}</a>
+                </div>
+              </el-scrollbar>
+            </div>
           </div>
-        </div>
-        <div class="module">
-          <h2 class="title">分享本页面</h2>
-          <div class="content paragraph">
-            <Share
-                :url="'https://www.peteralbus.com/%23/blog?id%3D'+blog.blogId"
-                :title="blog.blogTitle"
-                source="PeterAlbus的博客"
-                :description="blog.blogDescription"
-                :image="blog.blogImg"
-                :twitter="true"
-                :google="true"
-            ></Share>
+          <div class="module">
+            <h2 class="title"><el-icon style="vertical-align: -10%"><share-icon /></el-icon>分享本页面</h2>
+            <div class="content paragraph">
+              <Share
+                  :url="'https://www.peteralbus.com/%23/blog?id%3D'+blog.blogId"
+                  :title="blog.blogTitle"
+                  source="PeterAlbus的博客"
+                  :description="blog.blogDescription"
+                  :image="blog.blogImg"
+                  :twitter="true"
+                  :google="true"
+              ></Share>
+            </div>
           </div>
         </div>
       </el-col>
     </el-row>
   </div>
+  <div class="fixed-buttons hide-big-screen">
+    <el-button type="success" :icon="Notebook" circle @click="hideCatalogue=!hideCatalogue" />
+  </div>
 </template>
 
-<script>
-export default {
-  name: "Blog",
-  data() {
-    return {
-      blog:{
-        blogId:this.$route.query.id,
-        blogTitle:'稍等，数据正在请求中',
-        blogImg:'https://file.peteralbus.com/assets/blog/imgs/cover/cover1.jpg',
-        blogType:1,
-        blogDescription:'这里显示的是默认数据',
-        blogAuthor:'PeterAlbus',
-        blogContent:'# 提示\n' +
-            '如果很长时间都依旧显示本文字，检查你的互联网是否突然中断，或联系PeterAlbus，他可能忘记开服务器后端了',
-        blogTime:'2021-7-19',
-        blogLike:18,
-        blogViews:200,
-        isTop:1
-      },
-      friendLinkList:[
-        {
-          linkId:1,
-          linkName:'loading',
-          linkUrl:'#'
-        }
-      ]
-    };
-  },
-  created() {
-    this.getBlog()
-    this.getFriendLinkList()
-  },
-  methods:{
-    getBlog:function (){
-      let that=this;
-      if(that.blog.blogId!==undefined)
-      {
-        that.$axios.get('queryById?id='+that.blog.blogId)
-            .then(res=>{
-              that.blog=res.data;
-              that.blog.blogViews+=1;
-              that.$axios.post('/update',that.$qs.stringify(that.blog));
-              document.title = that.blog.blogTitle+'——PeterAlbus的博客'
-              document.querySelector('meta[name="description"]').setAttribute('content',that.blog.blogDescription)
-            })
-      }
-    },
-    getFriendLinkList: function (){
-      let that=this;
-      that.$axios.get('friendLink/getFriendLinkList')
-          .then(res=>{
-            that.friendLinkList=res.data;
-          })
-    }
+<script setup lang="ts">
+import {onMounted, ref ,nextTick} from "vue";
+import {useRoute} from "vue-router";
+import {ArrowRight,Notebook,Share as shareIcon} from "@element-plus/icons-vue";
+import axios from "axios";
+import qs from "qs";
+import type {vMdEditor} from "@kangc/v-md-editor"
+
+const route=useRoute()
+let mdRef=ref<InstanceType<typeof vMdEditor>>()
+let titleList:any=ref([])
+
+let hideCatalogue=ref(true)
+
+let blog=ref({
+  blogId:route.query.id,
+  blogTitle:'稍等，数据正在请求中',
+  blogImg:'https://file.peteralbus.com/assets/blog/imgs/cover/cover1.jpg',
+  blogType:1,
+  blogDescription:'这里显示的是默认数据',
+  blogAuthor:'PeterAlbus',
+  blogContent:'# 提示\n' +
+      '如果很长时间都依旧显示本文字，检查你的互联网是否突然中断，或联系PeterAlbus，他可能忘记开服务器后端了',
+  blogTime:'2021-7-19',
+  blogLike:18,
+  blogViews:200,
+  isTop:1
+})
+
+const getBlog=()=>{
+  if(blog.value.blogId!==undefined)
+  {
+    axios.get('queryById?id='+blog.value.blogId)
+        .then(res=>{
+          blog.value=res.data;
+          blog.value.blogViews+=1;
+          axios.post('/update',qs.stringify(blog.value));
+          document.title = blog.value.blogTitle+'——PeterAlbus的博客'
+          let meta:any=document.querySelector('meta[name="description"]')
+          if(!meta)
+          {
+            meta.setAttribute('content',blog.value.blogDescription)
+          }
+          nextTick(getTitles)
+        })
   }
 }
+
+const getTitles=()=>{
+  const anchors=mdRef.value?.$el.querySelectorAll('h1,h2,h3,h4,h5,h6')
+  const titles = Array.from(anchors).filter((title:any) => !!title.innerText.trim());
+  if (!titles.length) {
+    titleList.value = [];
+    return;
+  }
+
+  const hTags = Array.from(new Set(titles.map((title:any) => title.tagName))).sort();
+
+  titleList.value = titles.map((el:any) => ({
+    title: el.innerText,
+    lineIndex: el.getAttribute('data-v-md-line'),
+    indent: hTags.indexOf(el.tagName),
+  }));
+}
+
+const handleAnchorClick=(anchor:any)=>{
+  const { lineIndex } = anchor;
+
+  const heading = mdRef.value?.$el.querySelector(`[data-v-md-line="${lineIndex}"]`);
+
+  if (heading) {
+    mdRef.value?.scrollToTarget({
+      target: heading,
+      scrollContainer: window,
+      top: 60,
+    });
+  }
+}
+
+let friendLinkList=ref([
+  {
+    linkId:1,
+    linkName:'loading',
+    linkUrl:'#'
+  }
+])
+
+const getFriendLinkList=function () {
+  axios.get('friendLink/getFriendLinkList')
+      .then(res => {
+        friendLinkList.value = res.data;
+      })
+}
+
+onMounted(()=>{
+  getBlog()
+  getFriendLinkList()
+})
 </script>
 
+
+
 <style scoped>
 .banner {
   position: relative;
@@ -144,16 +202,80 @@ export default {
 
 .blog-content{
   text-align: left;
+  word-wrap:break-word;
+  width: 90%;
+  margin: 0 auto;
 }
 
 .blog-header{
-  margin-bottom: 1px;
-  padding: 8px 20px 12px;
   background-color: #f7f7f7;
+  width: 90%;
+  margin: 0 auto;
 }
 
 .blog-header p{
   font-size: 14px;
-  color: #4B6186;
+  color: #245440;
+}
+
+.anchor{
+  text-align: left;
+  transition: transform 0.3s ease .1s;
+}
+
+.anchors a:hover{
+  color: #63a35c;
+}
+
+.anchor:hover{
+  transform: translateX(+5px);
+}
+
+.fixed-buttons{
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  position: fixed;
+  right: 10px;
+  bottom: 80px;
+  z-index: 101;
+  height: 200px;
+  width: 32px;
+}
+
+@media screen and (max-width: 767px){
+  .anchors{
+    position: fixed;
+    bottom: 80px;
+    padding: 0;
+    right: 60px;
+    width: 70%;
+    max-width: 300px;
+    z-index: 102;
+    transform-origin: right bottom;
+    transition-property:opacity,transform;
+    transition-duration:0.3s;
+    transition-timing-function:ease;
+  }
+
+  .anchors .title{
+    border-radius: 5px 5px 0 0;
+  }
+
+  .anchors .content{
+    border-radius: 0 0 5px 5px;
+  }
+
+  .anchors {
+    box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05);
+    border-radius: 5px;
+  }
+
+
+  .anchors:hover{
+    box-shadow: 0 6px 16px 12px rgba(7,17,27,0.25);
+  }
+
 }
 </style>
diff --git a/src/views/EditBlog.vue b/src/views/EditBlog.vue
index c55151a..156c4b7 100644
--- a/src/views/EditBlog.vue
+++ b/src/views/EditBlog.vue
@@ -50,10 +50,10 @@
             <el-form-item label="内容：" prop="blogContent">
               <v-md-editor v-model="blog.blogContent"></v-md-editor>
             </el-form-item>
-            <el-form-item style="text-align: center;">
+            <div style="display: flex;justify-content: center!important;">
               <el-button type="success" @click="onSubmit(blogForm)">提交</el-button>
-              <el-button type="info" v-on:click="getBlog">重置</el-button>
-            </el-form-item>
+              <el-button type="info" v-on:click="getBlog">重置为原博客</el-button>
+            </div>
           </el-form>
         </div>
       </el-col>
@@ -147,16 +147,16 @@ const handleAvatarSuccess = (res: any, file: UploadFile) => {
 }
 
 const beforeAvatarUpload = (file: UploadRawFile) => {
-  const isJPG = file.type === 'image/jpeg'
+  const isIMG = file.type === 'image/jpeg'||file.type === 'image/png'||file.type === 'image/gif'
   const isLt2M = file.size / 1024 / 1024 < 2
 
-  if (!isJPG) {
-    ElMessage.error('Avatar picture must be JPG format!')
+  if (!isIMG) {
+    ElMessage.error('选择的文件不是图片！')
   }
   if (!isLt2M) {
-    ElMessage.error('Avatar picture size can not exceed 2MB!')
+    ElMessage.error('图片大小不能超过2M！')
   }
-  return isJPG && isLt2M
+  return isIMG && isLt2M
 }
 
 const onSubmit= async (formEl: FormInstance | undefined) => {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index cc4cb6e..7873669 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="home-banner" :style="{background:'url('+backgrounds[randomIndex]+') fixed center center'}">
+  <div class="home-banner" :style="{background:'url('+backgrounds[randomIndex]+') fixed center center',backgroundSize:'cover',OBackgroundSize:'cover',MozBackgroundSize:'cover'}">
     <div class="banner-container">
       <div>
         <el-avatar :size="150" src="/assets/2.png"></el-avatar>
         <h2>欢迎来到PeterAlbus的个人博客</h2>
-        <div @mouseout="showFrom=false" @mouseover="showFrom=true" style="height: 30px;color:#ccccd6;font-size: 0.5em;">
+        <div @mouseout="showFrom=false" @mouseover="showFrom=true" style="height: 30px;color:#ccccd6;font-size: 0.8em;">
           <p
               @click="copyQuotes"
               @contextmenu.prevent="getQuotes"
@@ -58,7 +58,7 @@
       </div>
 
       <div class="module">
-        <h2 class="title">最新发布</h2>
+        <h2 class="title">最新发布<span style="float:right;"><router-link to="/types">查看全部>></router-link></span></h2>
         <el-card class="content" v-for="item in recentBlogs" shadow="hover" :body-style="{ padding: '0px' }">
           <el-row style="height: 170px">
             <el-col :span="8">
@@ -84,32 +84,34 @@
       </div>
     </el-col>
     <el-col :lg="{span:6}" :sm="9">
-      <div class="module">
-        <div class="content paragraph">
-          <el-avatar :size="50" src="/assets/2.png"></el-avatar>
-          <h4>PeterAlbus</h4>
-          <el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
-            <a href="mailto:wuhongdb@163.com">
-              <i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
-            </a>
-          </el-tooltip>
-          <el-tooltip class="item" effect="dark" content="github" placement="top">
-            <a href="https://github.com/PeterAlbus" target="_blank">
-              <i class="fa fa-fw fa-github" style="font-size:20px"></i>
-            </a>
-          </el-tooltip>
-          <el-tooltip class="item" effect="dark" content="bilibili" placement="top">
-            <a href="https://space.bilibili.com/2003822" target="_blank">
-              <i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
-            </a>
-          </el-tooltip>
+      <div class="sticky-box">
+        <div class="module">
+          <div class="content paragraph">
+            <el-avatar :size="50" src="/assets/2.png"></el-avatar>
+            <h4>PeterAlbus</h4>
+            <el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
+              <a href="mailto:wuhongdb@163.com">
+                <i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
+              </a>
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" content="github" placement="top">
+              <a href="https://github.com/PeterAlbus" target="_blank">
+                <i class="fa fa-fw fa-github" style="font-size:20px"></i>
+              </a>
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" content="bilibili" placement="top">
+              <a href="https://space.bilibili.com/2003822" target="_blank">
+                <i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
+              </a>
+            </el-tooltip>
+          </div>
         </div>
-      </div>
 
-      <div class="module">
-        <h2 class="title">友情链接</h2>
-        <div class="content paragraph">
-          <p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
+        <div class="module">
+          <h2 class="title"><el-icon style="vertical-align: -10%"><link-icon /></el-icon>友情链接</h2>
+          <div class="content paragraph">
+            <p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
+          </div>
         </div>
       </div>
     </el-col>
@@ -118,7 +120,7 @@
 
 <script setup lang="ts">
 import {computed, onMounted, ref} from "vue";
-import {Avatar,StarFilled,Clock} from "@element-plus/icons-vue";
+import {Avatar,StarFilled,Clock,Link as LinkIcon} from "@element-plus/icons-vue";
 import { toClipboard } from '@soerenmartius/vue3-clipboard'
 import axios from "axios";
 import {ElMessage} from "element-plus";
@@ -167,7 +169,7 @@ let showFrom = ref(false)
 const getQuotes= ()=>{
   axios({
     method: "get",
-    url: "https://v1.hitokoto.cn/?c=c&c=b&c=a&encode=json",
+    url: "https://v1.hitokoto.cn/?c=c&c=b&c=a&c=d&encode=json",
   })
       .then(res=>{
         famousQuotes.value=res.data
diff --git a/src/views/Photo.vue b/src/views/Photo.vue
index 4d9adf2..d78a786 100644
--- a/src/views/Photo.vue
+++ b/src/views/Photo.vue
@@ -56,32 +56,34 @@
         </el-row>
       </el-col>
       <el-col :lg="{span:6}" :sm="9">
-        <div class="module">
-          <div class="content paragraph">
-            <el-avatar :size="50" src="/assets/2.png"></el-avatar>
-            <h4>PeterAlbus</h4>
-            <p>若有侵权，深表歉意。可联系删除</p>
-            <el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
-              <a href="mailto:wuhongdb@163.com">
-                <i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
-              </a>
-            </el-tooltip>
-            <el-tooltip class="item" effect="dark" content="github" placement="top">
-              <a href="https://github.com/PeterAlbus" target="_blank">
-                <i class="fa fa-fw fa-github" style="font-size:20px"></i>
-              </a>
-            </el-tooltip>
-            <el-tooltip class="item" effect="dark" content="bilibili" placement="top">
-              <a href="https://space.bilibili.com/2003822" target="_blank">
-                <i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
-              </a>
-            </el-tooltip>
+        <div class="sticky-box">
+          <div class="module">
+            <div class="content paragraph">
+              <el-avatar :size="50" src="/assets/2.png"></el-avatar>
+              <h4>PeterAlbus</h4>
+              <p>若有侵权，深表歉意。可联系删除</p>
+              <el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
+                <a href="mailto:wuhongdb@163.com">
+                  <i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
+                </a>
+              </el-tooltip>
+              <el-tooltip class="item" effect="dark" content="github" placement="top">
+                <a href="https://github.com/PeterAlbus" target="_blank">
+                  <i class="fa fa-fw fa-github" style="font-size:20px"></i>
+                </a>
+              </el-tooltip>
+              <el-tooltip class="item" effect="dark" content="bilibili" placement="top">
+                <a href="https://space.bilibili.com/2003822" target="_blank">
+                  <i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
+                </a>
+              </el-tooltip>
+            </div>
           </div>
-        </div>
-        <div class="module">
-          <h2 class="title">友情链接</h2>
-          <div class="content paragraph">
-            <p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
+          <div class="module">
+            <h2 class="title"><el-icon style="vertical-align: -10%"><link-icon /></el-icon>友情链接</h2>
+            <div class="content paragraph">
+              <p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
+            </div>
           </div>
         </div>
       </el-col>
@@ -90,7 +92,9 @@
 </template>
 
 <script>
+import {Link} from "@element-plus/icons-vue";
 export default {
+  components:{LinkIcon:Link},
   name: "Photo",
   data(){
     return {
diff --git a/src/views/Types.vue b/src/views/Types.vue
index be85034..bfe3768 100644
--- a/src/views/Types.vue
+++ b/src/views/Types.vue
@@ -69,31 +69,33 @@
       </div>
     </el-col>
     <el-col :lg="{span:6}" :sm="9">
-      <div class="module">
-        <div class="content paragraph">
-          <el-avatar :size="50" src="/assets/2.png"></el-avatar>
-          <h4>PeterAlbus</h4>
-          <el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
-            <a href="mailto:wuhongdb@163.com">
-              <i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
-            </a>
-          </el-tooltip>
-          <el-tooltip class="item" effect="dark" content="github" placement="top">
-            <a href="https://github.com/PeterAlbus" target="_blank">
-              <i class="fa fa-fw fa-github" style="font-size:20px"></i>
-            </a>
-          </el-tooltip>
-          <el-tooltip class="item" effect="dark" content="bilibili" placement="top">
-            <a href="https://space.bilibili.com/2003822" target="_blank">
-              <i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
-            </a>
-          </el-tooltip>
+      <div class="sticky-box">
+        <div class="module">
+          <div class="content paragraph">
+            <el-avatar :size="50" src="/assets/2.png"></el-avatar>
+            <h4>PeterAlbus</h4>
+            <el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
+              <a href="mailto:wuhongdb@163.com">
+                <i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
+              </a>
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" content="github" placement="top">
+              <a href="https://github.com/PeterAlbus" target="_blank">
+                <i class="fa fa-fw fa-github" style="font-size:20px"></i>
+              </a>
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" content="bilibili" placement="top">
+              <a href="https://space.bilibili.com/2003822" target="_blank">
+                <i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
+              </a>
+            </el-tooltip>
+          </div>
         </div>
-      </div>
-      <div class="module">
-        <h2 class="title">友情链接</h2>
-        <div class="content paragraph">
-          <p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
+        <div class="module">
+          <h2 class="title"><el-icon style="vertical-align: -10%"><link-icon /></el-icon>友情链接</h2>
+          <div class="content paragraph">
+            <p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
+          </div>
         </div>
       </div>
     </el-col>
@@ -101,9 +103,9 @@
 </template>
 
 <script>
-import {Avatar,StarFilled,Clock} from "@element-plus/icons-vue";
+import {Avatar,StarFilled,Clock,Link} from "@element-plus/icons-vue";
 export default {
-  components:{Avatar,StarFilled,Clock},
+  components:{Avatar,StarFilled,Clock,LinkIcon:Link},
   name: "Types",
   data(){
     return {
diff --git a/src/views/UploadPhoto.vue b/src/views/UploadPhoto.vue
index 2d38a46..fc8a0af 100644
--- a/src/views/UploadPhoto.vue
+++ b/src/views/UploadPhoto.vue
@@ -2,12 +2,12 @@
   <div class="banner">
     <div class="banner-container">
       <div>
-        <h1>分类查看</h1>
+        <h1>上传图片</h1>
       </div>
     </div>
   </div>
-  <el-row class="main-container">
-    <el-col :span="16" :offset="4">
+  <el-row class="main-container" style="justify-content: center;align-items: center">
+    <div style="width: 250px">
       <el-form>
         <el-form-item label="图片名称">
           <el-input v-model="imgName"></el-input>
@@ -16,77 +16,86 @@
           <el-upload
               class="avatar-uploader"
               action="https://www.peteralbus.com:8089/photo/upload/"
-              ref="upload"
-              list-type="picture-card"
+              ref="uploadRef"
               :data="upData"
               :show-file-list="false"
               :on-success="handleAvatarSuccess"
               :before-upload="beforeAvatarUpload"
-              :auto-upload="false">
-            <img v-if="imageUrl" :src="imageUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              :auto-upload="false"
+              :on-change="onFileChange"
+          >
+            <img style="width: 178px; height: 178px"  v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
+            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
           </el-upload>
         </el-form-item>
         <el-button v-on:click="submitUpload">上传</el-button>
       </el-form>
-    </el-col>
+    </div>
   </el-row>
 
 </template>
 
-<script>
-export default {
-  name: "UploadPhoto",
-  data() {
-    return {
-      imgName:'',
-      imageUrl: '',
-      friendLinkList:[
-        {
-          linkId:1,
-          linkName:'loading',
-          linkUrl:'#'
-        }
-      ]
-    }
-  },
-  created() {
-    this.getFriendLinkList()
-  },
-  methods: {
-    submitUpload() {
-      this.$refs.upload.submit();
-    },
-    handleAvatarSuccess(res, file) {
-      this.imageUrl = URL.createObjectURL(file.raw);
-    },
-    beforeAvatarUpload(file) {
-      // const isJPG = file.type === 'image/jpeg';
-      // const isLt2M = file.size / 1024 / 1024 < 2;
-      //
-      // if (!isJPG) {
-      //   this.$message.error('上传头像图片只能是 JPG 格式!');
-      // }
-      // if (!isLt2M) {
-      //   this.$message.error('上传头像图片大小不能超过 2MB!');
-      // }
-      return true;
-    },
-    getFriendLinkList: function (){
-      let that=this;
-      that.$axios.get('friendLink/getFriendLinkList')
-          .then(res=>{
-            that.friendLinkList=res.data;
-          })
-    }
-  },
-  computed:{
-    upData:function () {
-      let data={imgName:this.imgName}
-      return data
-    }
+<script setup lang="ts">
+import {Plus} from '@element-plus/icons-vue'
+import {computed, onMounted, ref} from "vue";
+import type {ElUpload, UploadFile, UploadProgressEvent, UploadRawFile} from "element-plus";
+import {ElMessage} from "element-plus";
+import axios from "axios";
+import router from "@/router";
+
+const uploadRef=ref<InstanceType<typeof ElUpload>>()
+
+
+let imgName=ref('')
+let imageUrl=ref('')
+let friendLinkList=ref([
+  {
+    linkId:1,
+    linkName:'loading',
+    linkUrl:'#'
   }
+])
+
+const getFriendLinkList=function () {
+  axios.get('friendLink/getFriendLinkList')
+      .then(res => {
+        friendLinkList.value = res.data;
+      })
+}
+
+const submitUpload = ()=>{
+  uploadRef.value!.submit();
 }
+
+const handleAvatarSuccess = (res: UploadProgressEvent, file: UploadFile) => {
+  ElMessage.success("上传成功")
+  router.push('/photo')
+}
+
+const onFileChange = (file: UploadFile, fileList: UploadFile[])=>{
+  imageUrl.value = URL.createObjectURL(file.raw!)
+}
+
+const beforeAvatarUpload = (file: UploadRawFile) => {
+  const isIMG = file.type === 'image/jpeg'||file.type === 'image/png'||file.type === 'image/gif'
+  const isLt2M = file.size / 1024 / 1024 < 2
+
+  if (!isIMG) {
+    ElMessage.error('选择的文件不是图片！')
+  }
+  if (!isLt2M) {
+    ElMessage.error('图片大小不能超过2M！')
+  }
+  return isIMG && isLt2M
+}
+
+const upData=computed(()=>{
+  return {imgName: imgName.value}
+})
+
+onMounted(()=>{
+  getFriendLinkList()
+})
 </script>
 
 <style scoped>
@@ -108,28 +117,4 @@ export default {
   line-height: 1.5;
   color: #eee;
 }
-
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409EFF;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 150px;
-  height: 150px;
-  line-height: 150px;
-  text-align: center;
-}
-.avatar {
-  width: 150px;
-  height: 150px;
-  display: block;
-}
 </style>
diff --git a/vite.config.ts b/vite.config.ts
index 4c69c2c..eef7ec7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,7 @@ import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
+import prismjs from 'vite-plugin-prismjs';
 import * as Path from 'path'
 
 // https://vitejs.dev/config/
@@ -16,6 +17,9 @@ export default defineConfig(({command, mode}) => {
             Components({
                 resolvers: [ElementPlusResolver()],
             }),
+            prismjs({
+                languages: ['json','typescript'],
+            }),
         ],
         resolve:{
           alias:{