diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..d93636a
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,38 @@
+[*]
+charset=utf-8
+end_of_line=lf
+insert_final_newline=false
+indent_style=space
+indent_size=2
+
+[{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}]
+indent_style=space
+indent_size=2
+
+[{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}]
+indent_style=space
+indent_size=2
+
+[{.babelrc,.stylelintrc,jest.config,.eslintrc,.prettierrc,*.json,*.jsb3,*.jsb2,*.bowerrc}]
+indent_style=space
+indent_size=2
+
+[*.svg]
+indent_style=space
+indent_size=2
+
+[*.js.map]
+indent_style=space
+indent_size=2
+
+[*.less]
+indent_style=space
+indent_size=2
+
+[{*.vue,*.ts,*.tsx}]
+indent_style=space
+indent_size=2
+
+[{.analysis_options,*.yml,*.yaml}]
+indent_style=space
+indent_size=2
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..e69de29
diff --git a/.eslintrc.js b/.eslintrc.js
index 4387f38..46c4827 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,8 +4,8 @@ module.exports = {
     node: true,
   },
   extends: [
-    'plugin:vue/vue3-essential',
     'eslint:recommended',
+    'plugin:vue/vue3-essential',
     '@vue/typescript/recommended',
     '@vue/eslint-config-typescript',
     'plugin:import/recommended',
@@ -28,6 +28,10 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'quote-props': 'off',
+    // 结尾必须有逗号(主要缓解增加一行对象属性，导致 git 变更记录是两行的情况)
+    'comma-dangle': ['error', 'always-multiline'],
+    // 逗号必须在一行的结尾
+    'comma-style': ['error', 'last'],
     // 禁止混合使用不同的操作符 'error','off'
     'no-mixed-operators': 'off',
     // 禁止未使用过的变量 default: ['error', { vars: 'local' }]
@@ -35,21 +39,53 @@ module.exports = {
     // 强制在代码块中开括号前和闭括号后有空格
     'block-spacing': ['error', 'always'],
     'object-curly-spacing': ['error', 'always'],
+    // 要求使用分号代替 ASI (semi)
+    semi: ['error', 'always'],
+    quotes: [
+      2,
+      'single',
+      {
+        avoidEscape: true,
+        allowTemplateLiterals: true,
+      },
+    ],
+    /* vue 项目专用 */
+    'vue/require-default-prop': 'off',
+    'vue/singleline-html-element-content-newline': ['off'],
+    // 模板中组件名称使用 kebab-case 模式
+    'vue/component-name-in-template-casing': [
+      'error',
+      'kebab-case',
+      {
+        registeredComponentsOnly: true,
+        ignores: [],
+      },
+    ],
+    'vue/custom-event-name-casing': 'off',
     /* typescript */
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/no-var-requires': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/consistent-type-imports': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
+    // disable `function-return` the rule for all files
+    '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
+    ],
+    // bug fix
+    'template-curly-spacing': 'off',
+    'vue/experimental-script-setup-vars': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
   },
   overrides: [
     {
-      files: ["*.html"],
+      files: ['*.html'],
       rules: {
         // https://github.com/vuejs/eslint-plugin-vue/issues/1355
-        "vue/comment-directive": "off",
+        'vue/comment-directive': 'off',
       },
     },
   ],
