From d6736284c488bee69af03abec186a3c7d08d2a97 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Wed, 2 Dec 2020 19:43:43 +0800 Subject: [PATCH] feat: route nprogress --- package.json | 4 +++- pnpm-lock.yaml | 50 ++++++++++++++++++++++++++++++------------- src/main.postcss | 22 +++++++++++++++---- src/plugins/router.ts | 7 +++++- 4 files changed, 62 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 2fb9d8a..69a233b 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "dependencies": { "@iconify/iconify": "^2.0.0-rc.2", "@vueuse/core": "^4.0.0-rc.4", + "nprogress": "^0.2.0", "vue": "^3.0.3", "vue-i18n": "9.0.0-beta.8", "vue-router": "^4.0.0-rc.6" @@ -15,6 +16,7 @@ "@antfu/eslint-config-vue": "^0.4.3", "@iconify/json": "^1.1.266", "@purge-icons/generated": "^0.4.1", + "@types/nprogress": "^0.2.0", "@typescript-eslint/eslint-plugin": "^4.9.0", "@vue/compiler-sfc": "^3.0.3", "@vuedx/typescript-plugin-vue": "^0.2.3", @@ -29,7 +31,7 @@ "vite-plugin-md": "^0.1.2", "vite-plugin-purge-icons": "^0.4.5", "vite-plugin-pwa": "^0.1.7", - "vite-plugin-voie": "^0.4.0", + "vite-plugin-voie": "npm:@knightly/vite-plugin-voie@pr11", "voie-pages": "^0.4.0" }, "pnpm": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 33c2d33..d70e5dd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,6 +1,7 @@ dependencies: '@iconify/iconify': 2.0.0-rc.2 '@vueuse/core': 4.0.0-rc.4_vue@3.0.3 + nprogress: 0.2.0 vue: 3.0.3 vue-i18n: 9.0.0-beta.8_vue@3.0.3 vue-router: 4.0.0-rc.6_vue@3.0.3 @@ -8,6 +9,7 @@ devDependencies: '@antfu/eslint-config-vue': 0.4.3_eslint@7.14.0+typescript@4.1.2 '@iconify/json': 1.1.266 '@purge-icons/generated': 0.4.1 + '@types/nprogress': 0.2.0 '@typescript-eslint/eslint-plugin': 4.9.0_eslint@7.14.0+typescript@4.1.2 '@vue/compiler-sfc': 3.0.3_vue@3.0.3 '@vuedx/typescript-plugin-vue': 0.2.3_vue@3.0.3 @@ -22,7 +24,7 @@ devDependencies: vite-plugin-md: 0.1.2_@vue+compiler-sfc@3.0.3 vite-plugin-purge-icons: 0.4.5 vite-plugin-pwa: 0.1.7 - vite-plugin-voie: 0.4.0_cc5f94e7f7ee5c93fc7acbfd4f2beeeb + vite-plugin-voie: /@knightly/vite-plugin-voie/0.2.0-knightly-pr11.202012021126_cc5f94e7f7ee5c93fc7acbfd4f2beeeb voie-pages: 0.4.0_vue@3.0.3 lockfileVersion: 5.2 overrides: @@ -1098,6 +1100,27 @@ packages: dev: true resolution: integrity: sha512-I8S9lChQATaRroMGccdOQkFbBtMt4C2V/PQGiSjDq9yzdyqDCrPNN9X1qM4FoQt84zfW/+JMHIgShi42E+SXeA== + /@knightly/vite-plugin-voie/0.2.0-knightly-pr11.202012021126_cc5f94e7f7ee5c93fc7acbfd4f2beeeb: + dependencies: + fast-glob: 3.2.4 + vite: 1.0.0-rc.13 + voie-pages: /@knightly/voie-pages/0.2.0-knightly-pr11.202012021126_vue@3.0.3 + vue-router: 4.0.0-rc.6_vue@3.0.3 + dev: true + peerDependencies: + vite: ^1.0.0-rc.4 + vue: '*' + vue-router: ^4.0.0-beta.4 + resolution: + integrity: sha512-bPzG/g8VbSioVMpWtOBWfCiukcMxLncA1jAe2FHcaGPooHz3T8028ATsMnLTCSFJpNdjJlc9SQAlu7DSCoxW6g== + /@knightly/voie-pages/0.2.0-knightly-pr11.202012021126_vue@3.0.3: + dependencies: + vue-router: 4.0.0-rc.6_vue@3.0.3 + dev: true + peerDependencies: + vue: '*' + resolution: + integrity: sha512-FwTt7Ym8o5mdiMOytbiY78Z17gPiNCKL92lnpvyf4bqLgGz0LbFM8lEoYPFiDvRN0MfPjwGpXX3Hzdx4PmgWSw== /@koa/cors/3.1.0: dependencies: vary: 1.1.2 @@ -1417,6 +1440,10 @@ packages: dev: true resolution: integrity: sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA== + /@types/nprogress/0.2.0: + dev: true + resolution: + integrity: sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A== /@types/parse-json/4.0.0: dev: true resolution: @@ -4220,6 +4247,10 @@ packages: node: '>=8' resolution: integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw== + /nprogress/0.2.0: + dev: false + resolution: + integrity: sha1-y480xTIT2JVyP8urkH6UIq28r7E= /num2fraction/1.2.2: dev: true resolution: @@ -5677,19 +5708,6 @@ packages: dev: true resolution: integrity: sha512-S5Hc1x/rcfb6cgKjlW7yxSTv1er6fquzGZt/+xC1wavSBa7Qf6wdf6QzYiYdwmUom5yUSDEawc2gEYgq5SsZFg== - /vite-plugin-voie/0.4.0_cc5f94e7f7ee5c93fc7acbfd4f2beeeb: - dependencies: - fast-glob: 3.2.4 - vite: 1.0.0-rc.13 - voie-pages: 0.4.0_vue@3.0.3 - vue-router: 4.0.0-rc.6_vue@3.0.3 - dev: true - peerDependencies: - vite: ^1.0.0-rc.4 - vue: '*' - vue-router: ^4.0.0-beta.4 - resolution: - integrity: sha512-X1JQc3mWfCDd847PV3w6KhfqlvNlLVwImsrYlBNvRR8KpwdxmG2ZywqyqKsw4rUIMsk7jHHb19G3NxbUbW77uA== /vite/1.0.0-rc.13: dependencies: '@babel/parser': 7.12.7 @@ -6071,6 +6089,7 @@ specifiers: '@iconify/iconify': ^2.0.0-rc.2 '@iconify/json': ^1.1.266 '@purge-icons/generated': ^0.4.1 + '@types/nprogress': ^0.2.0 '@typescript-eslint/eslint-plugin': ^4.9.0 '@vue/compiler-sfc': ^3.0.3 '@vuedx/typescript-plugin-vue': ^0.2.3 @@ -6078,6 +6097,7 @@ specifiers: autoprefixer: ^10.0.4 cross-env: ^7.0.2 eslint: ^7.14.0 + nprogress: ^0.2.0 postcss-nested: ^5.0.1 tailwindcss: ^2.0.1 typescript: ^4.1.2 @@ -6086,7 +6106,7 @@ specifiers: vite-plugin-md: ^0.1.2 vite-plugin-purge-icons: ^0.4.5 vite-plugin-pwa: ^0.1.7 - vite-plugin-voie: ^0.4.0 + vite-plugin-voie: 'npm:@knightly/vite-plugin-voie@pr11' voie-pages: ^0.4.0 vue: ^3.0.3 vue-i18n: 9.0.0-beta.8 diff --git a/src/main.postcss b/src/main.postcss index 613001c..de5cec1 100755 --- a/src/main.postcss +++ b/src/main.postcss @@ -32,17 +32,31 @@ html.dark { } } +#nprogress { + pointer-events: none; + + .bar { + @apply bg-teal-600 opacity-75; + + position: fixed; + z-index: 1031; + top: 0; + left: 0; + + width: 100%; + height: 2px; + } +} + .btn { - @apply - px-4 py-1 rounded inline-block + @apply px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50; } .icon-btn { - @apply - inline-block cursor-pointer select-none + @apply inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600; } diff --git a/src/plugins/router.ts b/src/plugins/router.ts index 5e5bf40..0e1898b 100644 --- a/src/plugins/router.ts +++ b/src/plugins/router.ts @@ -1,7 +1,9 @@ import { App } from 'vue' -// import routes generated by Voie import { createRouter, createWebHistory } from 'vue-router' +// import routes generated by Voie import routes from 'voie-pages' +// progress bar +import NProgress from 'nprogress' export default (app: App) => { const router = createRouter({ @@ -9,5 +11,8 @@ export default (app: App) => { routes, }) + router.beforeEach(() => { NProgress.start() }) + router.afterEach(() => { NProgress.done() }) + app.use(router) }