feat: 适配手机

Author: Acfboy

app.vue

@@ -1,21 +1,21 @@
 <template>
     <v-app>
         <v-layout>
-            <v-app-bar flat border class="position-fixed">
-                <v-toolbar border color="white">
+            <v-app-bar flat border class="position-fixed" :density="mobile ? 'compact' : 'comfortable'">
+                <v-toolbar border color="white" :density="mobile ? 'compact' : 'comfortable'">
                     <template #prepend>
-                        <v-btn icon="mdi-menu" variant="text" class="d-md-none" @click="toggleSidebar" />
-                        <v-icon class="ma-3 d-none d-md-block" icon="mdi-school" />
+                        <v-btn v-if="$vuetify.display.mobile && sidebarLabel" icon="mdi-menu" variant="text" @click="toggleSidebar" />
+                        <v-icon v-else class="ma-3" icon="mdi-school" />
                     </template>
-                    <v-toolbar-title class="site-title" @click="navigateTo('/')">{{ config.public.siteTitle
+                    <v-toolbar-title :class="$vuetify.display.mobile ? 'text-body-1' : ''" @click="navigateTo('/')">{{ config.public.siteTitle
                         }}</v-toolbar-title>
-                    <v-spacer />
+                    <v-spacer class="d-none d-md-block" />
                     <template #append>
                         <TopTabs />
                     </template>
                 </v-toolbar>
             </v-app-bar>
-            <NuxtPage />
+            <NuxtPage :sidebar="sidebarDrawer" />
         </v-layout>
     </v-app>
 </template>
@@ -25,11 +25,24 @@ import TopTabs from '~/components/TopTabs.vue';
 const config = useRuntimeConfig();
 
 const router = useRouter();
+const route = useRoute();
+const mobile = useNuxtApp().$vuetify.display.smAndDown;
 
-const sidebarDrawer = ref(true);
+const sidebarLabel = computed(() => {
+    const path = route.path.includes("edit");
+    return path || route.params.major;
+})
+
+const sidebarDrawer = ref(false);
 function toggleSidebar() {
     sidebarDrawer.value = !sidebarDrawer.value;
 }
+
+watch(() => route.path, () => {
+    if (mobile)
+        sidebarDrawer.value = false;
+})
+
 function navigateTo(path: string) {
     router.push(path);
 }

components/TopTabs.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="d-flex">
-    <v-menu v-if="schoolMajors" open-on-hover offset-y :close-on-content-click="false" attach="body">
+    <v-menu v-if="schoolMajors" open-on-hover :open-on-click="$vuetify.display.mobile" offset-y :close-on-content-click="false" attach="body">
       <template #activator="{ props }">
-        <v-btn v-bind="props" variant="text" append-icon="mdi-chevron-down">选择专业</v-btn>
+        <v-btn v-if="!$vuetify.display.mobile" v-bind="props" variant="text" append-icon="mdi-chevron-down">选择专业</v-btn>
+        <v-btn v-else v-bind="props" variant="text" icon="mdi-library-shelves" />
       </template>
       <v-card>
         <v-card-text class="overflow-auto-x" style="width: 60em">
+          <div class="top-tabs-searchbar d-md-none mb-1">
+            <SearchBar />
+          </div>
           <v-row>
-            <v-col v-for="j in 3" :key="j">
+            <v-col v-for="j in 3" :key="j" cols="12" md="4">
               <v-expansion-panels variant="accordion" flat width="20em">
                 <v-expansion-panel
                   v-for="i in Math.min(Math.floor((schoolMajors.length + 2) / 3), schoolMajors.length - Math.floor((schoolMajors.length + 2) / 3) * (j - 1))"
@@ -30,20 +34,23 @@
       </v-card>
     </v-menu>
 
-    <v-btn variant="text" class="ml-6" to="/docs/0/0" :active="false">简介</v-btn>
-    <div class="top-tabs-searchbar ml-6">
+    <v-btn v-if="!$vuetify.display.mobile" variant="text" class="ml-6" to="/docs/0/0" :active="false">简介</v-btn>
+    <v-btn v-else variant="text" to="/docs/0/0" icon="mdi-book-play-outline" :active="false"/>
+    
+    <div class="top-tabs-searchbar ml-6 d-none d-md-block">
       <SearchBar />
     </div>
   </div>
 
-  <v-divider vertical />
+  <v-divider class="d-none d-md-block" vertical />
 
   <div>
     <v-btn v-if="!loggedIn" class="ml-2 mr-2" append-icon="mdi-login"
       @click="navigateTo(`/login?redirect=${$route.path}`)">登录</v-btn>
-    <v-menu v-else open-on-hover>
+    <v-menu v-else open-on-hover :open-on-click="$vuetify.display.mobile">
       <template #activator="{ props }">
-        <v-btn v-bind="props" variant="text" class="ml-2 mr-2" append-icon="mdi-chevron-down">操作</v-btn>
+        <v-btn v-if="!$vuetify.display.mobile" v-bind="props" variant="text" class="ml-2 mr-2" append-icon="mdi-chevron-down">操作</v-btn>
+        <v-btn v-else v-bind="props" variant="text" icon="mdi-chevron-down" />
       </template>
       <v-list density="compact">
         <v-list-item prepend-icon="mdi-account" title="个人中心" to="/user" />

components/mdc/Error.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="mt-4 mb-4">
         <v-alert type="error" border="start" variant="tonal">
-                <MDCSlot />
+                <MDCSlot unwrap="p" />
         </v-alert>
     </div>
 </template>

components/mdc/Info.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="mt-4 mb-4">
         <v-alert type="info" border="start" variant="tonal">
-                <MDCSlot />
+                <MDCSlot unwrap="p" />
         </v-alert>
     </div>
 </template>

components/mdc/Warning.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="mt-4 mb-4">
         <v-alert type="warning" border="start" variant="tonal">
-                <MDCSlot />
+                <MDCSlot unwrap="p" />
         </v-alert>
     </div>
 </template>

pages/docs/[major].vue

@@ -1,6 +1,6 @@
 <template>
     <v-main>
-        <v-navigation-drawer v-if="listItems" permanent class="position-fixed">
+        <v-navigation-drawer v-if="listItems" :model-value="!$vuetify.display.mobile || props.sidebar" mobile-breakpoint="sm">
             <v-list v-if="Number(majorId) != 0" v-model:opened="listOpen">
                 <v-list-group v-for="(gradeCourses, index) in listItems" v-show="gradeCourses.length" :key="index"
                     :value="index">
@@ -37,6 +37,8 @@ if (!route.params.doc)
 
 const requestFetch = useRequestFetch();
 
+const props = defineProps<{ sidebar: boolean }>();
+
 /**
  * 分年级和类别的课程列表
  */

pages/docs/[major]/[doc].vue

@@ -74,7 +74,6 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router';
 
-
 const route = useRoute();
 const majorId = route.params.major as string;
 const docId = route.params.doc as string;

pages/edit.vue

@@ -1,8 +1,10 @@
 <template>
     <v-main>
-        <v-navigation-drawer permanent>
+        <v-btn v-if="$route.params.major && props.sidebar" icon="mdi-swap-horizontal" class="d-md-none position-fixed right-0" style="z-index: 1000;" @click="swap = !swap" />
+        <v-navigation-drawer mobile-breakpoint="sm" :model-value="!$vuetify.display.mobile || (props.sidebar && !swap)" persistent>
             <v-list>
                 <v-list-group v-for="[school, majors] in listItems" :key="school" :value="school">
+                    <!-- eslint-disable-next-line vue/no-template-shadow -->
                     <template #activator="{ props }">
                         <v-list-item v-bind="props" :title="school" />
                     </template>
@@ -12,9 +14,8 @@
                 </v-list-group>
             </v-list>
         </v-navigation-drawer>
-        <NuxtPage :majors="majorList" />
-
-        <div v-if="$route.params.major == undefined">
+        <NuxtPage :majors="majorList" :sidebar="props.sidebar" :sidebar-swap="swap" />
+        <div v-if="$route.params.major == undefined" class="ma-4">
             <v-breadcrumbs :items="['编辑专业']" />
             <v-row justify="center">
                 <v-col cols="12" md="6" lg="4" xl="4">
@@ -98,6 +99,10 @@ definePageMeta({
     middleware: ['auth']
 });
 
+const props = defineProps<{ sidebar: boolean }>();
+
+const swap = ref(false);
+
 const requestFetch = useRequestFetch();
 
 const validAdd = ref(false);

pages/edit/[major].vue

@@ -1,6 +1,6 @@
 <template>
     <div class="fill-height">
-        <v-navigation-drawer v-if="listItems" permanent class="position-fixed">
+        <v-navigation-drawer v-if="listItems" mobile-breakpoint="sm" class="position-fixed" :model-value="!$vuetify.display.mobile || (props.sidebar && props.sidebarSwap)"  persistent>
             <v-list v-if="Number(majorId) != 0">
                 <v-list-group v-for="(gradeCourses, index) in listItems" v-show="gradeCourses.length" :key="index"
                     :value="index">
@@ -24,7 +24,7 @@
             </v-list>
         </v-navigation-drawer>
         <NuxtPage :majors="props.majors" class="fill-height" />
-        <div v-if="$route.params.doc == undefined">
+        <div v-if="$route.params.doc == undefined" class="ma-4">
 
             <v-breadcrumbs>
                 <v-breadcrumbs-item to="/edit">编辑专业</v-breadcrumbs-item>
@@ -81,7 +81,7 @@ import type { CourseInfo } from '~/utils/types';
 const route = useRoute();
 const majorId = route.params.major;
 
-const props = defineProps<{ majors: Major[] }>();
+const props = defineProps<{ majors: Major[], sidebar: boolean, sidebarSwap: boolean }>();
 
 const delCourse = ref({ name: "", reason: "" });
 

pages/edit/[major]/[doc].vue

@@ -8,11 +8,11 @@
             <v-breadcrumbs-item :disabled="true">编辑文档</v-breadcrumbs-item>
         </v-breadcrumbs>
         <v-row ref="row1Space" class="ml-1 mr-1">
-            <v-col>
+            <v-col cols="12" md="6">
                 <v-text-field v-model="newCourse.course_name" variant="outlined" hide-details label="课程名称"
                     density="compact" />
             </v-col>
-            <v-col>
+            <v-col cols="12" md="6">
                 <v-btn-toggle v-model="toggle" divided>
                     <v-btn value="unique">
                         <span class="hidden-sm-and-down">独立页面</span>
@@ -34,22 +34,23 @@
         </v-row>
         <v-form v-model="infoValid">
             <v-row ref="row2Space" class="ml-1 mr-1 ">
-                <v-col>
+                <v-col cols="6" md="3">
                     <v-number-input v-model="newCourse.credit" :precision="1" :step="0.5" control-variant="split"
-                        label="学分" :hide-input="false" :inset="false" variant="outlined" density="compact" />
+                        label="学分" :hide-input="false" :inset="false" variant="outlined" density="compact"
+                        hide-details />
                 </v-col>
 
-                <v-col>
+                <v-col cols="6" md="3">
                     <v-combobox v-model="newCourse.class" :items="classNames" variant="outlined" density="compact"
-                        label="类型" />
+                        label="类型" hide-details />
                 </v-col>
 
-                <v-col>
+                <v-col cols="6" md="3">
                     <v-combobox v-model="grade" :items="gradeName" variant="outlined" density="compact" label="年级"
                         :rules="[checkGrade]" />
                 </v-col>
 
-                <v-col>
+                <v-col cols="6" md="3">
                     <v-text-field v-model="newCourse.direction" variant="outlined" label="专业方向" hint="不区分方向则留空"
                         density="compact" />
                 </v-col>
@@ -102,11 +103,11 @@
         </v-row>
         <v-row ref="row4Space" class="ml-4 mr-4" justify="end">
             <!-- <v-col> -->
-            <v-btn class="mt-2" :disabled="!infoValid || (toggle == 'other' && !linkValid)" color="primary"
+            <v-btn class="mt-2 mb-4" :disabled="!infoValid || (toggle == 'other' && !linkValid)" color="primary"
                 variant="tonal" @click="submit">提交</v-btn>
             <!-- </v-col> -->
         </v-row>
-        <v-navigation-drawer location="right">
+        <v-navigation-drawer :location="$vuetify.display.mobile ? 'bottom' : 'end'" permanent>
             <v-progress-linear v-show="uploadProgress != 0" v-model="uploadProgress" color="primary" />
 
             <v-file-input v-show="toggle == 'unique'" v-model="selectedFiles" label="上传附件" multiple show-size counter
@@ -136,8 +137,8 @@
         </v-snackbar>
     </div>
     <div v-else>
-        <v-row justify="center" class="mt-8">
-            <v-sheet class="pa-4 ma-4 text-center mx-auto" elevation="12" max-width="600" rounded="lg" width="100%">
+        <v-row justify="center" :class="!$vuetify.display.mobile ? 'mt-8' : 'ma-4'">
+            <v-sheet class="pa-4 ma-4 text-center mx-auto" max-width="600" rounded="lg" width="100%">
                 <v-icon class="mb-5" color="success" icon="mdi-check-circle" size="112" />
 
                 <h2 class="text-h5 mb-6">提交成功</h2>
@@ -383,7 +384,7 @@ const uploadFiles = () => {
             onUploadProgress: (progressEvent) => {
                 const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total!);
                 uploadProgress.value = percentCompleted;
-            }
+            },
         }).then((res: AxiosResponse<{ resList: AttachmentInfo[] }>) => {
             newAttachments.value = newAttachments.value.concat(res.data.resList);
             uploadProgress.value = 0;