-}
+};
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..1e1f992
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+.gitattributes export-ignore
+.github export-ignore
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..95e7615
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,37 @@
+**/*.svg
+package.json
+lib/
+es/
+dist/
+_site/
+coverage/
+CNAME
+LICENSE
+yarn.lock
+netlify.toml
+yarn-error.log
+*.sh
+*.snap
+.gitignore
+.npmignore
+.prettierignore
+.DS_Store
+.editorconfig
+.eslintignore
+**/*.yml
+components/style/color/*.less
+**/assets
+.gitattributes
+.stylelintrc
+.vcmrc
+.png
+.jpg
+.npmrc.template
+.huskyrc
+.browserslistrc
+.env
+.env.*
+.vscode/
+*.conf
+Dockerfile
+**/*.ico
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..3ccb6b6
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,17 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "endOfLine": "lf",
+  "printWidth": 100,
+  "proseWrap": "never",
+  "arrowParens": "avoid",
+  "htmlWhitespaceSensitivity": "ignore",
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
deleted file mode 100644
index 571f310..0000000
--- a/CHANGELOG.md
+++ /dev/null
@@ -1,4 +0,0 @@
-# 0.2.0 (2022-06-06)
-
-
-
diff --git a/build/mock/getMockData.js b/build/mock/getMockData.js
index b275fb9..da644d8 100644
--- a/build/mock/getMockData.js
+++ b/build/mock/getMockData.js
@@ -76,10 +76,7 @@ function getMatchMock(url) {
       } else {
         return url.indexOf(whiteUrl) != -1;
       }
-    }) != -1 &&
-    mockList
-      .filter(item => url.indexOf(item.path) != -1)
-      .sort((a, b) => b.path.length - a.path.length)[0]
+    }) != -1 && mockList.filter(item => url.indexOf(item.path) != -1).sort((a, b) => b.path.length - a.path.length)[0]
   );
 }
 function mockHandle(handler) {
diff --git a/mock/index.js b/mock/index.js
index 7dd6b3c..0a5d82e 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -1,5 +1,5 @@
-const prose = require('./modules/prose')
-
-module.exports = {
-  ...prose
-}
\ No newline at end of file
+const prose = require('./modules/prose');
+
+module.exports = {
+  ...prose,
+};
\ No newline at end of file
diff --git a/mock/modules/prose.js b/mock/modules/prose.js
index 3646811..58ee6de 100644
--- a/mock/modules/prose.js
+++ b/mock/modules/prose.js
@@ -1,25 +1,23 @@
-
-const list = [
-  { prose: '🔖 躲在某一时间，想念一段时光的掌纹;躲在某一地点，想念一个站在来路也站在去路的，让我牵挂的人。' },
-  { prose: '🔖 天空一碧如洗，灿烂的阳光正从密密的松针的缝隙间射下来，形成一束束粗粗细细的光柱，把飘荡着轻纱般薄雾的林荫照得通亮。' },
-  { prose: '🔖 这一次相遇，美得彻骨，美得震颤，美得孤绝，美得惊艳。' },
-  { prose: '🔖 沉默的状态，能让我感觉到呼吸的自由和自己原来就处于的本色位置。' },
-  { prose: '🔖 青春，是一包象征着阳光的向日葵种子，在现在洒下，就会在未来得到收获，那一株株饱含青春的花朵。' },
-  { prose: '🔖 燕子去了，有再来的时候;杨柳枯了，有再青的时候;桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢?' },
-  { prose: '🔖 毕业了，青春在无形之中离去，我们即将翻开人生的另一页。' },
-  { prose: '🔖 成长，是每个孩子的权力，也是他们必经的征程，或平坦、或崎岖，有悲欢，有离合。' },
-  { prose: '🔖 旧时光里的人和事，琐碎而零乱。我的记忆很模糊，好像大部分都成了一种温馨的符号，静静的沉在我心底。' },
-  { prose: '🔖 生活是一部大百科全书，包罗万象;生活是一把六弦琴，弹奏出多重美妙的旋律：生活是一座飞马牌大钟，上紧发条，便会使人获得浓缩的生命。' },
-  { prose: '🔖 毕业了，身边的朋友一个个各奔东西，开始学会自己撑起生命的暖色。' },
-  { prose: '🔖 已经走到尽头的东西，重生也不过是再一次的消亡。就像所有的开始，其实都只是一个写好了的结局。' },
-  { prose: '🔖 下午茶的芬香熏陶着房内的任何一个角落，午后的阳光透过窗帘的间隙洒在木制的桌面上，一份思念随着红茶顺滑至心中。' },
-  { prose: '🔖 这里再不是我们的校园，当我们就此离开我们的青葱岁月。' },
-  { prose: '🔖 很久找你，一直没有找到，微风吹过的时候，我深深的呼吸，才感觉到你也在陪伴着我呼吸。' }
-]
-
-
-module.exports = {
-  'GET /api/project/prose': (req, res) => {
-    res.json(list[Math.floor(Math.random() * 8)])
-  }
-}
+const list = [
+  { prose: '🔖 躲在某一时间，想念一段时光的掌纹;躲在某一地点，想念一个站在来路也站在去路的，让我牵挂的人。' },
+  { prose: '🔖 天空一碧如洗，灿烂的阳光正从密密的松针的缝隙间射下来，形成一束束粗粗细细的光柱，把飘荡着轻纱般薄雾的林荫照得通亮。' },
+  { prose: '🔖 这一次相遇，美得彻骨，美得震颤，美得孤绝，美得惊艳。' },
+  { prose: '🔖 沉默的状态，能让我感觉到呼吸的自由和自己原来就处于的本色位置。' },
+  { prose: '🔖 青春，是一包象征着阳光的向日葵种子，在现在洒下，就会在未来得到收获，那一株株饱含青春的花朵。' },
+  { prose: '🔖 燕子去了，有再来的时候;杨柳枯了，有再青的时候;桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢?' },
+  { prose: '🔖 毕业了，青春在无形之中离去，我们即将翻开人生的另一页。' },
+  { prose: '🔖 成长，是每个孩子的权力，也是他们必经的征程，或平坦、或崎岖，有悲欢，有离合。' },
+  { prose: '🔖 旧时光里的人和事，琐碎而零乱。我的记忆很模糊，好像大部分都成了一种温馨的符号，静静的沉在我心底。' },
+  { prose: '🔖 生活是一部大百科全书，包罗万象;生活是一把六弦琴，弹奏出多重美妙的旋律：生活是一座飞马牌大钟，上紧发条，便会使人获得浓缩的生命。' },
+  { prose: '🔖 毕业了，身边的朋友一个个各奔东西，开始学会自己撑起生命的暖色。' },
+  { prose: '🔖 已经走到尽头的东西，重生也不过是再一次的消亡。就像所有的开始，其实都只是一个写好了的结局。' },
+  { prose: '🔖 下午茶的芬香熏陶着房内的任何一个角落，午后的阳光透过窗帘的间隙洒在木制的桌面上，一份思念随着红茶顺滑至心中。' },
+  { prose: '🔖 这里再不是我们的校园，当我们就此离开我们的青葱岁月。' },
+  { prose: '🔖 很久找你，一直没有找到，微风吹过的时候，我深深的呼吸，才感觉到你也在陪伴着我呼吸。' },
+];
+
+module.exports = {
+  'GET /api/project/prose': (req, res) => {
+    res.json(list[Math.floor(Math.random() * 8)]);
+  },
+};
diff --git a/package.json b/package.json
index 083debf..6d3c47f 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,6 @@
     "dev": "cross-env MOCK_SERVER_PORT=8086 vite",
     "build": "vue-tsc --noEmit && vite build",
     "build:dev": "vue-tsc --noEmit && vite build --mode=development",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
-    "lint": "eslint --fix --ext .js,vue src/",
     "preview": "vite preview",
     "test": "vitest",
     "plop": "plop"
@@ -47,7 +45,9 @@
     "consola": "^2.15.3",
     "cross-env": "^7.0.3",
     "eslint": "^8.17.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.1.0",
     "husky": "^8.0.1",
     "less": "^4.1.2",
@@ -56,6 +56,7 @@
     "plop": "^3.1.0",
     "postcss": "^8.4.16",
     "postcss-px-to-viewport-8-plugin": "^1.1.3",
+    "prettier": "^2.7.1",
     "rollup": "^2.77.2",
     "rollup-plugin-visualizer": "^5.6.0",
     "signale": "^1.4.0",
diff --git a/plop-templates/component/index.hbs b/plop-templates/component/index.hbs
index 33739a0..1f11640 100644
--- a/plop-templates/component/index.hbs
+++ b/plop-templates/component/index.hbs
@@ -1,16 +1,16 @@
-{{#if template}}
-<template>
-  <div></div>
-</template>
-{{/if}}
-
-{{#if script}}
-<script setup lang="ts">
-</script>
-{{/if}}
-
-{{#if style}}
-<style lang="less" scoped>
-</style>
-{{/if}}
-
+{{#if template}}
+<template>
+  <div></div>
+</template>
+{{/if}}
+
+{{#if script}}
+<script setup lang="ts">
+</script>
+{{/if}}
+
+{{#if style}}
+<style lang="less" scoped>
+</style>
+{{/if}}
+
diff --git a/plop-templates/component/prompt.js b/plop-templates/component/prompt.js
index 6b60eec..506d873 100644
--- a/plop-templates/component/prompt.js
+++ b/plop-templates/component/prompt.js
@@ -1,55 +1,55 @@
-const { notEmpty } = require('../utils.js')
-
-module.exports = {
-  description: 'generate vue component',
-  prompts: [{
-    type: 'input',
-    name: 'name',
-    message: 'component name please',
-    validate: notEmpty('name')
-  },
-  {
-    type: 'checkbox',
-    name: 'blocks',
-    message: 'Blocks:',
-    choices: [{
-      name: '<template>',
-      value: 'template',
-      checked: true
-    },
-    {
-      name: '<script>',
-      value: 'script',
-      checked: true
-    },
-    {
-      name: 'style',
-      value: 'style',
-      checked: true
-    }
-    ],
-    validate(value) {
-      if (value.indexOf('script') === -1 && value.indexOf('template') === -1) {
-        return 'Components require at least a <script> or <template> tag.'
-      }
-      return true
-    }
-  }
-  ],
-  actions: data => {
-    const name = '{{properCase name}}'
-    const actions = [{
-      type: 'add',
-      path: `src/components/${name}/index.vue`,
-      templateFile: 'plop-templates/component/index.hbs',
-      data: {
-        name: name,
-        template: data.blocks.includes('template'),
-        script: data.blocks.includes('script'),
-        style: data.blocks.includes('style')
-      }
-    }]
-
-    return actions
-  }
-}
+const { notEmpty } = require('../utils.js');
+
+module.exports = {
+  description: 'generate vue component',
+  prompts: [{
+    type: 'input',
+    name: 'name',
+    message: 'component name please',
+    validate: notEmpty('name'),
+  },
+  {
+    type: 'checkbox',
+    name: 'blocks',
+    message: 'Blocks:',
+    choices: [{
+      name: '<template>',
+      value: 'template',
+      checked: true,
+    },
+    {
+      name: '<script>',
+      value: 'script',
+      checked: true,
+    },
+    {
+      name: 'style',
+      value: 'style',
+      checked: true,
+    },
+    ],
+    validate(value) {
+      if (value.indexOf('script') === -1 && value.indexOf('template') === -1) {
+        return 'Components require at least a <script> or <template> tag.';
+      }
+      return true;
+    },
+  },
+  ],
+  actions: data => {
+    const name = '{{properCase name}}';
+    const actions = [{
+      type: 'add',
+      path: `src/components/${name}/index.vue`,
+      templateFile: 'plop-templates/component/index.hbs',
+      data: {
+        name: name,
+        template: data.blocks.includes('template'),
+        script: data.blocks.includes('script'),
+        style: data.blocks.includes('style'),
+      },
+    }];
+
+    return actions;
+  },
+};
diff --git a/plop-templates/utils.js b/plop-templates/utils.js
index 2ad40d8..90f993e 100644
--- a/plop-templates/utils.js
+++ b/plop-templates/utils.js
@@ -1,2 +1,2 @@
-exports.notEmpty = name => v =>
-  !v || v.trim() === '' ? `${name} is required` : true
+exports.notEmpty = name => v =>
+  !v || v.trim() === '' ? `${name} is required` : true;
diff --git a/plop-templates/view/index.hbs b/plop-templates/view/index.hbs
index 33739a0..1f11640 100644
--- a/plop-templates/view/index.hbs
+++ b/plop-templates/view/index.hbs
@@ -1,16 +1,16 @@
-{{#if template}}
-<template>
-  <div></div>
-</template>
-{{/if}}
-
-{{#if script}}
-<script setup lang="ts">
-</script>
-{{/if}}
-
-{{#if style}}
-<style lang="less" scoped>
-</style>
-{{/if}}
-
+{{#if template}}
+<template>
+  <div></div>
+</template>
+{{/if}}
+
+{{#if script}}
+<script setup lang="ts">
+</script>
+{{/if}}
+
+{{#if style}}
+<style lang="less" scoped>
+</style>
+{{/if}}
+
diff --git a/plop-templates/view/prompt.js b/plop-templates/view/prompt.js
index d04b23e..e556ce0 100644
--- a/plop-templates/view/prompt.js
+++ b/plop-templates/view/prompt.js
@@ -1,55 +1,55 @@
-const { notEmpty } = require('../utils.js')
-
-module.exports = {
-  description: 'generate a view',
-  prompts: [{
-    type: 'input',
-    name: 'name',
-    message: 'view name please',
-    validate: notEmpty('name')
-  },
-  {
-    type: 'checkbox',
-    name: 'blocks',
-    message: 'Blocks:',
-    choices: [{
-      name: '<template>',
-      value: 'template',
-      checked: true
-    },
-    {
-      name: '<script>',
-      value: 'script',
-      checked: true
-    },
-    {
-      name: 'style',
-      value: 'style',
-      checked: true
-    }
-    ],
-    validate(value) {
-      if (value.indexOf('script') === -1 && value.indexOf('template') === -1) {
-        return 'View require at least a <script> or <template> tag.'
-      }
-      return true
-    }
-  }
-  ],
-  actions: data => {
-    const name = '{{name}}'
-    const actions = [{
-      type: 'add',
-      path: `src/views/${name}/index.vue`,
-      templateFile: 'plop-templates/view/index.hbs',
-      data: {
-        name: name,
-        template: data.blocks.includes('template'),
-        script: data.blocks.includes('script'),
-        style: data.blocks.includes('style')
-      }
-    }]
-
-    return actions
-  }
-}
+const { notEmpty } = require('../utils.js');
+
+module.exports = {
+  description: 'generate a view',
+  prompts: [{
+    type: 'input',
+    name: 'name',
+    message: 'view name please',
+    validate: notEmpty('name'),
+  },
+  {
+    type: 'checkbox',
+    name: 'blocks',
+    message: 'Blocks:',
+    choices: [{
+      name: '<template>',
+      value: 'template',
+      checked: true,
+    },
+    {
+      name: '<script>',
+      value: 'script',
+      checked: true,
+    },
+    {
+      name: 'style',
+      value: 'style',
+      checked: true,
+    },
+    ],
+    validate(value) {
+      if (value.indexOf('script') === -1 && value.indexOf('template') === -1) {
+        return 'View require at least a <script> or <template> tag.';
+      }
+      return true;
+    },
+  },
+  ],
+  actions: data => {
+    const name = '{{name}}';
+    const actions = [{
+      type: 'add',
+      path: `src/views/${name}/index.vue`,
+      templateFile: 'plop-templates/view/index.hbs',
+      data: {
+        name: name,
+        template: data.blocks.includes('template'),
+        script: data.blocks.includes('script'),
+        style: data.blocks.includes('style'),
+      },
+    }];
+
+    return actions;
+  },
+};
diff --git a/plopfile.js b/plopfile.js
index 9151cd4..82ba4ac 100644
--- a/plopfile.js
+++ b/plopfile.js
@@ -1,7 +1,7 @@
-const viewGenerator = require('./plop-templates/view/prompt')
-const componentGenerator = require('./plop-templates/component/prompt')
-
-module.exports = function (plop) {
-  plop.setGenerator('view', viewGenerator)
-  plop.setGenerator('component', componentGenerator)
-}
\ No newline at end of file
+const viewGenerator = require('./plop-templates/view/prompt');
+const componentGenerator = require('./plop-templates/component/prompt');
+
+module.exports = function (plop) {
+  plop.setGenerator('view', viewGenerator);
+  plop.setGenerator('component', componentGenerator);
+};
\ No newline at end of file
diff --git a/postcss.config.js b/postcss.config.js
index 279a726..2ebd418 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,9 +1,9 @@
-// postcss.config.js
-module.exports = {
-  plugins: {
-    "autoprefixer": {},
-    'postcss-px-to-viewport-8-plugin': {
-      viewportWidth: 375
-    }
-  }
-}
\ No newline at end of file
+// postcss.config.js
+module.exports = {
+  plugins: {
+    'autoprefixer': {},
+    'postcss-px-to-viewport-8-plugin': {
+      viewportWidth: 375,
+    },
+  },
+};
\ No newline at end of file
diff --git a/scripts/verifyCommit.js b/scripts/verifyCommit.js
index ae7f62b..918c134 100644
--- a/scripts/verifyCommit.js
+++ b/scripts/verifyCommit.js
@@ -1,13 +1,14 @@
-const msg = require('fs').readFileSync('.git/COMMIT_EDITMSG', 'utf-8').trim()
-const commitRE = /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/
-const mergeRe = /^(Merge pull request|Merge branch)/
+const msg = require('fs').readFileSync('.git/COMMIT_EDITMSG', 'utf-8').trim();
+const commitRE =
+  /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/;
+const mergeRe = /^(Merge pull request|Merge branch)/;
 
 if (!commitRE.test(msg)) {
-  if(!mergeRe.test(msg)){
-    console.log('git commit unpass')
-    console.error(`git commit error, needs title(scope): desc`)
-    process.exit(1)
+  if (!mergeRe.test(msg)) {
+    console.log('git commit unpass');
+    console.error(`git commit error, needs title(scope): desc`);
+    process.exit(1);
   }
 } else {
-  console.log('git commit pass')
+  console.log('git commit pass');
 }
diff --git a/src/App.vue b/src/App.vue
index 8c677f0..caaac3f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,26 +5,26 @@
 </template>
 
 <script setup lang="ts">
-import type { ConfigProviderTheme } from 'vant'
-import { localStorage } from '@/utils/local-storage'
-import { useStore } from '@/stores'
+import type { ConfigProviderTheme } from 'vant';
+import { localStorage } from '@/utils/local-storage';
+import { useStore } from '@/stores';
 
-const store = useStore()
-const theme = ref<ConfigProviderTheme>('light')
-const mode = computed(() => store.mode)
+const store = useStore();
+const theme = ref<ConfigProviderTheme>('light');
+const mode = computed(() => store.mode);
 
 watch(mode, (val) => {
   if(val === 'dark' || localStorage.get('theme') === 'dark') {
-    theme.value = 'dark'
+    theme.value = 'dark';
     document.querySelector('html')
-    .setAttribute('data-theme', 'dark')
+    .setAttribute('data-theme', 'dark');
   } else {
-    theme.value = 'light'
+    theme.value = 'light';
     document.querySelector('html')
-    .setAttribute('data-theme', 'light')
+    .setAttribute('data-theme', 'light');
   }
-}, { immediate: true })
+}, { immediate: true });
 
-provide('isRealDark', computed(() => theme.value === 'dark'))
+provide('isRealDark', computed(() => theme.value === 'dark'));
 
 </script>
diff --git a/src/api/index.ts b/src/api/index.ts
index 84a41c6..4205b75 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,5 +1,5 @@
-import request from '@/utils/request'
-
-export async function queryProse(): Promise<any> {
-  return request('/project/prose')
-}
\ No newline at end of file
+import request from '@/utils/request';
+
+export async function queryProse(): Promise<any> {
+  return request('/project/prose');
+}
diff --git a/src/api/typing.ts b/src/api/typing.ts
index 463a9e4..4c28e5d 100644
--- a/src/api/typing.ts
+++ b/src/api/typing.ts
@@ -1,16 +1,16 @@
-export interface ResponseBody<T = any> {
-  message?: string;
-  code?: number;
-  data?: T;
-  success: boolean;
-}
-
-/** 统一返回结构体 */
-
-export interface PageResult<T = any> {
-  data: T[];
-  current?: number;
-  pageSize?: number;
-  total?: number;
-  success: boolean;
-}
+export interface ResponseBody<T = any> {
+  message?: string;
+  code?: number;
+  data?: T;
+  success: boolean;
+}
+
+/** 统一返回结构体 */
+
+export interface PageResult<T = any> {
+  data: T[];
+  current?: number;
+  pageSize?: number;
+  total?: number;
+  success: boolean;
+}
diff --git a/src/components/chart/index.vue b/src/components/chart/index.vue
index 3c55450..43f771e 100644
--- a/src/components/chart/index.vue
+++ b/src/components/chart/index.vue
@@ -3,63 +3,63 @@
 </template>
 
 <script setup lang="ts">
