优化

src/config/setting.js

@@ -2,7 +2,7 @@
 export const API_BASE_URL = process.env.VUE_APP_API_BASE_URL;
 
 // 项目名称
-export const PROJECT_NAME = localStorage.getItem('LogoName') && JSON.parse(localStorage.getItem('LogoName')).logoName ||  process.env.VUE_APP_NAME;
+export const PROJECT_NAME = '工业互联网平台';
 
 // 不显示侧栏的路由
 export const HIDE_SIDEBARS = [];

src/layout/components/setting-drawer.vue

@@ -242,7 +242,7 @@
         <el-button size="small" class="ele-fluid" icon="el-icon-refresh-left" @click="resetSetting">
           {{ $t('layout.setting.reset') }}
         </el-button>
-    
+
       </div>
     </div>
   </el-drawer>
@@ -253,6 +253,7 @@ import { mapGetters } from 'vuex';
 import { logoSave, logoByCode } from '@/api/login/index'
 
 
+
 export default {
   props: {
     // 是否显示, 支持 .sync 修饰
@@ -265,8 +266,8 @@ export default {
         logoType: 'logoType',
         logoCode: 'logoCode',
         logoTypeName: 'logoTypeName',
-        logoName: '',
-        logoUrl: null
+        logoName: null,
+        logoUrl:  null,
       },
 
       rules: {
@@ -341,26 +342,35 @@ export default {
     this.getLogo()
   },
   methods: {
-    getLogo() {
-      logoByCode('logoCode').then(res => {
-        this.form = res
-        localStorage.setItem('LogoName', JSON.stringify(this.form))
 
-      })
-    },
 
     save() {
       this.$refs.form.validate((valid) => {
         if (valid) {
           logoSave(this.form).then(res => {
             this.getLogo()
-             this.$message.success('操作成功')
+            this.$message.success('操作成功')
           })
         }
       })
 
     },
 
+    getLogo() {
+      logoByCode('logoCode').then(res => {
+       
+        if (!res) {
+          this.form = {
+            logoName: '',
+            logoUrl: null
+          }
+        } else {
+          this.form = res
+        }
+      
+      })
+    },
+
     updateVisible(value) {
       this.$emit('update:visible', value);
     },

src/layout/index.vue

@@ -21,7 +21,7 @@
     :colorful-icon="theme.colorfulIcon"
     :side-unique-open="theme.sideUniqueOpen"
     :style-responsive="theme.styleResponsive"
-    :project-name="PROJECT_NAME"
+    :project-name="projectName"
     :hide-footers="HIDE_FOOTERS"
     :hide-sidebars="HIDE_SIDEBARS"
     :repeatable-tabs="REPEATABLE_TABS"
@@ -52,8 +52,7 @@
     <router-layout />
     <!-- logo 图标 -->
     <template v-slot:logo  >
-      <img v-if="!logoImg" src="@/assets/logo.png" alt="logo" />
-       <img v-else :src="logoImg" alt="logo" />
+       <el-image v-if="logoImg"  fit="contain" :src="logoImg" alt="logo" />
     </template>
 
 
@@ -94,6 +93,9 @@
   import RouterLayout from '@/components/RouterLayout/index.vue';
   import HeaderTools from './components/header-tools.vue';
   // import PageFooter from './components/page-footer.vue';
+
+  
+import {  logoByCode } from '@/api/login/index'
   import {
     PROJECT_NAME,
     HIDE_SIDEBARS,
@@ -126,7 +128,7 @@
     },
     data () {
       return {
-        PROJECT_NAME,
+        // PROJECT_NAME,
         HIDE_SIDEBARS,
         HIDE_FOOTERS,
         REPEATABLE_TABS,
@@ -137,7 +139,8 @@
         // 是否全屏
         fullscreen: false,
 
-        logoImg: localStorage.getItem('LogoName') && JSON.parse(localStorage.getItem('LogoName')).logoUrl || null
+        logoImg:  null,
+        projectName: null,
       };
     },
     computed: {
@@ -152,7 +155,20 @@
       // 主题状态
       ...mapGetters(['theme'])
     },
+    created() {
+      this.getLogo()
+    },
     methods: {
+
+      getLogo() {
+      logoByCode('logoCode').then(res => {
+        this.logoImg = res.logoUrl
+          this.projectName = res.logoName
+      
+
+      })
+    },
+
       /* 侧栏折叠切换 */
       updateCollapse (value) {
         // console.log('value:', this.$store.state.user.menus);

src/views/login/index.vue

@@ -1,34 +1,16 @@
 <template>
-  <div
-    :class="[
-      'login-wrapper',
-      ['', 'login-form-right', 'login-form-left'][direction]
-    ]"
-  >
-    <el-form
-      ref="form"
-      size="large"
-      :model="form"
-      :rules="rules"
-      class="login-form ele-bg-white"
-      @keyup.enter.native="submit"
-    >
+  <div :class="[
+    'login-wrapper',
+    ['', 'login-form-right', 'login-form-left'][direction]
+  ]">
+    <el-form ref="form" size="large" :model="form" :rules="rules" class="login-form ele-bg-white"
+      @keyup.enter.native="submit">
       <h4>{{ $t('login.title') }}</h4>
       <el-form-item prop="loginName">
-        <el-input
-          clearable
-          v-model="form.loginName"
-          prefix-icon="el-icon-user"
-          :placeholder="$t('login.loginName')"
-        />
+        <el-input clearable v-model="form.loginName" prefix-icon="el-icon-user" placeholder="请输入登录账号"  />
       </el-form-item>
       <el-form-item prop="loginPwd">
-        <el-input
-          show-password
-          v-model="form.loginPwd"
-          prefix-icon="el-icon-lock"
-          :placeholder="$t('login.loginPwd')"
-        />
+        <el-input show-password v-model="form.loginPwd" prefix-icon="el-icon-lock" placeholder="请输入登录密码"  />
       </el-form-item>
       <!-- <el-form-item prop="code">
         <div class="login-input-group">
@@ -51,36 +33,19 @@
         <el-checkbox v-model="form.remember">
           {{ $t('login.remember') }}
         </el-checkbox>
-        <el-link
-          type="primary"
-          :underline="false"
-          class="ele-pull-right"
-          @click="$router.push('/forget')"
-        >
+        <el-link type="primary" :underline="false" class="ele-pull-right" @click="$router.push('/forget')">
           忘记密码
         </el-link>
       </div>
       <div class="el-form-item">
-        <el-button
-          size="large"
-          type="primary"
-          class="login-btn"
-          :loading="loading"
-          @click="submit"
-        >
+        <el-button size="large" type="primary" class="login-btn" :loading="loading" @click="submit">
           {{ loading ? $t('login.loading') : $t('login.login') }}
         </el-button>
       </div>
       <div class="ele-text-center" style="margin-bottom: 10px">
         <i class="login-oauth-icon el-icon-_qq" style="background: #3492ed"></i>
-        <i
-          class="login-oauth-icon el-icon-_wechat"
-          style="background: #4daf29"
-        ></i>
-        <i
-          class="login-oauth-icon el-icon-_weibo"
-          style="background: #cf1900"
-        ></i>
+        <i class="login-oauth-icon el-icon-_wechat" style="background: #4daf29"></i>
+        <i class="login-oauth-icon el-icon-_weibo" style="background: #cf1900"></i>
       </div>
     </el-form>
     <div class="login-copyright">
@@ -88,15 +53,10 @@
     </div>
     <!-- 多语言切换 -->
     <div style="position: absolute; right: 30px; top: 20px">
-      <i18n-icon
-        :icon-style="{ fontSize: '22px', color: '#fff', cursor: 'pointer' }"
-      />
+      <i18n-icon :icon-style="{ fontSize: '22px', color: '#fff', cursor: 'pointer' }" />
     </div>
     <!-- 实际项目去掉这段 -->
-    <div
-      class="hidden-xs-only"
-      style="position: absolute; right: 30px; bottom: 20px; z-index: 9"
-    >
+    <div class="hidden-xs-only" style="position: absolute; right: 30px; bottom: 20px; z-index: 9">
       <el-radio-group v-model="direction" size="mini">
         <el-radio-button label="2">居左</el-radio-button>
         <el-radio-button label="0">居中</el-radio-button>
@@ -107,248 +67,260 @@
 </template>
 
 <script>
-  import I18nIcon from '@/layout/components/i18n-icon.vue';
-  import { getToken } from '@/utils/token-util';
-  import { login, getCaptcha, sub } from '@/api/login';
+import I18nIcon from '@/layout/components/i18n-icon.vue';
+import { getToken } from '@/utils/token-util';
+import { login, getCaptcha } from '@/api/login';
 
-  export default {
-    // eslint-disable-next-line vue/multi-word-component-names
-    name: 'Login',
-    components: { I18nIcon },
-    data () {
+
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'Login',
+  components: { I18nIcon },
+  data() {
+    return {
+      // 登录框方向, 0居中, 1居右, 2居左
+      direction: 0,
+      // 加载状态
+      loading: false,
+      // 表单数据
+      form: {
+        loginName: localStorage.getItem('accountInfo') ? JSON.parse(localStorage.getItem('accountInfo')).loginName : '',
+        loginPwd: localStorage.getItem('accountInfo') ? JSON.parse(localStorage.getItem('accountInfo')).loginPwd : '',
+        remember: localStorage.getItem('accountInfo') ? JSON.parse(localStorage.getItem('accountInfo')).remember : false,
+      },
+      // 验证码base64数据
+      captcha: '',
+      // 验证码内容, 实际项目去掉
+      text: ''
+    };
+  },
+  computed: {
+    // 表单验证规则
+    rules() {
       return {
-        // 登录框方向, 0居中, 1居右, 2居左
-        direction: 0,
-        // 加载状态
-        loading: false,
-        // 表单数据
-        form: {
-          loginName: 'aaa',
-          loginPwd: '123456',
-          remember: true
-        },
-        // 验证码base64数据
-        captcha: '',
-        // 验证码内容, 实际项目去掉
-        text: ''
+        loginName: [
+          {
+            required: true,
+            message: this.$t('login.loginName'),
+            type: 'string',
+            trigger: 'blur'
+          }
+        ],
+        loginPwd: [
+          {
+            required: true,
+            message: this.$t('login.loginPwd'),
+            type: 'string',
+            trigger: 'blur'
+          }
+        ]
       };
-    },
-    computed: {
-      // 表单验证规则
-      rules () {
-        return {
-          loginName: [
-            {
-              required: true,
-              message: this.$t('login.loginName'),
-              type: 'string',
-              trigger: 'blur'
-            }
-          ],
-          loginPwd: [
-            {
-              required: true,
-              message: this.$t('login.loginPwd'),
-              type: 'string',
-              trigger: 'blur'
+    }
+  },
+  created() {
+    if (getToken()) {
+      this.goHome();
+    } else {
+      // 重置菜单权限
+      this.$store.commit('user/setMenus', null);
+    }
+  },
+  methods: {
+    /* 提交 */
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        this.loading = true;
+        login(this.form)
+          .then((res) => {
+            localStorage.setItem('userId', res.data.userId);
+            // 用户信息
+            this.$store.commit('user/setUserInfo', res.data);
+            this.loading = false;
+            this.$message.success(res.message);
+
+            if (this.form.remember) {
+              localStorage.setItem('accountInfo', JSON.stringify(this.form));
+            } else {
+              localStorage.removeItem('accountInfo');
             }
-          ]
-        };
-      }
-    },
-    created () {
-      if (getToken()) {
-        this.goHome();
-      } else {
-        // 重置菜单权限
-        this.$store.commit('user/setMenus', null);
-      }
-    },
-    methods: {
-      /* 提交 */
-      submit () {
-        this.$refs.form.validate((valid) => {
-          if (!valid) {
-            return false;
-          }
-          this.loading = true;
-          login(this.form)
-            .then((res) => {
-              localStorage.setItem('userId', res.data.userId);
-              // 用户信息
-              this.$store.commit('user/setUserInfo', res.data);
-              this.loading = false;
-              this.$message.success(res.message);
-              this.goHome();
-            })
-            .catch((e) => {
-              this.loading = false;
-              // this.$message.error(e.message);
-            });
-        });
-      },
-      /* 跳转到首页 */
-      goHome () {
-        this.$router.push(this.$route?.query?.from ?? '/').catch(() => {});
-      },
-      /* 更换图形验证码 */
-      changeCaptcha () {
-        // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
-        getCaptcha()
-          .then((data) => {
-            this.captcha = data.base64;
-            // 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 可以根据自己后端接口修改
-            this.text = data.text;
-            // 自动回填验证码, 实际项目去掉这个
-            this.form.code = this.text;
-            this.$refs?.form?.clearValidate();
+           
+            this.goHome();
+           
           })
           .catch((e) => {
+            this.loading = false;
             // this.$message.error(e.message);
           });
-      }
-    }
-  };
+      });
+    },
+    /* 跳转到首页 */
+    goHome() {
+      this.$router.push(this.$route?.query?.from ?? '/').catch(() => { });
+    },
+    /* 更换图形验证码 */
+    changeCaptcha() {
+      // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
+      getCaptcha()
+        .then((data) => {
+          this.captcha = data.base64;
+          // 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 可以根据自己后端接口修改
+          this.text = data.text;
+          // 自动回填验证码, 实际项目去掉这个
+          this.form.code = this.text;
+          this.$refs?.form?.clearValidate();
+        })
+        .catch((e) => {
+          // this.$message.error(e.message);
+        });
+    },
+
+
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-  /* 背景 */
-  .login-wrapper {
-    padding: 50px 20px;
-    position: relative;
-    box-sizing: border-box;
-    background-image: url('@/assets/bg-login.jpg');
-    background-repeat: no-repeat;
-    background-size: cover;
-    min-height: 100vh;
+/* 背景 */
+.login-wrapper {
+  padding: 50px 20px;
+  position: relative;
+  box-sizing: border-box;
+  background-image: url('@/assets/bg-login.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  min-height: 100vh;
 
-    &:before {
-      content: '';
-      background-color: rgba(0, 0, 0, 0.2);
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
+  &:before {
+    content: '';
+    background-color: rgba(0, 0, 0, 0.2);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
   }
+}
 
-  /* 卡片 */
-  .login-form {
-    margin: 0 auto;
-    width: 360px;
-    max-width: 100%;
-    padding: 25px 30px;
-    position: relative;
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
-    box-sizing: border-box;
-    border-radius: 4px;
-    z-index: 2;
-
-    h4 {
-      text-align: center;
-      margin: 0 0 25px 0;
-    }
+/* 卡片 */
+.login-form {
+  margin: 0 auto;
+  width: 360px;
+  max-width: 100%;
+  padding: 25px 30px;
+  position: relative;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+  box-sizing: border-box;
+  border-radius: 4px;
+  z-index: 2;
 
-    & > .el-form-item {
-      margin-bottom: 25px;
-    }
+  h4 {
+    text-align: center;
+    margin: 0 0 25px 0;
   }
 
-  .login-form-right .login-form {
-    margin: 0 15% 0 auto;
+  &>.el-form-item {
+    margin-bottom: 25px;
   }
+}
 
-  .login-form-left .login-form {
-    margin: 0 auto 0 15%;
+.login-form-right .login-form {
+  margin: 0 15% 0 auto;
+}
+
+.login-form-left .login-form {
+  margin: 0 auto 0 15%;
+}
+
+/* 验证码 */
+.login-input-group {
+  display: flex;
+  align-items: center;
+
+  :deep(.el-input) {
+    flex: 1;
   }
+}
 
-  /* 验证码 */
-  .login-input-group {
-    display: flex;
-    align-items: center;
+.login-captcha {
+  height: 38px;
+  width: 102px;
+  margin-left: 10px;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  text-align: center;
+  cursor: pointer;
 
-    :deep(.el-input) {
-      flex: 1;
-    }
+  &:hover {
+    opacity: 0.75;
   }
+}
 
-  .login-captcha {
-    height: 38px;
-    width: 102px;
-    margin-left: 10px;
-    border-radius: 4px;
-    border: 1px solid #dcdfe6;
-    text-align: center;
-    cursor: pointer;
+.login-btn {
+  display: block;
+  width: 100%;
+}
 
-    &:hover {
-      opacity: 0.75;
-    }
+/* 第三方登录图标 */
+.login-oauth-icon {
+  color: #fff;
+  padding: 5px;
+  margin: 0 10px;
+  font-size: 18px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* 底部版权 */
+.login-copyright {
+  color: #eee;
+  padding-top: 20px;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+}
+
+/* 响应式 */
+@media screen and (min-height: 550px) {
+  .login-form {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: -220px;
   }
 
-  .login-btn {
-    display: block;
-    width: 100%;
+  .login-form-right .login-form,
+  .login-form-left .login-form {
+    left: auto;
+    right: 15%;
+    transform: translateX(0);
+    margin: -220px auto auto auto;
   }
 
-  /* 第三方登录图标 */
-  .login-oauth-icon {
-    color: #fff;
-    padding: 5px;
-    margin: 0 10px;
-    font-size: 18px;
-    border-radius: 50%;
-    cursor: pointer;
+  .login-form-left .login-form {
+    right: auto;
+    left: 15%;
   }
 
-  /* 底部版权 */
   .login-copyright {
-    color: #eee;
-    padding-top: 20px;
-    text-align: center;
-    position: relative;
-    z-index: 1;
+    position: absolute;
+    bottom: 20px;
+    right: 0;
+    left: 0;
   }
+}
 
-  /* 响应式 */
-  @media screen and (min-height: 550px) {
-    .login-form {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translateX(-50%);
-      margin-top: -220px;
-    }
+@media screen and (max-width: 768px) {
 
-    .login-form-right .login-form,
-    .login-form-left .login-form {
-      left: auto;
-      right: 15%;
-      transform: translateX(0);
-      margin: -220px auto auto auto;
-    }
-
-    .login-form-left .login-form {
-      right: auto;
-      left: 15%;
-    }
-
-    .login-copyright {
-      position: absolute;
-      bottom: 20px;
-      right: 0;
-      left: 0;
-    }
-  }
-
-  @media screen and (max-width: 768px) {
-    .login-form-right .login-form,
-    .login-form-left .login-form {
-      left: 50%;
-      right: auto;
-      transform: translateX(-50%);
-      margin-right: auto;
-    }
+  .login-form-right .login-form,
+  .login-form-left .login-form {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+    margin-right: auto;
   }
+}
 </style>