Merge branch 'vue-next' of https://github.com/TaleLin/lin-cms-vue into vue-next

vanoneang · vanoneang · commit f2f9144e1653 · 2021-12-16T16:29:24.000+08:00
diff --git a/README.md b/README.md
@@ -100,11 +100,15 @@ QQ群搜索：Lin CMS 官方交流群 或 814597236
 
 ## 版本日志
 
-最新版本 `0.4.0`
+最新版本 `0.4.1`
 
+### 0.4.1
+
+1. `A` 新增验证码功能，默认关闭验证码
 ### 0.4.0
 
 1. `U` 升级到 Vue3 版本
+
 ### 0.3.5
 
 1. `F` 统一前端规范，文件夹、文件名统一用单数和小写字母中划线形式
diff --git a/babel.config.js b/babel.config.js
@@ -1,13 +1,7 @@
 module.exports = {
   presets: [['@vue/cli-plugin-babel/preset']],
   plugins: [
-    [
-      'component',
-      {
-        libraryName: 'element-plus',
-        styleLibraryName: 'theme-chalk',
-      },
-    ],
+    //去除element babel 新版直接手动导入即可
     '@babel/plugin-proposal-optional-chaining',
     '@babel/plugin-proposal-nullish-coalescing-operator',
   ],
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,10 +16,10 @@
     "@antv/g2plot": "^0.11.35",
     "@babel/polyfill": "^7.4.4",
     "@tinymce/tinymce-vue": "^4.0.0",
-    "axios": "^0.21.1",
+    "axios": "^0.21.2",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.4",
-    "element-plus": "^1.0.2-beta.70",
+    "element-plus": "^1.2.0-beta.5",
     "event-source-polyfill": "^1.0.7",
     "fastscan": "^1.0.4",
     "good-storage": "^1.1.0",
@@ -30,7 +30,7 @@
     "photoswipe": "^4.1.2",
     "screenfull": "^4.2.0",
     "swiper": "^6.4.5",
-    "vue": "^3.1.4",
+    "vue": "^3.2.24",
     "vue-picture-cropper": "^0.1.9",
     "vue-router": "^4.0.10",
     "vuex": "^4.0.2",
@@ -43,7 +43,7 @@
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-unit-jest": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-service": "~4.5.15",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-airbnb": "^4.0.1",
     "@vue/test-utils": "^2.0.0-beta.8",
diff --git a/src/assets/style/elementFont.css b/src/assets/style/elementFont.css
diff --git a/src/assets/style/fonts/element-icons.ttf b/src/assets/style/fonts/element-icons.ttf
diff --git a/src/assets/style/fonts/element-icons.woff b/src/assets/style/fonts/element-icons.woff
diff --git a/src/assets/style/realize/element-variable.scss b/src/assets/style/realize/element-variable.scss
@@ -19,11 +19,12 @@ $--background-color-base: #F6F7FA !default;
 $--link-default-active-color: $--color-primary !default;
 $--link-default-font-color: $--color-text-regular !default;
 $--link-disabled-font-color: $--color-text-placeholder !default;
-
 /* 改变 icon 字体路径变量，必需 */
-$--font-path: "~element-plus/lib/theme-chalk/fonts";
-
-@import "~element-plus/packages/theme-chalk/src/index";
+//$--font-path: "~element-plus/lib/theme-chalk/fonts";
+//兼容字体 新版本element-plus 已经移除font-icon
+@import "../elementFont.css";
+@import "~element-plus/theme-chalk/src/index";
+@import "~element-plus/theme-chalk/src/mixins/mixins";
 
 // button
 .el-button {
diff --git a/src/component/layout/sidebar/menu-tree.vue b/src/component/layout/sidebar/menu-tree.vue
@@ -1,12 +1,13 @@
 <template>
-  <el-submenu v-if="item.children?.length > 0" :index="item.path" popper-append-to-body>
+  <!--el-submenu改名为el-sub-menu-->
+  <el-sub-menu v-if="item.children?.length > 0" :index="item.path" popper-append-to-body>
     <template #title>
       <i v-if="!filterIcon(item.icon)" :class="item.icon"></i>
       <img v-else :src="item.icon" class="img-icon" />
       <span>{{ item.title }}</span>
     </template>
     <menu-tree v-for="child in item.children" :key="child.path" :item="child" />
-  </el-submenu>
+  </el-sub-menu>
 
   <el-menu-item v-else :index="item.path" @click="navigateTo(item.path)">
     <i v-if="!filterIcon(item.icon)" :class="item.icon"></i>
@@ -47,12 +48,14 @@ export default {
   display: inline-block;
   transform: translateY(21px);
 }
+
 .iconfont {
   margin-right: 10px;
   margin-left: 5px;
   color: $sub-menu-title;
   height: $menu-item-height;
 }
+
 .title {
   display: inline-block;
   width: 110px;
diff --git a/src/lin/model/user.js b/src/lin/model/user.js
@@ -1,5 +1,5 @@
 import store from '@/store'
-import _axios, { post, get, put } from '@/lin/plugin/axios'
+import _axios, { get, put } from '@/lin/plugin/axios'
 import { saveTokens } from '../util/token'
 
 export default class User {
@@ -24,13 +24,23 @@ export default class User {
 
   /**
    * 登陆获取tokens
-   * @param {string} username 用户名
-   * @param {string} password 密码
+   * @param { String } username 用户名
+   * @param { String } password 密码
+   * @param { String } captcha 验证码
+   * @param { String } tag 验证码签名
    */
-  static async getToken(username, password) {
-    const tokens = await post('cms/user/login', {
-      username,
-      password,
+  static async getToken(username, password, captcha, tag) {
+    const tokens = await _axios({
+      url: 'cms/user/login',
+      method: 'POST',
+      data: {
+        captcha,
+        username,
+        password,
+      },
+      headers: {
+        tag,
+      },
     })
     saveTokens(tokens.access_token, tokens.refresh_token)
     return tokens
diff --git a/src/lin/plugin/axios.js b/src/lin/plugin/axios.js
@@ -28,7 +28,7 @@ const config = {
  * @param { number } code 错误码
  */
 function refreshTokenException(code) {
-  const codes = [10000, 10042, 10050, 10052]
+  const codes = [10000, 10042, 10050, 10052, 10012]
   return codes.includes(code)
 }
 
diff --git a/src/main.js b/src/main.js
@@ -18,7 +18,7 @@ import StickyTop from '@/component/base/sticky-top/sticky-top'
 import SourceCode from '@/component/base/source-code/source-code'
 
 import '@/assets/style/index.scss'
-import 'element-plus/lib/theme-chalk/index.css'
+import 'element-plus/dist/index.css'
 import '@/assets/style/realize/element-variable.scss'
 
 const app = createApp(App)
diff --git a/src/view/admin/group/group-edit.vue b/src/view/admin/group/group-edit.vue
@@ -71,6 +71,7 @@ export default {
     const confirmEdit = async () => {
       let addRes = 0
       let delRes = 0
+      const groupId = parseInt(route.query.id, 10)
       // 判断是否更改了分组权限
       if (permissions.value.sort().toString() !== cachePermissions.value.sort().toString()) {
         const deletePermissions = cachePermissions.value
@@ -81,10 +82,10 @@ export default {
           .filter(v => !cachePermissions.value.includes(v))
 
         if (addPermissions.length > 0) {
-          addRes = await AdminModel.dispatchPermissions(route.query.id, addPermissions)
+          addRes = await AdminModel.dispatchPermissions(groupId, addPermissions)
         }
         if (deletePermissions.length > 0) {
-          delRes = await AdminModel.removePermissions(route.query.id, deletePermissions)
+          delRes = await AdminModel.removePermissions(groupId, deletePermissions)
         }
         if (addRes.code < window.MAX_SUCCESS_CODE || delRes.code < window.MAX_SUCCESS_CODE) {
           ElMessage.success('权限修改成功')
diff --git a/src/view/login/login.vue b/src/view/login/login.vue
@@ -12,6 +12,10 @@
           <span class="icon secret-icon"></span>
           <input type="password" v-model="account.password" autocomplete="off" placeholder="请填写用户登录密码" />
         </div>
+        <div class="form-item password" v-if="captchaImage">
+          <img class="captcha" :src="captchaImage" />
+          <input type="password" v-model="account.captcha" autocomplete="off" placeholder="请填写验证码" />
+        </div>
         <button class="submit-btn" type="submit">登录</button>
       </form>
     </div>
@@ -22,14 +26,17 @@
 import { reactive, ref, onMounted, getCurrentInstance } from 'vue'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
+import axios from 'lin/plugin/axios'
 import UserModel from '@/lin/model/user'
 import Utils from '@/lin/util/util'
 import Config from '@/config'
 
 export default {
   setup() {
+    let tag = ''
     const wait = 2000 // 2000ms之内不能重复发起请求
     const loading = ref(false)
+    const captchaImage = ref('')
     const store = useStore()
     const router = useRouter()
     const throttleLogin = ref(null)
@@ -38,16 +45,17 @@ export default {
     const account = reactive({
       username: '',
       password: '',
+      captcha: '',
     })
 
     /**
      * 根据账号密码登录，拿到 token 并储存
      */
     const login = async () => {
-      const { username, password } = account
+      const { username, password, captcha } = account
       try {
         loading.value = true
-        await UserModel.getToken(username, password)
+        await UserModel.getToken(username, password, captcha, tag)
         await getInformation()
         loading.value = false
         router.push(Config.defaultRoute)
@@ -60,6 +68,16 @@ export default {
       }
     }
 
+    const getCaptcha = async () => {
+      axios({
+        method: 'POST',
+        url: 'cms/user/captcha',
+      }).then(result => {
+        ;({ tag } = result)
+        captchaImage.value = result.image
+      })
+    }
+
     /**
      * 获取并更新当前管理员信息
      */
@@ -78,12 +96,14 @@ export default {
      * 节流登录
      */
     onMounted(() => {
+      getCaptcha()
       throttleLogin.value = Utils.throttle(login, wait)
     })
 
     return {
       account,
       loading,
+      captchaImage,
       throttleLogin,
     }
   },
@@ -130,6 +150,7 @@ export default {
       width: 100%;
 
       .form-item {
+        position: relative;
         width: 100%;
         height: 40px;
         box-sizing: border-box;
@@ -145,6 +166,13 @@ export default {
           padding-left: 74px;
           box-sizing: border-box;
         }
+
+        .captcha {
+          position: absolute;
+          width: 80px;
+          right: 30px;
+          top: -22px;
+        }
       }
 
       .form-item.nickname {
diff --git a/vue.config.js b/vue.config.js
@@ -5,7 +5,7 @@ function resolve(dir) {
 }
 
 module.exports = {
-  lintOnSave: true,
+  lintOnSave: false,
   productionSourceMap: false,
   // assetsDir: 'static',
   chainWebpack: config => {
diff --git a/yarn.lock b/yarn.lock