-import type { ECharts } from 'echarts'
-import * as echarts from 'echarts'
-import { debounce } from 'lodash-es'
-import { addListener, removeListener } from 'resize-detector'
-import dark from './dark'
+import type { ECharts } from 'echarts';
+import * as echarts from 'echarts';
+import { debounce } from 'lodash-es';
+import { addListener, removeListener } from 'resize-detector';
+import dark from './dark';
 
-echarts.registerTheme('dark-chart', dark)
+echarts.registerTheme('dark-chart', dark);
 
 const props = defineProps({
-  option: Object
-})
+  option: Object,
+});
 
-const chartDom = ref<HTMLDivElement>()
-let chart: ECharts | null = null
-const isRealDark = inject('isRealDark', ref(false))
+const chartDom = ref<HTMLDivElement>();
+let chart: ECharts | null = null;
+const isRealDark = inject('isRealDark', ref(false));
 const resizeChart = () => {
-  chart?.resize()
-}
+  chart?.resize();
+};
 
-const resize = debounce(resizeChart, 300)
+const resize = debounce(resizeChart, 300);
 
 const disposeChart = () => {
   if (chartDom.value) {
-    removeListener(chartDom.value, resize)
+    removeListener(chartDom.value, resize);
   }
-  chart?.dispose()
-  chart = null
-}
+  chart?.dispose();
+  chart = null;
+};
 
 const initChart = () => {
-  disposeChart()
+  disposeChart();
   if (chartDom.value) {
     // init echarts
-    chart = echarts.init(chartDom.value, isRealDark.value ? 'dark-chart' : undefined)
-    chart.setOption(props.option)
-    addListener(chartDom.value, resize)
+    chart = echarts.init(chartDom.value, isRealDark.value ? 'dark-chart' : undefined);
+    chart.setOption(props.option);
+    addListener(chartDom.value, resize);
   }
-}
+};
 
 watch(isRealDark, () => {
-  initChart()
+  initChart();
 }, { 
-  flush: 'post'
-})
+  flush: 'post',
+});
 
 onMounted(() => {
   watch(() => props.option, () => {
-    chart?.setOption(props.option)
+    chart?.setOption(props.option);
   }, { 
     deep: true,
-    flush: 'post'
-  })
+    flush: 'post',
+  });
 
