improvement: 学生界面整理

src/animations/SlideInDifferentTransition.vue

@@ -25,7 +25,7 @@ export default {}
   opacity: 0;
 }
 
-@media (min-width: 600px) {
+@media (min-width: 900px) {
   .slide-in-difference-leave-to {
     transform: translateX(3%);
   }

src/common-style.scss

@@ -3,6 +3,8 @@
 
 
 .title {
+  display: flex;
+  align-items: center;
   font-size: 28px;
   margin-bottom: 24px;
 }

src/components/Layouts/TabSideComponent.vue

@@ -69,12 +69,14 @@ export default {
 
 .large {
   min-width: 400px;
-  min-height: 350px;
   padding: 0 24px;
   display: flex;
   align-items: center;
   background: transparent;
   box-shadow: 0 0 0 20000px rgba(255,255,255,.5);
+  .content {
+    min-height: 350px;
+  }
 }
 
 @media (min-width: 600px) {

src/views/student/components/StudentCourseDetail.vue

@@ -1,9 +1,17 @@
 <template>
   <tab-side-component>
-    <back-title>课程详情</back-title>
-    <course-detail :course="course"></course-detail>
-    <c-button theme="blue" block class="mb-16" @click="handleCheckSlideList">点击查看课件列表</c-button>
-    <c-button theme="red" block @click="handleQuitCourse">退出本课程</c-button>
+    <back-title>
+      课程详情
+      <c-button :theme="showMore ? 'blue' : 'normal'" :left="8" text :icon="showMore ? 'unfold_less' : 'unfold_more'"
+                @click="showMore = !showMore">
+        {{showMore ? '收起' : '显示'}}详情
+      </c-button>
+    </back-title>
+    <show-transition>
+      <course-detail v-if="showMore" :course="course"></course-detail>
+    </show-transition>
+    <c-button icon="list" theme="blue" block class="mb-16" @click="handleCheckSlideList">课件列表</c-button>
+    <c-button icon="close" theme="red" block @click="handleQuitCourse">退出课程</c-button>
   </tab-side-component>
 </template>
 
@@ -16,12 +24,14 @@ import { quitCourse } from '@/server/course'
 import CourseDetail from '@/components/Details/CourseDetail'
 import { RESET_COURSE } from '@/store/types/main-types'
 import momentFromNow from '@/utils/moment-from-now'
+import ShowTransition from '@/animations/ShowTransition'
 
 export default {
-  components: { CourseDetail, BackTitle, CButton, TabSideComponent },
+  components: { ShowTransition, CourseDetail, BackTitle, CButton, TabSideComponent },
   data () {
     return {
-      newCode: ''
+      newCode: '',
+      showMore: true
     }
   },
   computed: {
@@ -70,4 +80,8 @@ export default {
     margin-left: 12px;
   }
 }
+
+.course-detail {
+  transform: translateY(-16px);
+}
 </style>

src/views/student/components/StudentCourseSlides.vue

@@ -1,17 +1,22 @@
 <template>
   <tab-side-component>
-    <back-title>
-      {{course.name}}
-      <icon-button class="expand-button" :theme="showMore ? 'blue' : 'normal'" @click="handleShowMore" :class="showMore ? 'reverse' : ''">
-        expand_more
-      </icon-button>
+    <back-title>课件列表
+      <c-button :theme="showActions ? 'orange' : 'normal'" :left="8" text icon="settings"
+                @click="showActions = !showActions">设置
+      </c-button>
     </back-title>
+    <tab-actions :if-condition="showActions">
+      <c-button theme="green" icon="book" class="mr-8" @click="handleToManager">管理本课程</c-button>
+      <c-button theme="blue" :icon="showMore ? 'unfold_less' : 'unfold_more'" @click="showMore = !showMore">
+        {{showMore ? '收起' : '展开'}}详情
+      </c-button>
+    </tab-actions>
+    <div class="sub-title">
+      {{course.name}}
+    </div>
     <show-transition>
-      <div v-if="showMore">
-        <course-detail :course="course"></course-detail>
-      </div>
+      <course-detail v-if="showMore" :course="course"></course-detail>
     </show-transition>
-    <div class="sub-title">课件列表</div>
     <div class="no-content-warning" v-if="slides === null">
       <div class="no-content-warning-tip">加载中...</div>
     </div>
@@ -19,10 +24,10 @@
       <div class="no-content-warning-tip">本课程尚无课件～</div>
     </div>
     <template v-for="slide of slides">
-      <slide-card :key="slide.id" hide-course hide-teacher :slide="slide"
+      <slide-card :key="slide.id" :hide-course="!showMore" :hide-teacher="!showMore"
+                  :slide="slide" :hide-update-time="!showMore"
                   :click-handler="handleSlideCardClick"></slide-card>
     </template>
-    <c-button block theme="blue" class="mt-16" @click="handleToManager">管理课程</c-button>
   </tab-side-component>
 </template>
 
@@ -36,15 +41,16 @@ import { SET_SLIDE_INFO } from '@/store/types/pdf-types'
 import { SET_COURSE } from '@/store/types/main-types'
 import { mapState } from 'vuex'
 import CourseDetail from '@/components/Details/CourseDetail'
-import IconButton from '@/components/Basic/IconButton'
 import ShowTransition from '@/animations/ShowTransition'
+import TabActions from '@/components/Layouts/TabActions'
 
 export default {
-  components: { IconButton, CourseDetail, CButton, SlideCard, BackTitle, TabSideComponent, ShowTransition },
+  components: { TabActions, CourseDetail, CButton, SlideCard, BackTitle, TabSideComponent, ShowTransition },
   data () {
     return {
       slides: null,
-      showMore: false
+      showMore: false,
+      showActions: false
     }
   },
   watch: {
@@ -97,12 +103,10 @@ export default {
   height: unset;
 }
 
-.expand-button {
-  transform: translateX(4px);
-  transition: .5s cubic-bezier(0, .5, .5, 1.3);
-}
-
-.reverse {
-  transform: translateX(4px) rotate(-180deg);
+.sub-title {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 8px 0 4px 0;
 }
 </style>

src/views/student/components/StudentSlideDetail.vue

@@ -1,14 +1,22 @@
 <template>
   <tab-side-component>
-    <back-title>课件详情</back-title>
-    <slide-detail :slide="slide"></slide-detail>
-    <c-button block standout theme="blue" class="mb-16" @click="handleReadSlide">浏览课件</c-button>
+    <back-title>
+      课件详情
+      <c-button :theme="showMore ? 'blue' : 'normal'" :left="8" text :icon="showMore ? 'unfold_less' : 'unfold_more'"
+                @click="showMore = !showMore">
+        {{showMore ? '收起' : '显示'}}详情
+      </c-button>
+    </back-title>
+    <show-transition>
+      <slide-detail v-if="showMore" :slide="slide"></slide-detail>
+    </show-transition>
+    <c-button block standout theme="blue" class="mb-16" @click="handleReadSlide" icon="play_arrow">浏览课件</c-button>
     <a :href="slideUrl">
-      <c-button block theme="blue" class="mb-16">
+      <c-button block theme="blue" class="mb-16" icon="cloud_download">
         下载课件
       </c-button>
     </a>
-    <c-button block theme="green" class="mb-16" @click="handleToQuiz">去做题</c-button>
+    <c-button block theme="green" class="mb-16" @click="handleToQuiz" icon="edit">查看测验</c-button>
   </tab-side-component>
 </template>
 
@@ -20,12 +28,14 @@ import SlideDetail from '@/components/Details/SlideDetail'
 import { mapState } from 'vuex'
 import { getSlideUrl } from '@/server/slide'
 import { SET_SRC } from '@/store/types/pdf-types'
+import ShowTransition from '@/animations/ShowTransition'
 
 export default {
-  components: { BackTitle, CButton, TabSideComponent, SlideDetail },
+  components: { ShowTransition, BackTitle, CButton, TabSideComponent, SlideDetail },
   data () {
     return {
-      slideUrl: ''
+      slideUrl: '',
+      showMore: true
     }
   },
   computed: {
@@ -90,6 +100,10 @@ export default {
   color: $theme-red
 }
 
+.slide-detail {
+  transform: translateY(-16px);
+}
+
 @media (max-width: 600px) {
   .file-uploader {
     font-size: 14px;

src/views/student/tabs/StudentCoursesManager.vue

@@ -1,7 +1,17 @@
 <template>
   <div class="tab complex-tab">
     <div class="left">
-      <h1 class="title">课程管理</h1>
+      <h1 class="title">
+        课程管理
+        <c-button :theme="showActions ? 'orange' : 'normal'" :left="8" text icon="settings"
+                  @click="showActions = !showActions">设置
+        </c-button>
+      </h1>
+      <tab-actions :if-condition="showActions">
+        <c-button theme="blue" :icon="showMore ? 'unfold_less' : 'unfold_more'" @click="showMore = !showMore">
+          {{showMore ? '收起' : '展开'}}详情
+        </c-button>
+      </tab-actions>
       <search-bar placeholder="输入关键词搜索课程" class="mb-24" v-model="searchKey"></search-bar>
       <template v-if="searchKey">
         <template v-if="this.searchResult">
@@ -29,8 +39,8 @@
         在上方输入关键字搜索吧～
       </div>
       <template v-for="(course, index) of courses">
-        <course-card :key="course.id" :course="course" :index="index + 1" hide-bio
-                     :clickHandler="handleToCourseDetail"></course-card>
+        <course-card :key="course.id" :course="course" :index="index + 1" :hide-bio="!showMore"
+                     :hide-time="!showMore" :clickHandler="handleToCourseDetail"></course-card>
       </template>
     </div>
     <slide-in-different-transition>
@@ -46,14 +56,18 @@ import { getCourses, studentGetCourses } from '@/server/course'
 import { SET_COURSE } from '@/store/types/main-types'
 import debounce from '@/utils/debounce'
 import SlideInDifferentTransition from '@/animations/SlideInDifferentTransition'
+import CButton from '@/components/Basic/CButton'
+import TabActions from '@/components/Layouts/TabActions'
 
 export default {
-  components: { SearchBar, CourseCard, SlideInDifferentTransition },
+  components: { TabActions, CButton, SearchBar, CourseCard, SlideInDifferentTransition },
   data () {
     return {
       courses: null,
       searchResult: null,
-      searchKey: ''
+      searchKey: '',
+      showMore: false,
+      showActions: false
     }
   },
   mounted () {
@@ -106,10 +120,6 @@ export default {
 <style lang="scss" scoped>
 @import "~@/views/shared/tab-common";
 
-.c-button {
-  margin-top: 24px;
-}
-
 .search-result {
   margin-bottom: 24px;
 }

src/views/student/tabs/StudentExplore.vue

@@ -1,8 +1,17 @@
 <template>
   <div class="tab complex-tab">
     <div class="left">
-      <h1 class="title mb-32">我的主页</h1>
-      <!--      <search-bar placeholder="输入关键词搜索课件"  class="mb-24"></search-bar>-->
+      <h1 class="title">
+        我的主页
+        <c-button :theme="showActions ? 'orange' : 'normal'" :left="8" text icon="settings"
+                  @click="showActions = !showActions">设置
+        </c-button>
+      </h1>
+      <tab-actions :if-condition="showActions">
+        <c-button theme="blue" :icon="showMore ? 'unfold_less' : 'unfold_more'" @click="showMore = !showMore">
+          {{showMore ? '收起' : '展开'}}详情
+        </c-button>
+      </tab-actions>
       <section>
         <h1 class="sub-title mb-24">按课程查找课件</h1>
         <div class="no-content-warning" v-if="courses === null">
@@ -15,8 +24,8 @@
           <c-button theme="blue" block @click="handleToCoursesManager">去课程管理界面</c-button>
         </div>
         <template v-for="(course, index) of courses">
-          <course-card :key="course.id" :course="course" :index="index + 1" hide-bio
-                       title="点击查看课程下的所有课件信息"
+          <course-card :key="course.id" :course="course" :index="index + 1" :hide-bio="!showMore"
+                       :hide-time="!showMore" title="点击查看课程下的所有课件信息"
                        :clickHandler="handleToCourseSlideList"></course-card>
         </template>
       </section>
@@ -33,12 +42,15 @@ import { studentGetCourses } from '@/server/course'
 import CButton from '@/components/Basic/CButton'
 import { SET_COURSE } from '@/store/types/main-types'
 import SlideInDifferentTransition from '@/animations/SlideInDifferentTransition'
+import TabActions from '@/components/Layouts/TabActions'
 
 export default {
-  components: { CButton, CourseCard, SlideInDifferentTransition },
+  components: { TabActions, CButton, CourseCard, SlideInDifferentTransition },
   data () {
     return {
-      courses: null
+      courses: null,
+      showMore: false,
+      showActions: false
     }
   },
   mounted () {
@@ -73,4 +85,9 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/views/shared/tab-common";
+
+.title {
+  display: flex;
+  align-items: center;
+}
 </style>

src/views/student/tabs/StudentPersonal.vue

@@ -5,20 +5,46 @@
         个人信息设置
         <c-tag theme="green">学生</c-tag>
       </h1>
-      <div class="sub-title">修改姓名</div>
-      <c-input :placeholder="'目前资料中的姓名：' + userInfo.name" class="mb-16" v-model="newName"></c-input>
-      <c-button theme="orange" block class="mb-32" @click="handleModifyName">确认修改姓名</c-button>
-      <div class="sub-title">修改密码</div>
-      <div class="verified-code-wrapper">
-        <c-input placeholder="邮箱验证码" type="number" v-model="code"></c-input>
-        <c-button theme="blue" :no-click-warn="typeof this.emailButtonContent === typeof 0"
-                  @click="handleSendEmailCode">{{ emailButtonContent }}
+      <div class="info">
+        <div>邮箱：{{userInfo.email}}</div>
+        <div>手机：{{userInfo.phone}}</div>
+        <div>姓名：{{userInfo.name}}</div>
+        <div>加入时间：{{momentFromNow(userInfo.createAt)}}</div>
+      </div>
+      <div class="sub-title">
+        修改资料
+        <c-button :theme="showChangeProfile ? 'blue' : 'normal'" :left="8" text
+                  :icon="showChangeProfile ? 'unfold_less' : 'unfold_more'"
+                  @click="showChangeProfile = !showChangeProfile">
+          {{showChangeProfile ? '收起' : '展开'}}
+        </c-button>
+      </div>
+      <show-transition>
+        <div v-if="showChangeProfile">
+          <c-input :placeholder="'目前资料中的姓名：' + userInfo.name" class="mb-16" v-model="newName"></c-input>
+          <c-button theme="green" block class="mb-32" @click="handleModifyName" icon="check">确认修改姓名</c-button>
+        </div>
+      </show-transition>
+      <div class="sub-title">
+        修改密码
+        <c-button :theme="showChangePassword ? 'blue' : 'normal'" :left="8" text :icon="showChangePassword ? 'unfold_less' : 'unfold_more'"
+                  @click="showChangePassword = !showChangePassword">
+          {{showChangePassword ? '收起' : '展开'}}
         </c-button>
       </div>
-      <c-input placeholder="新密码" type="password" class="mb-16" v-model="password"></c-input>
-      <c-input placeholder="确认新密码" type="password" class="mb-16" v-model="passwordEnsure"></c-input>
-      <c-button theme="orange" block class="mb-32" @click="handleModifyPassword">确认修改密码</c-button>
-      <c-button theme="red" block @click="handleLogout">登出</c-button>
+      <show-transition>
+        <div v-if="showChangePassword">
+          <div class="verified-code-wrapper">
+            <c-input placeholder="邮箱验证码" type="number" v-model="this.code"></c-input>
+            <c-button theme="blue" :no-click-warn="typeof this.emailButtonContent === typeof 0"
+                      @click="handleSendEmailCode">{{ emailButtonContent }}
+            </c-button>
+          </div>
+          <c-input placeholder="新密码" type="password" class="mb-16" v-model="password"></c-input>
+          <c-input placeholder="确认新密码" type="password" class="mb-16" v-model="passwordEnsure"></c-input>
+          <c-button block theme="orange" @click="handleModifyPassword" icon="check">确认修改密码</c-button>
+        </div>
+      </show-transition>
     </div>
     <slide-in-different-transition>
       <router-view/>
@@ -34,16 +60,20 @@ import { logout, modifyUser, resetPasswordByEmail } from '@/server/user'
 import { mapState } from 'vuex'
 import CTag from '@/components/Basic/CTag'
 import SlideInDifferentTransition from '@/animations/SlideInDifferentTransition'
+import ShowTransition from '@/animations/ShowTransition'
+import momentFromNow from '@/utils/moment-from-now'
 
 export default {
-  components: { CTag, CInput, CButton, SlideInDifferentTransition },
+  components: { CTag, CInput, CButton, SlideInDifferentTransition, ShowTransition },
   data () {
     return {
       emailButtonContent: '发送验证码',
       newName: '',
       code: '',
       password: '',
-      passwordEnsure: ''
+      passwordEnsure: '',
+      showChangeProfile: false,
+      showChangePassword: false
     }
   },
   computed: {
@@ -55,6 +85,7 @@ export default {
     }
   },
   methods: {
+    momentFromNow,
     handleSendEmailCode () {
       this.$setInfoMessage('正在尝试发送验证码')
       if (this.email.match(/.+@(nju.edu.cn|smail.nju.edu.cn)/)) {
@@ -114,6 +145,12 @@ export default {
 @import "~@/style/theme.scss";
 @import "~@/views/shared/tab-common";
 
+.sub-title {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+}
+
 .verified-code-wrapper {
   margin-bottom: 16px;
   display: flex;
@@ -129,5 +166,12 @@ export default {
     margin-left: 12px;
   }
 }
-
+.info {
+  font-size: 14px;
+  padding: 4px 12px;
+  background-color: #f4f4f4;
+  color: #7a8a9a;
+  line-height: 2;
+  margin-bottom: 16px;
+}
 </style>

src/views/student/tabs/StudentQuiz.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tab complex-tab">
     <div class="left">
-      <h1 class="title">课程测验 <span class="tag">学生</span></h1>
+      <h1 class="title">课程测验 <c-tag theme="green">学生</c-tag></h1>
       <div class="sub-title">待完成的测验</div>
       <router-link :key="quiz.id" :to="`/student/quiz/${quiz.id}`" v-for="quiz in ongoingQuizzes">
         <div>{{ quiz.name }}</div>
@@ -22,8 +22,10 @@
 <script>
 import { getQuizList } from '@/server/quiz'
 import { QuizState } from '@/server/enums/quiz-state'
+import CTag from '@/components/Basic/CTag'
 
 export default {
+  components: { CTag },
   data() {
     return {
       ongoingQuizzes: [],

src/views/teacher/components/TeacherCourseSlides.vue

@@ -6,7 +6,7 @@
       </c-button>
     </back-title>
     <tab-actions :if-condition="showActions">
-      <c-button theme="green" icon="add" class="mr-8" @click="handleToManager">管理本课程</c-button>
+      <c-button theme="green" icon="settings" class="mr-8" @click="handleToManager">管理本课程</c-button>
       <c-button theme="blue" :icon="showMore ? 'unfold_less' : 'unfold_more'" @click="showMore = !showMore">
         {{showMore ? '收起' : '展开'}}详情
       </c-button>
@@ -108,6 +108,6 @@ export default {
   display: flex;
   align-items: center;
   margin: 0;
-  padding-bottom: 4px;
+  padding: 8px 0 4px 0;
 }
 </style>

src/views/teacher/components/TeacherSlideDetail.vue

@@ -10,7 +10,8 @@
     <show-transition>
       <slide-detail v-if="showMore" :slide="slide"></slide-detail>
     </show-transition>
-    <c-button block theme="blue" standout class="mb-12" @click="handleReadSlide" icon="play_arrow" no-bold>浏览课件</c-button>
+    <c-button block theme="blue" standout class="mb-12" @click="handleReadSlide" icon="play_arrow" no-bold>浏览课件
+    </c-button>
     <a :href="slideUrl">
       <c-button block theme="green" no-bold class="mb-32" icon="cloud_download">
         下载课件
@@ -18,7 +19,8 @@
     </a>
     <div class="sub-title">
       课件信息设置
-      <c-button :theme="showSettings ? 'blue' : 'normal'" :left="8" text :icon="showSettings ? 'unfold_less' : 'unfold_more'"
+      <c-button :theme="showSettings ? 'blue' : 'normal'" :left="8" text
+                :icon="showSettings ? 'unfold_less' : 'unfold_more'"
                 @click="showSettings = !showSettings">
         {{showSettings ? '收起' : '更多'}}设置
       </c-button>
@@ -165,6 +167,7 @@ export default {
 .modify-slide-name {
   display: flex;
   align-items: center;
+
   .c-input {
     flex: 1
   }
@@ -178,6 +181,7 @@ export default {
 .slide-detail {
   transform: translateY(-16px);
 }
+
 @media (max-width: 600px) {
   .file-uploader {
     font-size: 14px;

src/views/teacher/tabs/TeacherCoursesManager.vue

@@ -85,9 +85,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/views/shared/tab-common";
-
-.title {
-  display: flex;
-  align-items: center;
-}
 </style>

src/views/teacher/tabs/TeacherExplore.vue

@@ -131,8 +131,4 @@ export default {
   display: flex;
   align-items: center;
 }
-
-.search-bar {
-  margin-bottom: 16px;
-}
 </style>

src/views/teacher/tabs/TeacherPersonal.vue

@@ -12,7 +12,7 @@
         <div>加入时间：{{momentFromNow(userInfo.createAt)}}</div>
       </div>
       <div class="sub-title">
-        修改姓名
+        修改资料
         <c-button :theme="showChangeProfile ? 'blue' : 'normal'" :left="8" text :icon="showChangeProfile ? 'unfold_less' : 'unfold_more'"
                   @click="showChangeProfile = !showChangeProfile">
           {{showChangeProfile ? '收起' : '展开'}}
@@ -21,7 +21,7 @@
       <show-transition>
         <div v-if="showChangeProfile">
           <c-input :placeholder="'目前资料中的姓名：' + userInfo.name" class="mb-16" v-model="newName"></c-input>
-          <c-button theme="orange" block class="mb-32" @click="handleModifyName">确认修改姓名</c-button>
+          <c-button theme="green" block class="mb-32" @click="handleModifyName" icon="check">确认修改姓名</c-button>
         </div>
       </show-transition>
       <div class="sub-title">
@@ -41,7 +41,7 @@
           </div>
           <c-input placeholder="新密码" type="password" class="mb-16" v-model="password"></c-input>
           <c-input placeholder="确认新密码" type="password" class="mb-16" v-model="passwordEnsure"></c-input>
-          <c-button block theme="orange" @click="handleModifyPassword">确认修改密码</c-button>
+          <c-button block theme="orange" @click="handleModifyPassword" icon="check">确认修改密码</c-button>
         </div>
       </show-transition>
     </div>