feat(page):新增页面以及 bug 修复

- 新增错题本练习页面 - 删除部分页面的 page transition 功能，避免 dom 替换失败
besscroft · Sep 12, 2023 · 546c2a4 · 546c2a4
1 parent 1ca2051
commit 546c2a4
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 36 deletions.
diff --git a/heming-web/components/Work.vue b/heming-web/components/Work.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const nuxtApp = useNuxtApp()
+const router = useRouter()
 
 const wrongBook = ref({})
 
@@ -34,7 +35,7 @@ onMounted(async () => {
 
     <v-card-text flex items-center>
       <p w-full>{{ wrongBook.count || 0 }} 题</p>
-      <v-btn>
+      <v-btn @click="router.push('/practise')">
         复习
       </v-btn>
     </v-card-text>

diff --git a/heming-web/layouts/learn.vue b/heming-web/layouts/learn.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 
+const router = useRouter()
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const smAndLarger = breakpoints.greaterOrEqual('sm')
 const choiceLoading = ref<boolean>(false)
@@ -12,39 +13,43 @@ const handleChoiceLoading = (val: boolean) => {
 </script>
 
 <template>
-  <Header />
-  <div v-if="smAndLarger" p2 grid sm:px16 md:px20 lg:24 grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8>
-    <Today />
-    <Dictionary :choiceLoading="choiceLoading" @handleChoiceLoading="handleChoiceLoading" />
-    <Work />
-  </div>
-  <div sm:hidden p2>
-    <v-card>
-      <v-tabs
-          v-model="tab"
-          color="deep-purple-accent-4"
-          align-tabs="center"
-      >
-        <v-tab :value="1">今日概览</v-tab>
-        <v-tab :value="2">单词进度</v-tab>
-        <v-tab :value="3">错题本</v-tab>
-      </v-tabs>
-      <v-window v-model="tab">
-        <v-window-item :value="1">
-          <Today />
-        </v-window-item>
-        <v-window-item :value="2">
-          <Dictionary :choiceLoading="choiceLoading" @handleChoiceLoading="handleChoiceLoading" />
-        </v-window-item>
-        <v-window-item :value="3">
-          <Work />
-        </v-window-item>
-      </v-window>
-    </v-card>
-  </div>
-  <div p-2 w-full v-if="!choiceLoading">
-    <slot />
-  </div>
+  <v-app>
+    <div v-if="router.currentRoute.value.path === '/learn'">
+      <Header />
+      <div v-if="smAndLarger" p2 grid sm:px16 md:px20 lg:24 grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8>
+        <Today />
+        <Dictionary :choiceLoading="choiceLoading" @handleChoiceLoading="handleChoiceLoading" />
+        <Work />
+      </div>
+      <div sm:hidden p2>
+        <v-card>
+          <v-tabs
+            v-model="tab"
+            color="deep-purple-accent-4"
+            align-tabs="center"
+          >
+            <v-tab :value="1">今日概览</v-tab>
+            <v-tab :value="2">单词进度</v-tab>
+            <v-tab :value="3">错题本</v-tab>
+          </v-tabs>
+          <v-window v-model="tab">
+            <v-window-item :value="1">
+              <Today />
+            </v-window-item>
+            <v-window-item :value="2">
+              <Dictionary :choiceLoading="choiceLoading" @handleChoiceLoading="handleChoiceLoading" />
+            </v-window-item>
+            <v-window-item :value="3">
+              <Work />
+            </v-window-item>
+          </v-window>
+        </v-card>
+      </div>
+    </div>
+    <div w-full v-if="!choiceLoading">
+      <slot />
+    </div>
+  </v-app>
 </template>
 
 <style scoped>

diff --git a/heming-web/pages/[...all].vue b/heming-web/pages/[...all].vue
@@ -3,6 +3,7 @@ const router = useRouter()
 
 definePageMeta({
   layout: 'layout',
+  pageTransition: false,
 })
 </script>
 

diff --git a/heming-web/pages/index.vue b/heming-web/pages/index.vue
@@ -2,7 +2,8 @@
 const router = useRouter()
 
 definePageMeta({
-  layout: 'layout',
+  layout: 'default',
+  pageTransition: false,
 })
 </script>
 

diff --git a/heming-web/pages/learn.vue b/heming-web/pages/learn.vue
@@ -72,11 +72,12 @@ onMounted(() => {
 
 definePageMeta({
   layout: 'learn',
+  pageTransition: false,
 })
 </script>
 
 <template>
-  <div>
+  <div p-2>
     <v-no-ssr>
       <v-card
         :loading="loading"

diff --git a/heming-web/pages/login.vue b/heming-web/pages/login.vue
@@ -65,6 +65,7 @@ onUnmounted(() => {
 
 definePageMeta({
   layout: 'default',
+  pageTransition: false,
 })
 </script>
 

diff --git a/heming-web/pages/practise.vue b/heming-web/pages/practise.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const router = useRouter()
+
+definePageMeta({
+  layout: 'learn',
+  pageTransition: false,
+})
+</script>
+
+<template>
+  <div>
+    <v-app-bar color="primary" w-full>
+      <template v-slot:prepend>
+        <v-app-bar-nav-icon icon="mdi-arrow-left" @click="router.push('/learn')"></v-app-bar-nav-icon>
+      </template>
+
+      <v-app-bar-title>错题训练</v-app-bar-title>
+    </v-app-bar>
+    <div pt18 px2>
+      开发中...
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>