-  initChart()
-})
+  initChart();
+});
 
 onUnmounted(() => {
-  disposeChart()
-})
+  disposeChart();
+});
 </script>
diff --git a/src/components/index.ts b/src/components/index.ts
index 02b33ec..3cd31d6 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,3 @@
 // charts
-export { default as Chart } from './chart/index.vue'
-export type { SeriesDataItem, RadarDataItem, RadarIndicatorItem } from './chart/typing'
\ No newline at end of file
+export { default as Chart } from './chart/index.vue';
+export type { SeriesDataItem, RadarDataItem, RadarIndicatorItem } from './chart/typing';
diff --git a/src/env.d.ts b/src/env.d.ts
index aafef95..d970c85 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1,8 +1,8 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
+  import type { DefineComponent } from 'vue';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }
diff --git a/src/main.ts b/src/main.ts
index 5bbd3c8..345e319 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,20 +1,20 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-import { createPinia } from 'pinia'
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import { createPinia } from 'pinia';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 
-import './app.less'
+import './app.less';
 
 // Vant 桌面端适配
-import '@vant/touch-emulator'
+import '@vant/touch-emulator';
 
-const app = createApp(App)
-const pinia = createPinia()
-pinia.use(piniaPluginPersistedstate)
+const app = createApp(App);
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 
 app
   .use(router)
