添加ElementUI 删除localStorage

package.json

@@ -36,8 +36,10 @@
     "vuepress-plugin-smooth-scroll": "0.0.10"
   },
   "dependencies": {
+    "async-validator": "^1.11.5",
     "axios": "^0.21.1",
     "dayjs": "^1.10.5",
+    "element-ui": "^2.15.2",
     "nanoid": "^3.1.23",
     "vuex": "^3.6.2"
   }

src/.vuepress/components/AuthQrCode.vue

@@ -48,8 +48,8 @@ export default {
   },
   methods: {
     async getImg() {
+      clearInterval(this.ctrl)
       const local = localStorage.getItem('scene')
-      console.log('🚀 ~ file: AuthQrCode.vue ~ line 53 ~ getImg ~ local', local)
       if (!local) {
         this.scene = nanoid()
         localStorage.setItem('scene', this.scene)
@@ -60,10 +60,6 @@ export default {
       const result = await getQrCode({
         scene: this.scene
       })
-      console.log(
-        '🚀 ~ file: AuthQrCode.vue ~ line 63 ~ getImg ~ result',
-        result
-      )
       const bytes = new Uint8Array(result)
       let storeData = ''
       const len = bytes.byteLength

src/.vuepress/enhanceApp.js

@@ -5,6 +5,9 @@
  */
 
 import store from './store'
+import Element from 'element-ui'
+// import 'element-ui/lib/theme-chalk/index.css'
+import './styles/theme/index.css'
 
 export default ({
   Vue, // VuePress 正在使用的 Vue 构造函数
@@ -14,15 +17,5 @@ export default ({
   isServer // 当前应用配置是处于 服务端渲染 或 客户端
 }) => {
   Vue.mixin({ store })
-
-  // ...apply enhancements for the site.
-  // router.beforeEach((to, from, next) => {
-  //   // to and from are Route Object,next() must be called to resolve the hook}
-  //   console.log(to)
-  //   console.log(from)
-  //   next()
-  // })
-
-  // console.log(options)
-  // console.log(siteData)
+  Vue.use(Element)
 }

src/.vuepress/styles/index.styl

@@ -23,4 +23,4 @@
   padding-bottom: 0 !important;
 
 .theme-custom-content
-  padding: 0 2.5rem;
+  padding: 0 2.5rem;

src/.vuepress/theme/components/Page.vue

@@ -10,11 +10,11 @@
     <PageNav v-bind="{ sidebarItems }" />
 
     <slot name="bottom" />
-    <MessageBox
+    <!-- <MessageBox
       :show.sync="show"
       :submit="submit"
       :msg="'您还未登录！点击确定扫一扫登录'"
-    ></MessageBox>
+    ></MessageBox> -->
   </main>
 </template>
 
@@ -55,7 +55,18 @@ export default {
         console.log('🚀 ~ file: Page.vue ~ line 39 ~ check ~ result', result)
       } catch (error) {
         if (flag) {
-          this.show = true
+          // this.show = true
+          // this.$alert('')
+          this.$confirm('您没有访问权限，请登录', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          })
+            .then(() => {
+              // this.show = true
+              this.$store.commit('setCodeShow', true)
+            })
+            .catch(() => {})
         }
       }
       // if (code === 200) {

src/.vuepress/theme/layouts/Layout.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="theme-container" :class="pageClasses" @touchstart="onTouchStart" @touchend="onTouchEnd">
+  <div
+    class="theme-container"
+    :class="pageClasses"
+    @touchstart="onTouchStart"
+    @touchend="onTouchEnd"
+  >
     <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />
 
     <div class="sidebar-mask" @click="toggleSidebar(false)" />
@@ -23,7 +28,9 @@
         <slot name="page-bottom" />
       </template>
     </Page>
-    <AuthQrCode></AuthQrCode>
+    <ClientOnly>
+      <AuthQrCode></AuthQrCode>
+    </ClientOnly>
   </div>
 </template>
 
@@ -44,19 +51,17 @@ export default {
     Navbar
   },
 
-  data () {
+  data() {
     return {
       isSidebarOpen: false
     }
   },
 
   computed: {
-    shouldShowNavbar () {
+    shouldShowNavbar() {
       const { themeConfig } = this.$site
       const { frontmatter } = this.$page
-      if (
-        frontmatter.navbar === false ||
-        themeConfig.navbar === false) {
+      if (frontmatter.navbar === false || themeConfig.navbar === false) {
         return false
       }
       return (
@@ -68,7 +73,7 @@ export default {
       )
     },
 
-    shouldShowSidebar () {
+    shouldShowSidebar() {
       const { frontmatter } = this.$page
       return (
         !frontmatter.home &&
@@ -77,7 +82,7 @@ export default {
       )
     },
 
-    sidebarItems () {
+    sidebarItems() {
       return resolveSidebarItems(
         this.$page,
         this.$page.regularPath,
@@ -86,7 +91,7 @@ export default {
       )
     },
 
-    pageClasses () {
+    pageClasses() {
       const userPageClass = this.$page.frontmatter.pageClass
       return [
         {
@@ -99,27 +104,27 @@ export default {
     }
   },
 
-  mounted () {
+  mounted() {
     this.$router.afterEach(() => {
       this.isSidebarOpen = false
     })
   },
 
   methods: {
-    toggleSidebar (to) {
+    toggleSidebar(to) {
       this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
       this.$emit('toggle-sidebar', this.isSidebarOpen)
     },
 
     // side swipe
-    onTouchStart (e) {
+    onTouchStart(e) {
       this.touchStart = {
         x: e.changedTouches[0].clientX,
         y: e.changedTouches[0].clientY
       }
     },
 
-    onTouchEnd (e) {
+    onTouchEnd(e) {
       const dx = e.changedTouches[0].clientX - this.touchStart.x
       const dy = e.changedTouches[0].clientY - this.touchStart.y
       if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {