refactor: 整理button组件的prop和样式

public/index.html

@@ -7,9 +7,9 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <script src="https://cdn.staticfile.org/pdf.js/2.3.200/pdf.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.min.js"></script>
-<!--  <script src="https://cdn.bootcss.com/pdf.js/2.3.200/pdf.worker.min.js"></script>-->
+  <script async src="https://cdn.staticfile.org/pdf.js/2.3.200/pdf.min.js"></script>
+  <script async src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.min.js"></script>
+  <!--  <script src="https://cdn.bootcss.com/pdf.js/2.3.200/pdf.worker.min.js"></script>-->
   <title>SEEC 课堂助手</title>
   <style>
     :root {
@@ -27,5 +27,4 @@
   <div id="app"></div>
   <!-- built files will be auto injected -->
 </body>
-
 </html>

src/components/Basic/CButton.vue

@@ -1,19 +1,22 @@
 <template>
-  <button class="c-button" :class="disabled ? 'disabled' : ''" @click="$emit('click')">
-    <span v-if="icon" class="icon">{{icon}}</span>
+  <button class="c-button" :style="style" :class="classList" @click="$emit('click')">
+    <c-icon bold :right="6" v-if="icon" class="icon" :size="22">{{icon}}</c-icon>
     <slot></slot>
   </button>
 </template>
 
 <script>
+import CIcon from '@/components/Basic/CIcon'
+
 export default {
-  // props: ['icon', 'disabled']
+  components: { CIcon },
+  // props: ['icon', 'noClickWarn']
   props: {
     icon: {
       type: String,
       default: null
     },
-    disabled: {
+    noClickWarn: {
       type: Boolean,
       default: false
     },
@@ -48,6 +51,37 @@ export default {
     noRipple: {
       type: Boolean,
       default: false
+    },
+    left: {
+      type: Number,
+      default: 0
+    },
+    right: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    style () {
+      return {
+        marginRight: this.right ? this.right + 'px' : null,
+        marginLeft: this.left ? this.left + 'px' : null
+      }
+    },
+    classList () {
+      return [
+        this.text
+          ? (this.theme ? 'c-button-text--' + this.theme : 'c-button-text--normal')
+          : (
+            this.standout
+              ? (this.theme ? 'c-button-standout--' + this.theme : 'c-button-standout--normal')
+              : (this.theme ? 'c-button--' + this.theme : 'c-button--normal')
+          ),
+        this.large ? 'c-button--large' : '',
+        this.small ? 'c-button--small' : '',
+        this.noClickWarn ? 'c-button--disabled' : '',
+        this.block ? 'c-button--block' : ''
+      ]
     }
   }
 }
@@ -55,75 +89,101 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/style/theme.scss';
+@import '~@/style/mixin/set-theme.scss';
 
 button {
   border: none;
   outline: none;
-  background: transparent;
-
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   -webkit-tap-highlight-color: transparent;
 
-  display: block;
-  min-width: 120px;
-  height: 40px;
-  background: $theme-blue;
-  color: white;
+  background: $theme-background-grey;
+  color: $theme-grey;
   border-radius: 8px;
   font-size: 14px;
-  padding: 0 16px;
+  padding: 8px 16px;
   font-weight: bold;
+  box-sizing: border-box;
+  transition: .15s;
 
   &:hover {
-    background: darken($theme-blue, 5);
+    background: darken($theme-background-grey, 5);
   }
 
   &:active {
-    background: darken($theme-blue, 10);
+    background: darken($theme-background-grey-darker, 10);
   }
 }
 
-.secondary {
-  color: $theme-blue;
-  background: $theme-blue-transparent;
-  &:hover {
-    background:  darken($theme-blue-transparent, 5);
-  }
-
-  &:active {
-    background:  darken($theme-blue-transparent, 10);
-  }
+.c-button--block {
+  display: block;
+  width: 100%;
 }
 
-.warning {
-  color: $theme-orange;
-  background: $theme-orange-transparent;
-  &:hover {
-    background:  darken($theme-orange-transparent, 5);
-  }
+@mixin theme($name, $color, $backgroundColor) {
+  .c-button--#{$name} {
+    color: $color;
+    background: $backgroundColor;
 
-  &:active {
-    background:  darken($theme-orange-transparent, 10);
+    &:hover {
+      background: darken($backgroundColor, 5);
+    }
+
+    &:active {
+      background: darken($backgroundColor, 10);
+    }
+
+    .icon {
+      color: $color;
+    }
   }
-}
+  .c-button-text--#{$name} {
+    color: $color;
+    border-radius: 1000px;
+    background: transparent;
+    transition: .3s;
+
+    &:hover {
+      background: $backgroundColor;
+    }
 
-.error {
-  color: $theme-red;
-  background: $theme-red-transparent;
-  &:hover {
-    background:  darken($theme-red-transparent, 5);
+    &:active {
+      background: darken($backgroundColor, 5);
+    }
+
+    .icon {
+      color: $color;
+    }
   }
+  .c-button-standout--#{$name} {
+    color: white;
+    background: $color;
 
-  &:active {
-    background:  darken($theme-red-transparent, 10);
+    &:hover {
+      background: lighten($color, 5);
+    }
+
+    &:active {
+      background: lighten($color, 10);
+    }
+
+    .icon {
+      color: white;
+    }
   }
 }
 
-.disabled {
+@include setTheme()
+
+.c-button--disabled {
   background: #daeafa;
   color: white;
   cursor: not-allowed;
+
   &:hover {
     background: #daeafa;
   }

src/style/theme.scss

@@ -18,6 +18,7 @@ $theme-background-grey: rgba(160, 180, 200, .1);
 $theme-background-grey-darker: rgba(160, 180, 200, .2);
 
 $theme-black: #3a4a5a;
+$theme-grey: #5a6a7a;
 
 $icon-normal-color: #7a8a9a;
 $icon-hover-color: lighten($theme-blue, 10);

src/views/Home.vue

@@ -4,8 +4,8 @@
       <h1 class="title">
         SEEC 课堂助手
       </h1>
-      <c-button @click="handleLogin" class="full-width mb-12">去登录</c-button>
-      <c-button class="secondary full-width" @click="handleRegister">去注册</c-button>
+      <c-button @click="handleLogin" standout block theme="blue" class="mb-12">去登录</c-button>
+      <c-button block theme="blue" @click="handleRegister">去注册</c-button>
     </div>
     <background></background>
   </div>

src/views/forget-password/ForgetPassword.vue

@@ -5,13 +5,13 @@
       <c-input class="mb-16" placeholder="邮箱" v-model="email"></c-input>
       <div class="verified-code-wrapper">
         <c-input placeholder="邮箱验证码" type="number" v-model="code"></c-input>
-        <c-button class="secondary" :disabled="typeof this.emailButtonContent === typeof 0"
+        <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 class="secondary full-width mb-32" @click="handleModifyPassword">确认修改密码</c-button>
+      <c-button block theme="blue" class="mb-32" @click="handleModifyPassword">确认修改密码</c-button>
     </div>
   </div>
 </template>

src/views/login/Login.vue

@@ -10,8 +10,8 @@
       </section>
       <c-input placeholder="密码" type="password" v-model="password"></c-input>
       <div class="button-area">
-        <c-button @click="handleSubmit" :disabled="!formChecked()">登录</c-button>
-        <c-button class="secondary" @click="handleToRegister">去注册</c-button>
+        <c-button standout theme="blue" @click="handleSubmit" :no-click-warn="!formChecked()">登录</c-button>
+        <c-button theme="blue" @click="handleToRegister">去注册</c-button>
       </div>
       <router-link class="link" to="/forget-password">忘记密码？</router-link>
       <background></background>

src/views/register/Register.vue

@@ -10,7 +10,7 @@
         <c-input placeholder="邮箱" type="email" v-model="email"></c-input>
         <div class="verified-code-wrapper">
           <c-input placeholder="邮箱验证码" type="number" v-model="emailCode"></c-input>
-          <c-button class="secondary" :disabled="typeof this.emailButtonContent === typeof 0"
+          <c-button :no-click-warn="typeof this.emailButtonContent === typeof 0"
                     @click="handleSendEmailCode">{{ emailButtonContent }}
           </c-button>
         </div>
@@ -27,13 +27,13 @@
         <section class="tip absolute password-checked" v-if="password && passwordEnsure && !passwordWarning">
           <div class="vertical-center"><c-icon :right="4" bold theme="green" :size="14">check</c-icon>密码验证通过</div>
         </section>
-        <c-button class="secondary full-width mb-16 next-step" @click="step = 2">下一步</c-button>
+        <c-button theme="blue" block class="mb-16 mt-32" @click="step = 2">下一步</c-button>
       </section>
       <section class="step=2" v-show="step === 2">
         <section class="tip mb-8">
           <div>已填写的邮箱：{{email}}</div>
         </section>
-        <c-button @click="step = 1" class="warning full-width mb-16">上一步</c-button>
+        <c-button @click="step = 1" theme="orange" block class="mb-16">上一步</c-button>
         <div class="sub-title">
           其他信息
           <span>2/2</span>
@@ -45,12 +45,12 @@
         <c-input placeholder="手机" type="number" v-model="phone"></c-input>
         <div class="verified-code-wrapper">
           <c-input placeholder="手机验证码" type="number" v-model="phoneCode"></c-input>
-          <c-button class="secondary" @click="handleSendPhoneCode"
-                    :disabled="typeof this.phoneButtonContent === typeof 0">{{phoneButtonContent}}
+          <c-button theme="blue" @click="handleSendPhoneCode"
+                    :no-click-warn="typeof this.phoneButtonContent === typeof 0">{{phoneButtonContent}}
           </c-button>
         </div>
         <div class="button-area">
-          <c-button class="full-width" :disabled="!formChecked()" @click="handleSubmit">确认</c-button>
+          <c-button theme="blue" standout block :no-click-warn="!formChecked()" @click="handleSubmit">确认注册</c-button>
         </div>
       </section>
       <background></background>
@@ -221,6 +221,7 @@ export default {
 .tip {
   color: #7a8a9a;
   font-size: 12px;
+  margin-top: -12px;
 }
 
 .c-input {
@@ -253,10 +254,6 @@ export default {
   }
 }
 
-.next-step {
-  margin-top: 56px;
-}
-
 .absolute {
   position: absolute;
 }

src/views/shared/Discussion.vue

@@ -4,23 +4,15 @@
       消息通知
       <template
         v-if="(unreadMessage && !showRead && unreadMessage.length) || (readMessage && showRead && readMessage.length)">
-        <icon-button ripple="red" :class="editMode ? 'icon-active' : ''" @click="handleToggleEditMode"
-                     title="点击启动 / 关闭编辑模式">playlist_add_check</icon-button>
-        <span>{{editMode ? '编辑模式' : '浏览模式'}}</span>
+        <c-button :left="8" text icon="playlist_add_check" :theme="editMode ? 'orange' : 'normal'" @click="handleToggleEditMode"
+                  title="点击启动 / 关闭编辑模式">{{editMode ? '编辑模式' : '浏览模式'}}
+        </c-button>
       </template>
     </h1>
     <discussion-tab-tool-bar :read="false" @refresh="handleRefresh"></discussion-tab-tool-bar>
     <div v-show="editMode" class="confirm-area">
-      <!--      <c-button class="secondary" @click="handleChooseAllArchive"><span>{{iconMap['archive']}}</span> 全选</c-button>-->
-      <!--      <c-button class="error" @click="handleChooseAllDelete"><span>{{iconMap['delete']}}</span> 全选</c-button>-->
-      <div class="confirm" @click="handleSubmit">
-        <icon-button theme="green">check</icon-button>
-        确定
-      </div>
-      <div class="cancel" @click="cancel">
-        <icon-button theme="red">close</icon-button>
-        取消
-      </div>
+      <c-button theme="green" @click="handleSubmit" text icon="check">确定</c-button>
+      <c-button theme="red" @click="cancel" text icon="close">取消</c-button>
     </div>
     <template v-if="!showRead">
       <div class="no-content-warning" v-if="unreadMessage === null">
@@ -66,10 +58,10 @@
 import DiscussionTabToolBar from '@/components/DiscussionTab/DiscussionTabToolBar'
 import CMessage from '@/components/DiscussionTab/CMessage'
 import { deleteMessages, getReadMessages, getUnreadMessages, readMessages } from '@/server/message'
-import IconButton from '@/components/Basic/IconButton'
+import CButton from '@/components/Basic/CButton'
 
 export default {
-  components: { IconButton, DiscussionTabToolBar, CMessage },
+  components: { CButton, DiscussionTabToolBar, CMessage },
   data () {
     return {
       unreadMessage: null,
@@ -111,12 +103,6 @@ export default {
     handleDeleteStateChange ({ value, id }) {
       value ? (this.deleteIds.add(id)) : (this.deleteIds.delete(id))
     },
-    // handleChooseAllArchive () {
-    //   this.unreadMessage.map(message => this.archiveIds.add(message.id))
-    // },
-    // handleChooseAllDelete () {
-    //   this.unreadMessage.map(message => this.deleteIds.add(message.id))
-    // },
     getUnread (size, key) {
       return getUnreadMessages({ size, key }).then(res => {
         this.unreadMessage = res.data
@@ -193,17 +179,6 @@ export default {
     margin-left: 8px;
     color: #aabaca;
   }
-
-  .icon-active {
-    color: $theme-red;
-  }
-
-  span {
-    margin-left: 4px;
-    font-size: 16px;
-    color: #aabaca;
-    transition: .2s;
-  }
 }
 
 .confirm-area {
@@ -215,46 +190,6 @@ export default {
   display: flex;
   justify-content: left;
   animation: .2s .2s show forwards;
-
-  .c-button {
-    margin: 0 6px;
-    width: unset;
-    min-width: unset;
-
-    span {
-      display: inline-block;
-      margin-right: 2px;
-      font-family: 'iconfont', sans-serif;
-      transform: scale(1.2);
-    }
-  }
-
-  .confirm, .cancel {
-    display: flex;
-    align-items: center;
-    color: #6a7a8a;
-    cursor: pointer;
-  }
-
-  .confirm {
-    color: $theme-green;
-
-    &:hover {
-      opacity: .8;
-    }
-  }
-
-  .cancel {
-    color: $theme-red;
-
-    &:hover {
-      opacity: .8;
-    }
-
-    .icon {
-      color: $theme-red;
-    }
-  }
 }
 
 @keyframes show {

src/views/student/components/JoinCourse.vue

@@ -3,7 +3,7 @@
     <back-title>加入课程</back-title>
     <div class="sub-title">请输入选课码</div>
     <c-input placeholder="选课码" v-model="code"></c-input>
-    <c-button class="secondary full-width mb-24" @click="handleJoinCourse">确认选课</c-button>
+    <c-button block theme="blue" class="mb-24" @click="handleJoinCourse">确认选课</c-button>
     <div class="sub-title">课程信息</div>
     <course-detail :course="course"></course-detail>
   </tab-side-component>
@@ -32,12 +32,16 @@ export default {
   },
   methods: {
     handleJoinCourse () {
-      chooseCourse({ courseId: this.course.id, code: this.code }).then(res => {
-        this.$setSuccessMessage('成功加入课程：' + this.course.name)
-        this.$router.push({ name: 'student-explore' })
-      }).catch(err => {
-        this.$setErrorMessage(err.response.data.msg)
-      })
+      if (this.code) {
+        chooseCourse({ courseId: this.course.id, code: this.code }).then(res => {
+          this.$setSuccessMessage('成功加入课程：' + this.course.name)
+          this.$router.push({ name: 'student-explore' })
+        }).catch(err => {
+          this.$setErrorMessage(err.response.data.msg)
+        })
+      } else {
+        this.$setInfoMessage('选课码不能为空')
+      }
     }
   }
 }

src/views/student/components/StudentCourseDetail.vue

@@ -2,8 +2,8 @@
   <tab-side-component>
     <back-title>课程详情</back-title>
     <course-detail :course="course"></course-detail>
-    <c-button class="secondary full-width mb-16" @click="handleCheckSlideList">点击查看课件列表</c-button>
-    <c-button class="error full-width" @click="handleQuitCourse">退出本课程</c-button>
+    <c-button theme="blue" block class="mb-16" @click="handleCheckSlideList">点击查看课件列表</c-button>
+    <c-button theme="red" block @click="handleQuitCourse">退出本课程</c-button>
   </tab-side-component>
 </template>
 

src/views/student/components/StudentCourseSlides.vue

@@ -13,7 +13,7 @@
       <slide-card :key="slide.id" hide-course hide-teacher :slide="slide"
                   :click-handler="handleSlideCardClick"></slide-card>
     </template>
-    <c-button class="full-width secondary mt-16" @click="handleToManager">管理课程</c-button>
+    <c-button block theme="blue" class="mt-16" @click="handleToManager">管理课程</c-button>
   </tab-side-component>
 </template>
 

src/views/student/components/StudentSlideDetail.vue

@@ -2,13 +2,13 @@
   <tab-side-component>
     <back-title>课件详情</back-title>
     <slide-detail :slide="slide"></slide-detail>
-    <c-button class="full-width mb-16" @click="handleReadSlide">浏览课件</c-button>
+    <c-button block standout theme="blue" class="mb-16" @click="handleReadSlide">浏览课件</c-button>
     <a :href="slideUrl">
-      <c-button class="full-width mb-16 secondary">
+      <c-button block theme="blue" class="mb-16">
         下载课件
       </c-button>
     </a>
-    <c-button class="full-width secondary mb-16" @click="handleToQuiz">去做题</c-button>
+    <c-button block theme="green" class="mb-16" @click="handleToQuiz">去做题</c-button>
   </tab-side-component>
 </template>
 

src/views/student/tabs/StudentExplore.vue

@@ -12,7 +12,7 @@
           <div class="no-content-warning-tip">
             您还没有加入任何课程
           </div>
-          <c-button class="full-width secondary" @click="handleToCoursesManager">去课程管理界面</c-button>
+          <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

src/views/student/tabs/StudentPersonal.vue

@@ -6,18 +6,18 @@
     </h1>
     <div class="sub-title">修改姓名</div>
     <c-input :placeholder="'目前资料中的姓名：' + userInfo.name" class="mb-16" v-model="newName"></c-input>
-    <c-button class="warning full-width mb-32" @click="handleModifyName">确认修改姓名</c-button>
+    <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 class="secondary" :disabled="typeof this.emailButtonContent === typeof 0"
+      <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 class="warning full-width mb-32" @click="handleModifyPassword">确认修改密码</c-button>
-    <c-button class="error full-width" @click="handleLogout">登出</c-button>
+    <c-button theme="orange" block class="mb-32" @click="handleModifyPassword">确认修改密码</c-button>
+    <c-button theme="red" block @click="handleLogout">登出</c-button>
   </div>
 </template>
 

src/views/teacher/components/CreateNewCourse.vue

@@ -7,7 +7,7 @@
     <c-input textarea="true" maxlength="200" v-model="bio" placeholder="课程简要介绍，字数上限为 200"/>
     <div class="sub-title">选课码：</div>
     <c-input placeholder="学生将通过选课码注册课程" v-model="code"/>
-    <c-button class="secondary full-width" @click="handleCreate" :disabled="!formChecked()">确认创建</c-button>
+    <c-button theme="blue" block @click="handleCreate" noClickWarn="!formChecked()">确认创建</c-button>
   </tab-side-component>
 </template>
 

src/views/teacher/components/TeacherCourseDetail.vue

@@ -5,10 +5,10 @@
     <div class="sub-title">修改选课码：</div>
     <div class="change-wrapper mb-24">
       <c-input placeholder="修改不会影响已选学生" v-model="newCode"/>
-      <c-button class="secondary" @click="handleChangeCode">确认修改</c-button>
+      <c-button theme="blue" @click="handleChangeCode">确认修改</c-button>
     </div>
-    <c-button class="secondary full-width mb-16" @click="handleCheckSlideList">点击查看课件列表</c-button>
-    <c-button class="error full-width" @click="handleDeleteCourse">删除课程</c-button>
+    <c-button theme="blue" block class="mb-16" @click="handleCheckSlideList">点击查看课件列表</c-button>
+    <c-button theme="red" block @click="handleDeleteCourse">删除课程</c-button>
   </tab-side-component>
 </template>
 

src/views/teacher/components/TeacherCourseSlides.vue

@@ -8,12 +8,12 @@
     </div>
     <div class="no-content-warning" v-else-if="slides.length === 0">
       <div class="no-content-warning-tip">本课程尚无课件～</div>
-      <c-button class="full-width secondary" @click="handleToCreateCourse">去创建课件</c-button>
+      <c-button block theme="blue" @click="handleToCreateCourse">去创建课件</c-button>
     </div>
     <template v-for="slide of slides">
       <slide-card :key="slide.id" hide-teacher hide-course :slide="slide" :click-handler="handleSlideCardClick"></slide-card>
     </template>
-    <c-button class="full-width secondary mt-16" @click="handleToManager">管理本课程</c-button>
+    <c-button theme="blue" block class="mt-16" @click="handleToManager">管理本课程</c-button>
   </tab-side-component>
 </template>
 

src/views/teacher/components/TeacherSlideDetail.vue

@@ -2,9 +2,9 @@
   <tab-side-component>
     <back-title>课件详情</back-title>
     <slide-detail :slide="slide"></slide-detail>
-    <c-button class="full-width mb-16" @click="handleReadSlide">浏览课件</c-button>
+    <c-button block theme="blue" standout class="mb-16" @click="handleReadSlide">浏览课件</c-button>
     <a :href="slideUrl">
-      <c-button class="full-width mb-32 secondary">
+      <c-button block theme="blue" class="mb-32">
         下载课件
       </c-button>
     </a>
@@ -14,7 +14,7 @@
     </div>
     <div class="mb-16 modify-slide-name">
       <c-input placeholder="在此输入课件新名称" v-model="newSlideName"></c-input>
-      <c-button class="secondary" @click="handleModifySlideName">确认修改</c-button>
+      <c-button theme="blue" @click="handleModifySlideName">确认修改</c-button>
     </div>
     <div class="mb-8">
       <b>幻灯片状态设置</b>
@@ -23,8 +23,8 @@
     <div v-if="this.slide.state === 'DRAFT'" class="tip mb-32">
       提示：学生无法查看处于草稿状态的幻灯片，如果希望公开请设置为其他状态
     </div>
-    <c-button class="full-width secondary mb-16" @click="handleQuizSetting">习题设置 & 习题完成统计</c-button>
-    <c-button class="error full-width mb-16" @click="handleDeleteSlide">删除课件</c-button>
+    <c-button block theme="blue" class="mb-16" @click="handleQuizSetting">习题设置 & 习题完成统计</c-button>
+    <c-button block theme="red" class="mb-16" @click="handleDeleteSlide">删除课件</c-button>
   </tab-side-component>
 </template>
 

src/views/teacher/tabs/CreateSlide.vue

@@ -28,7 +28,7 @@
 <!--    <div class="tip mb-16">-->
 <!--      提示：课件创建成功后您需将课件状态设置为非草稿状态，学生才能进行浏览-->
 <!--    </div>-->
-    <c-button class="secondary full-width" :disabled="!formChecked()" @click="handleSubmit">
+    <c-button theme="blue" block :no-click-warn="!formChecked()" @click="handleSubmit">
       添加
     </c-button>
   </div>

src/views/teacher/tabs/TeacherCoursesManager.vue

@@ -13,7 +13,7 @@
         <course-card hide-teacher :key="course.id" :course="course" :index="index + 1"
                      :clickHandler="handleCourseCardClick"></course-card>
       </template>
-      <c-button @click="handleCreateNewCourse" class="full-width secondary">新建课程</c-button>
+      <c-button @click="handleCreateNewCourse" block theme="blue">新建课程</c-button>
     </div>
     <slide-in-different-transition>
       <router-view/>

src/views/teacher/tabs/TeacherExplore.vue

@@ -24,7 +24,7 @@
         </div>
         <div class="no-content-warning" v-else-if="courses.length === 0">
           <div class="no-content-warning-tip">你还没有过开设课程～</div>
-          <c-button class="full-width secondary" @click="handleToCreateCourse">去创建课程</c-button>
+          <c-button block theme="blue" @click="handleToCreateCourse">去创建课程</c-button>
         </div>
         <template v-for="(course, index) of courses">
           <course-card :key="course.id" :course="course" :index="index + 1" hide-bio

src/views/teacher/tabs/TeacherPersonal.vue

@@ -4,21 +4,21 @@
       个人信息设置
       <c-tag theme="blue">教师</c-tag>
     </h1>
-    <c-button class="full-width secondary mb-24" @click="handleToQuestions">题库设置</c-button>
+    <c-button block theme="blue" class="mb-24" @click="handleToQuestions">题库设置</c-button>
     <div class="sub-title">修改姓名</div>
     <c-input :placeholder="'目前资料中的姓名：' + userInfo.name" class="mb-16" v-model="newName"></c-input>
-    <c-button class="warning full-width mb-32" @click="handleModifyName">确认修改姓名</c-button>
+    <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="this.code"></c-input>
-      <c-button class="secondary" :disabled="typeof this.emailButtonContent === typeof 0"
+      <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 class="warning full-width mb-32" @click="handleModifyPassword">确认修改密码</c-button>
-    <c-button class="error full-width" @click="handleLogout">登出</c-button>
+    <c-button block theme="orange" class="mb-32" @click="handleModifyPassword">确认修改密码</c-button>
+    <c-button block theme="red" @click="handleLogout">登出</c-button>
   </div>
 </template>