-  .use(pinia)
+  .use(pinia);
 
-app.mount('#app')
+app.mount('#app');
diff --git a/src/router/index.ts b/src/router/index.ts
index 41d48b4..d36a174 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,49 +1,51 @@
-// https://router.vuejs.org/zh/
-import { createRouter, createWebHistory } from 'vue-router'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
-NProgress.configure({ showSpinner: true })
-
-// 导入路由组件
-import mian from '@/views/index.vue'
-import mock from '@/views/mock/index.vue'
-import charts from '@/views/charts/index.vue'
-
-// 定义路由，每个路由都需要映射到一个组件
-const routes = [
-  {
-    path: '/',
-    name: 'main',
-    component: mian
-  }, {
-    path: '/mock',
-    name: 'mock',
-    component: mock
-  }, {
-    path: '/charts',
-    name: 'charts',
-    component: charts
-  }
-]
-
-// 创建路由实例并传递 `routes` 配置
-const router = createRouter({
-  history: createWebHistory(),
-  routes,
-  scrollBehavior() {
-    // 始终滚动到顶部
-    return { top: 0 }
-  },
-})
-
-router.beforeEach((_to, _from, next) => {
-  NProgress.start(); // start progress bar
-  next()
-})
-
-router.afterEach(() => {
-  NProgress.done() // finish progress bar
-})
-
-// 导出路由实例，并在 `main.ts` 挂载
-export default router
+// https://router.vuejs.org/zh/
+import { createRouter, createWebHistory } from 'vue-router';
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+NProgress.configure({ showSpinner: true });
+
+// 导入路由组件
+import mian from '@/views/index.vue';
+import mock from '@/views/mock/index.vue';
+import charts from '@/views/charts/index.vue';
+
+// 定义路由，每个路由都需要映射到一个组件
+const routes = [
+  {
+    path: '/',
+    name: 'main',
+    component: mian,
+  },
+  {
+    path: '/mock',
+    name: 'mock',
+    component: mock,
+  },
+  {
+    path: '/charts',
+    name: 'charts',
+    component: charts,
+  },
+];
+
+// 创建路由实例并传递 `routes` 配置
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+  scrollBehavior() {
+    // 始终滚动到顶部
+    return { top: 0 };
+  },
+});
+
+router.beforeEach((_to, _from, next) => {
+  NProgress.start(); // start progress bar
+  next();
+});
+
+router.afterEach(() => {
+  NProgress.done(); // finish progress bar
+});
+
+// 导出路由实例，并在 `main.ts` 挂载
+export default router;
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 734d138..c56a5d1 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -1,10 +1,10 @@
-import { defineStore } from 'pinia'
-
-export const useStore = defineStore({
-	id: 'index',
-	persist: true,
-	state: () => ({
-		// light || dark
-		mode: ''
-	})
-})
\ No newline at end of file
+import { defineStore } from 'pinia';
+
+export const useStore = defineStore({
+  id: 'index',
+  persist: true,
+  state: () => ({
+    // light || dark
+    mode: '',
+  }),
+});
diff --git a/src/stores/mutation-type.ts b/src/stores/mutation-type.ts
index 679bbd5..996615e 100644
--- a/src/stores/mutation-type.ts
+++ b/src/stores/mutation-type.ts
@@ -1,2 +1,2 @@
-export const STORAGE_TOKEN_KEY = 'access_token'
-export const STORAGE_LANG_KEY = 'app_lang'
+export const STORAGE_TOKEN_KEY = 'access_token';
+export const STORAGE_LANG_KEY = 'app_lang';
diff --git a/src/typing.ts b/src/typing.ts
index 575b2d2..1ae38a3 100644
--- a/src/typing.ts
+++ b/src/typing.ts
@@ -1,2 +1,2 @@
-import type { Ref } from 'vue'
+import type { Ref } from 'vue';
 export type MaybeRef<T> = T | Ref<T>
diff --git a/src/utils/hooks/useFetchData.ts b/src/utils/hooks/useFetchData.ts
index 7c9b1e2..88ff45d 100644
--- a/src/utils/hooks/useFetchData.ts
+++ b/src/utils/hooks/useFetchData.ts
@@ -176,8 +176,7 @@ export const useFetchData = <T extends ReponseData<any>>(
     { immediate: true, deep: true },
   );
 
-  const stripe = (_: any, index: number) =>
-    index % 2 === 1 && state.stripe && 'ant-pro-table-row-striped';
+  const stripe = (_: any, index: number) => index % 2 === 1 && state.stripe && 'ant-pro-table-row-striped';
 
   return {
     stripe,
diff --git a/src/utils/local-storage.ts b/src/utils/local-storage.ts
index 4b21255..f45b80c 100644
--- a/src/utils/local-storage.ts
+++ b/src/utils/local-storage.ts
@@ -1,9 +1,9 @@
-import store from 'store'
-import expirePlugin from 'store/plugins/expire'
+import store from 'store';
+import expirePlugin from 'store/plugins/expire';
 
 // plugin usage:
-store.addPlugin(expirePlugin)
+store.addPlugin(expirePlugin);
 
-export { store as localStorage }
+export { store as localStorage };
 
-export default store
\ No newline at end of file
+export default store;
diff --git a/src/utils/request.ts b/src/utils/request.ts
index ba36f7c..3ce9b17 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -1,76 +1,74 @@
-import type { AxiosRequestConfig, AxiosError } from 'axios'
-import axios, { AxiosResponse } from 'axios'
-import { localStorage } from '@/utils/local-storage'
-import { STORAGE_TOKEN_KEY } from '@/stores/mutation-type'
-import { showNotify } from 'vant'
+import type { AxiosRequestConfig, AxiosError } from 'axios';
+import axios, { AxiosResponse } from 'axios';
+import { localStorage } from '@/utils/local-storage';
+import { STORAGE_TOKEN_KEY } from '@/stores/mutation-type';
+import { showNotify } from 'vant';
 
 // 这里是用于设定请求后端时，所用的 Token KEY
 // 可以根据自己的需要修改，常见的如 Access-Token，Authorization
 // 需要注意的是，请尽量保证使用中横线`-` 来作为分隔符，
 // 避免被 nginx 等负载均衡器丢弃了自定义的请求头
-export const REQUEST_TOKEN_KEY = 'Access-Token'
+export const REQUEST_TOKEN_KEY = 'Access-Token';
 
 // 创建 axios 实例
 const request = axios.create({
   // API 请求的默认前缀
   baseURL: process.env.VUE_APP_API_BASE_URL,
   timeout: 6000, // 请求超时时间
-})
+});
 
 export type RequestError = AxiosError<{
-  message?: string,
-  result?: any,
-  errorMessage?: string
-}>
+  message?: string;
+  result?: any;
+  errorMessage?: string;
+}>;
 
 // 异常拦截处理器
 const errorHandler = (error: RequestError): Promise<any> => {
   if (error.response) {
-    const { data = {}, status, statusText } = error.response
+    const { data = {}, status, statusText } = error.response;
     // 403 无权限
     if (status === 403) {
       showNotify({
         type: 'danger',
-        message: (data && data.message) || statusText
-      })
+        message: (data && data.message) || statusText,
+      });
     }
     // 401 未登录/未授权
     if (status === 401 && data.result && data.result.isLogin) {
       showNotify({
         type: 'danger',
-        message: 'Authorization verification failed'
-      })
+        message: 'Authorization verification failed',
+      });
       // 如果你需要直接跳转登录页面
       // location.replace(loginRoutePath)
     }
   }
-  return Promise.reject(error)
-}
+  return Promise.reject(error);
+};
 
 // 请求拦截器
-const requestHandler = (
-  config: AxiosRequestConfig,
-): AxiosRequestConfig | Promise<AxiosRequestConfig> => {
-  const savedToken = localStorage.get(STORAGE_TOKEN_KEY)
+const requestHandler = (config: AxiosRequestConfig): AxiosRequestConfig | Promise<AxiosRequestConfig> => {
+  const savedToken = localStorage.get(STORAGE_TOKEN_KEY);
   // 如果 token 存在
   // 让每个请求携带自定义 token, 请根据实际情况修改
   if (savedToken) {
-    config.headers[REQUEST_TOKEN_KEY] = savedToken
+    config.headers[REQUEST_TOKEN_KEY] = savedToken;
   }
-  return config
-}
+  return config;
+};
 
 // Add a request interceptor
-request.interceptors.request.use(requestHandler, errorHandler)
+request.interceptors.request.use(requestHandler, errorHandler);
 
 // 响应拦截器
 const responseHandler = (response: AxiosResponse<any>) => {
-  return response.data
-}
+  return response.data;
+};
 
 // Add a response interceptor
-request.interceptors.response.use(responseHandler, errorHandler)
+request.interceptors.response.use(responseHandler, errorHandler);
 
-export { AxiosResponse }
+export { AxiosResponse };
 
-export default request
+export default request;
diff --git a/src/views/charts/index.vue b/src/views/charts/index.vue
index ff576dd..1b7d959 100644
--- a/src/views/charts/index.vue
+++ b/src/views/charts/index.vue
@@ -17,67 +17,67 @@
 </template>
 
 <script setup lang="ts">
-import { Chart } from '@/components'
+import { Chart } from '@/components';
 
 const barOption = {
   title: {},
   tooltip: {},
   xAxis: {
-    data: ['1月', '2月', '3月', '4月', '5月', '6月']
+    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
   },
   yAxis: {},
   series: [
     {
       name: 'sales',
       type: 'bar',
-      data: [5, 20, 36, 10, 10, 20]
-    }
-  ]
-}
+      data: [5, 20, 36, 10, 10, 20],
+    },
+  ],
+};
 
 const lineOption = {
   xAxis: {
     type: 'category',
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
   },
   yAxis: {
-    type: 'value'
+    type: 'value',
   },
   series: [
     {
       data: [150, 230, 224, 218, 135, 147, 260],
-      type: 'line'
-    }
-  ]
-}
+      type: 'line',
+    },
+  ],
+};
 
 const scoreOption = {
   tooltip: {
-    formatter: '{a} <br/>{b} : {c}%'
+    formatter: '{a} <br/>{b} : {c}%',
   },
   series: [
     {
       name: 'Pressure',
       type: 'gauge',
       detail: {
-        formatter: '{value}'
+        formatter: '{value}',
       },
       data: [
         {
           value: 50,
-          name: 'SCORE'
-        }
-      ]
-    }
-  ]
-}
+          name: 'SCORE',
+        },
+      ],
+    },
+  ],
+};
 
-const refBarOption = ref(barOption)
-const refLineOption = ref(lineOption)
-const refScoreOption = ref(scoreOption)
+const refBarOption = ref(barOption);
+const refLineOption = ref(lineOption);
+const refScoreOption = ref(scoreOption);
 
 // back
-const onClickLeft = () => history.back()
+const onClickLeft = () => history.back();
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/index.vue b/src/views/index.vue
index 5440a8b..f90a716 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,65 +1,65 @@
-<template>
-  <div class="container">
-    <div class="logo"></div>
-    <van-cell-group title="Do more difficult things" inset>
-      <van-cell center title="🌗 暗黑模式">
-        <template #right-icon>
-          <van-switch v-model="checked" size="18px" />
-        </template>
-      </van-cell>
-
-      <van-cell title="💿 mock 指南" to="mock" is-link />
-
-      <van-cell title="📊 charts 演示" to="charts" is-link />
-      
-      <van-cell center>
-        <template #title>
-          <span class="custom-title">🎨 小游戏</span>
-          <van-tag type="primary">敬请期待</van-tag>
-        </template>
-      </van-cell>
-    </van-cell-group>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useStore } from '@/stores'
-import { localStorage } from '@/utils/local-storage'
-
-const store = useStore()
-const themeStore = localStorage.get('theme')
-const checked = ref<boolean>(themeStore === 'dark' ? true: false)
-
-watch(checked,(val) => {
-  if(val) {
-    store.mode = 'dark'
-    localStorage.set('theme', 'dark')
-  } else {
-    store.mode = 'light'
-    localStorage.set('theme', 'light')
-  }
-})
-</script>
-
-<style lang="less" scoped>
-.container {
-  width: 100vw;
-  height: 100vh;
-  padding-top: 30px;
-  position: relative;
-
-  .logo {
-    width: 150px;
-    height: 150px;
-    background-image: url('@/assets/logo.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    background-position: center;
-  }
-
-  .custom-title {
-    margin-right: 4px;
-    vertical-align: middle;
-  }
-}
-</style>
+<template>
+  <div class="container">
+    <div class="logo"></div>
+    <van-cell-group title="Do more difficult things" inset>
+      <van-cell center title="🌗 暗黑模式">
+        <template #right-icon>
+          <van-switch v-model="checked" size="18px" />
+        </template>
+      </van-cell>
+
+      <van-cell title="💿 mock 指南" to="mock" is-link />
+
+      <van-cell title="📊 charts 演示" to="charts" is-link />
+      
+      <van-cell center>
+        <template #title>
+          <span class="custom-title">🎨 小游戏</span>
+          <van-tag type="primary">敬请期待</van-tag>
+        </template>
+      </van-cell>
+    </van-cell-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useStore } from '@/stores';
+import { localStorage } from '@/utils/local-storage';
+
+const store = useStore();
+const themeStore = localStorage.get('theme');
+const checked = ref<boolean>(themeStore === 'dark' ? true: false);
+
+watch(checked,(val) => {
+  if(val) {
+    store.mode = 'dark';
+    localStorage.set('theme', 'dark');
+  } else {
+    store.mode = 'light';
+    localStorage.set('theme', 'light');
+  }
+});
+</script>
+
+<style lang="less" scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  padding-top: 30px;
+  position: relative;
+
+  .logo {
+    width: 150px;
+    height: 150px;
+    background-image: url('@/assets/logo.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
+  }
+
+  .custom-title {
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+}
+</style>
diff --git a/src/views/mock/index.vue b/src/views/mock/index.vue
index 438daf4..3957d08 100644
--- a/src/views/mock/index.vue
+++ b/src/views/mock/index.vue
@@ -1,72 +1,72 @@
-<template>
-  <van-nav-bar title="💿 mock 指南" @click-left="onClickLeft" left-arrow fixed/>
-
-  <div class="container">
-    <div class="data-label"> 来自异步请求的数据 </div>
-    <div class="data-content">
-      <div v-if="messages">{{ messages }}</div>
-      <van-empty v-else description="暂无数据" />
-    </div>
-
-    <van-button round block type="primary" @click="pull">请求</van-button>
-    <van-button round block type="default" @click="reset">清空</van-button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { queryProse } from '@/api'
-
-const messages = ref<string>('')
-
-const pull = () => {
-  queryProse().then(res => {
-    messages.value = res.prose
-  })
-}
-
-// reset data
-const reset = () => messages.value = ''
-
-// back
-const onClickLeft = () => history.back()
-
-</script>
-
-<style lang="less" scoped>
-.container {
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-  padding: 74px 30px;
-
-  .data-label {
-    color: #969799;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 16px;
-  }
-
-  .data-content {
-    height: 300px;
-    padding: 20px;
-    line-height: 30px;
-    background: #fff;
-    margin-top: 20px;
-    border-radius: 15px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-[data-theme='dark'] {
-  .data-content {
-    background: #222;
-    color: #fff;
-  }
-}
-
-.van-button--block {
-  margin-top: 15px;
-}
-</style>
+<template>
+  <van-nav-bar title="💿 mock 指南" @click-left="onClickLeft" left-arrow fixed/>
+
+  <div class="container">
+    <div class="data-label"> 来自异步请求的数据 </div>
+    <div class="data-content">
+      <div v-if="messages">{{ messages }}</div>
+      <van-empty v-else description="暂无数据" />
+    </div>
+
+    <van-button round block type="primary" @click="pull">请求</van-button>
+    <van-button round block type="default" @click="reset">清空</van-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { queryProse } from '@/api';
+
+const messages = ref<string>('');
+
+const pull = () => {
+  queryProse().then(res => {
+    messages.value = res.prose;
+  });
+};
+
+// reset data
+const reset = () => messages.value = '';
+
+// back
+const onClickLeft = () => history.back();
+
+</script>
+
+<style lang="less" scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  padding: 74px 30px;
+
+  .data-label {
+    color: #969799;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+  }
+
+  .data-content {
+    height: 300px;
+    padding: 20px;
+    line-height: 30px;
+    background: #fff;
+    margin-top: 20px;
+    border-radius: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+[data-theme='dark'] {
+  .data-content {
+    background: #222;
+    color: #fff;
+  }
+}
+
+.van-button--block {
+  margin-top: 15px;
+}
+</style>
diff --git a/tests/index.spec.ts b/tests/index.spec.ts
index a5b31a3..9fbd571 100644
--- a/tests/index.spec.ts
+++ b/tests/index.spec.ts
@@ -1,3 +1,3 @@
 test('first test', () => {
-  expect(1 + 1).toBe(2)
-})
+  expect(1 + 1).toBe(2);
+});
diff --git a/vite.config.ts b/vite.config.ts
index dd4cbf7..8272df5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,29 +1,29 @@
-import path from 'path'
-import { loadEnv } from 'vite'
-import type { ConfigEnv, UserConfig } from 'vite'
+import path from 'path';
+import { loadEnv } from 'vite';
+import type { ConfigEnv, UserConfig } from 'vite';
 
-import { visualizer } from 'rollup-plugin-visualizer'
-import Components from 'unplugin-vue-components/vite'
-import AutoImport from 'unplugin-auto-import/vite'
-import { VantResolver } from 'unplugin-vue-components/resolvers'
+import { visualizer } from 'rollup-plugin-visualizer';
+import Components from 'unplugin-vue-components/vite';
+import AutoImport from 'unplugin-auto-import/vite';
+import { VantResolver } from 'unplugin-vue-components/resolvers';
 
-import vue from '@vitejs/plugin-vue'
-import legacy from '@vitejs/plugin-legacy'
-import vueJsx from '@vitejs/plugin-vue-jsx'
+import vue from '@vitejs/plugin-vue';
+import legacy from '@vitejs/plugin-legacy';
+import vueJsx from '@vitejs/plugin-vue-jsx';
 
-import { viteVConsole } from 'vite-plugin-vconsole'
-import mock from './build/mock/createMockServer'
+import { viteVConsole } from 'vite-plugin-vconsole';
+import mock from './build/mock/createMockServer';
 
 export default ({ command, mode }: ConfigEnv): UserConfig => {
-  const root = process.cwd()
-  const env = loadEnv(mode, root)
+  const root = process.cwd();
+  const env = loadEnv(mode, root);
   
   return {
     base: env.VITE_APP_PUBLIC_PATH,
 
     define: {
       'process.env.VUE_APP_API_BASE_URL': JSON.stringify(env.VITE_APP_API_BASE_URL),
-      'process.env.VUE_APP_PUBLIC_PATH': JSON.stringify(env.VITE_APP_PUBLIC_PATH)
+      'process.env.VUE_APP_PUBLIC_PATH': JSON.stringify(env.VITE_APP_PUBLIC_PATH),
     },
 
     plugins: [
@@ -32,13 +32,13 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       visualizer(),
 
       legacy({
-        targets: ['defaults', 'not IE 11']
+        targets: ['defaults', 'not IE 11'],
       }),
 
       Components({
         dts: true,
         resolvers: [VantResolver()],
-        types: []
+        types: [],
       }),
 
       AutoImport({
@@ -50,12 +50,12 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         imports: [
           'vue',
           'vue-router',
-          'vitest'
+          'vitest',
         ],
         dts: true,
         eslintrc: {
-          enabled: true
-        }
+          enabled: true,
+        },
       }),
 
       viteVConsole({
@@ -64,8 +64,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         enabled: false,
         config: {
           maxLogNumber: 1000,
-          theme: 'light'
-        }
+          theme: 'light',
+        },
       }),
 
       mock({
@@ -73,20 +73,20 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         mockUrlList: [/api/],
         cwd: process.cwd(),
         enable: env.VITE_HTTP_MOCK && env.VITE_MOCK && process.env.NODE_ENV !== 'production',
-      })
+      }),
     ],
 
     build: {
       cssCodeSplit: false,
-      chunkSizeWarningLimit: 2048
+      chunkSizeWarningLimit: 2048,
     },
     
     resolve: {
       alias: {
         '~@': path.join(__dirname, './src'),
         '@': path.join(__dirname, './src'),
-        '~': path.join(__dirname, './src/assets')
-      }
+        '~': path.join(__dirname, './src/assets'),
+      },
     },
 
     server: {
@@ -98,8 +98,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
           target: '',
           ws: false,
           changeOrigin: true,
-        }
-      }
-    }
-  }
-}
+        },
+      },
+    },
+  };
+};
diff --git a/yarn.lock b/yarn.lock
index c2d97ee..3d6d1eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2663,6 +2663,11 @@ escape-string-regexp@^5.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
   integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
 
+eslint-config-prettier@^8.5.0:
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
+  integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
+
 eslint-import-resolver-node@^0.3.6:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd"
@@ -2698,6 +2703,13 @@ eslint-plugin-import@^2.26.0:
     resolve "^1.22.0"
     tsconfig-paths "^3.14.1"
 
+eslint-plugin-prettier@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
+  integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-plugin-vue@^9.1.0:
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.1.1.tgz#341f7533cb041958455138834341d5be01f9f327"
@@ -2854,6 +2866,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^3.2.11, fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
@@ -4401,6 +4418,18 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
+prettier@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
+  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"