代码优化

heshaofeng

2026-03-09 557f7f6079c30cd6fe8d6005cea3d89468bbcd31

 ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/views/Login.vue

@@ -13,115 +13,84 @@
        <div class="login-text-small">WELCOME TO LOGIN</div>
        <div class="item">
          <div class="input-icon el-icon-user"></div>
          <input
            type="text"
            v-focus
            v-model="userInfo.userName"
            placeholder="请输入账号"
          />
          <input type="text" v-focus v-model="userInfo.userName" placeholder="请输入账号" />
        </div>
        <div class="item">
          <div class="input-icon el-icon-lock"></div>
          <input
            type="password"
            v-focus
            v-model="userInfo.password"
            placeholder="请输入密码"
          />
          <input type="password" v-focus v-model="userInfo.password" placeholder="请输入密码" />
        </div>
        <div class="item">
          <div class="input-icon el-icon-mobile"></div>

          <input
            v-focus
            type="text"
            v-model="userInfo.verificationCode"
            placeholder="输入验证码"
          />
          <div class="code" @click="getVierificationCode">
            <img v-show="codeImgSrc != ''" :src="codeImgSrc" />
          </div>
        <div class="item station-select-item">
          <div class="input-icon el-icon-lock"></div>
          <el-select v-model="stationValue" placeholder="选择站台" class="station-select" @change="handleStationChange">
            <el-option v-for="item in stationOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>


        
      </div>
      <div class="loging-btn">
        <el-button
          size="large"
          :loading="loading"
          color="#3a6cd1"
          :dark="true"
          @click="login"
          long
        >
        <el-button size="large" :loading="loading" color="#3a6cd1" :dark="true" @click="login" long>
          <span v-if="!loading">登录</span>
          <span v-else>正在登录...</span>
        </el-button>
      </div>

      <!-- è´¦å·ä¿¡æ¯ -->
      <!-- <div class="account-info">
        <p>演示账号：admin666 &nbsp; &nbsp;密码:123456</p>
        <p>本地账号：admin &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;密码:123456</p>
        <p><a href="https://jq.qq.com/?_wv=1027&k=Sqstuy0M" style="text-decoration: none"
            target="_blank">QQ3群:743852316</a>
          &nbsp; &nbsp;&nbsp; &nbsp;
          <a href="http://v2.volcore.xyz/document/guide" style="text-decoration: none" target="_blank">框架文档</a>
        </p>
      </div> -->
      <!-- é“¾æŽ¥ä½ç½® -->
      <!-- <div class="app-link" >
        <a href="#" style="text-decoration: none">移动端扫码</a>
        <a>
          <i class="el-icon-chat-dot-round"></i> å°ç¨‹åº
          <img src="https://app-1256993465.cos.ap-nanjing.myqcloud.com/wechat.jpg" /></a>
        <a>
          <i class="el-icon-apple"></i>
          Android
          <img src="https://app-1256993465.cos.ap-nanjing.myqcloud.com/Android.png" /></a>
        <a>
          <i class="el-icon-document"></i>
          H5
          <img src="https://app-1256993465.cos.ap-nanjing.myqcloud.com/H5.png" /></a>
      </div> -->
    </div>

    <!-- é¡µé¢åº•éƒ¨ -->
    <!-- <div class="login-footer">
      <a style="text-decoration: none" href="https://beian.miit.gov.cn/" target="_blank">京ICP备19056538号-1</a>


      <a href="https://dotnet9.com/" style="text-decoration: none" target="blank">Dotnet9</a>
      <a href="https://space.bilibili.com/525836469" style="text-decoration: none" target="blank">NET视频教程(微软MVP-ACE录制)</a>
      <a href="https://www.cctalk.com/m/group/90268531" style="text-decoration: none" target="blank">VOL框架视频</a>
      <a href="http://120.48.115.252:9990" style="text-decoration: none" target="blank">视频演示地址</a>
    </div> -->

    <img class="login-bg" src="/static/login_bg.png" />
  </div>
</template>


<script >
<script>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  getCurrentInstance,
  onMounted,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import store from "../store/index";
import http from "@/../src/api/http.js";
import { stationManager, STATION_STORAGE_KEY } from "@/../src/uitils/stationManager";
export default defineComponent({
  setup(props, context) {
    store.commit("clearUserInfo", "");
    const loading = ref(false);
    const codeImgSrc = ref("");
    const value = ref("");
    const userInfo = reactive({
      userName: "",
      password: "",
      verificationCode: "",
      verificationCode: "1234",
      UUID: undefined,
    });
    const stationValue = ref("");
    const stationOptions = reactive([
      { label: "站台2", value: "2-1" },
      { label: "站台3", value: "3-1" },
    ]);
    // åˆå§‹åŒ–站台值
    onMounted(() => {
      // ä»Žæœ¬åœ°å­˜å‚¨åŠ è½½ä¿å­˜çš„站台值
      const savedStation = stationManager.getStation();
      if (savedStation) {
        stationValue.value = savedStation;
      } else if (stationOptions.length > 0) {
        // å¦‚果没有保存的值，使用第一个选项
        stationValue.value = stationOptions[0].value;
      }
    });
    const handleStationChange = (value) => {
      // ä¿å­˜ç«™å°é€‰æ‹©åˆ°æœ¬åœ°å­˜å‚¨
      if (value) {
        stationManager.saveStation(value);
        // ä¹Ÿä¿å­˜åˆ°Vuex/store中，方便全局访问
        store.commit("setStation", value);
      }
    };

    const getVierificationCode = () => {
      http.get("/api/User/getVierificationCode").then((x) => {
@@ -130,7 +99,7 @@
      });
    };
    getVierificationCode();
    

    let appContext = getCurrentInstance().appContext;
    let $message = appContext.config.globalProperties.$message;
    let router = useRouter();
@@ -138,9 +107,14 @@
    const login = () => {
      if (!userInfo.userName) return $message.error("请输入用户名");
      if (!userInfo.password) return $message.error("请输入密码");
      if (!userInfo.verificationCode) {
        return $message.error("请输入验证码");
      

      // ç¡®ä¿ç«™å°å€¼å·²ä¿å­˜
      if (stationValue.value) {
        stationManager.saveStation(stationValue.value);
        store.commit("setStation", stationValue.value);
      }

      loading.value = true;
      http.post("/api/User/login", userInfo, "正在登录....").then((result) => {
        if (!result.status) {
@@ -150,7 +124,7 @@
        }
        $message.success("登录成功,正在跳转!");
        store.commit("setUserInfo", result.data);
        

        router.push({ path: "/" });
      });
    };
@@ -170,6 +144,9 @@
      userInfo,
      loginPress,
      openUrl,
      stationOptions,
      stationValue,
      handleStationChange,
    };
  },
  directives: {
@@ -196,12 +173,9 @@
  width: 50%;
  display: flex;
  flex-direction: column;
  // margin-right: 150px;
  z-index: 999;

  .form-user {
    // margin: 25px 0;

    .item {
      border-radius: 5px;
      border: 1px solid #ececec;
@@ -210,19 +184,31 @@
      background: #ffff;
      height: 45px;
      padding-left: 20px;
      display: flex;
      align-items: center;

      &.station-select-item {
        padding-left: 0;

        .input-icon {
          margin-left: 20px;
          min-width: 20px;
        }
      }

      .code {
        position: relative;
        cursor: pointer;
        width: 74px;
        padding: 5px 10px 0 0;
        display: flex;
        align-items: center;
      }

      .input-icon {
        line-height: 45px;
        color: #7a7a7a;
        padding-right: 20px;
        display: flex;
        align-items: center;
      }
    }
  }
@@ -241,12 +227,27 @@
    margin: 0;
    padding: 0;
    color: #323233;
    line-height: inherit;
    text-align: left;
    border: 0;
    outline: none;
    font-size: 16px;
    line-height: 20px;
    height: 100%;
    line-height: normal;
  }

  select {
    background: white;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #323233;
    text-align: left;
    border: 0;
    outline: none;
    font-size: 16px;
  }
}

@@ -270,7 +271,6 @@
  font-weight: bolder;
  font-size: 20px;
  letter-spacing: 2px;

  position: relative;
  display: flex;

@@ -309,10 +309,126 @@
  color: transparent;
  font-size: 25px;
}

// ä¸‹æ‹‰æ¡†è‡ªå®šä¹‰æ ·å¼ - ç§»é™¤æ‰€æœ‰äº¤äº’效果
.station-select {
  width: 100%;
  height: 100%;
  flex: 1;

  :deep(.el-input) {
    height: 100%;
    cursor: pointer; // æ·»åŠ æŒ‡é’ˆæ˜¾ç¤ºä¸ºå¯ç‚¹å‡»
  }

  :deep(.el-input__wrapper) {
    height: 100%;
    box-shadow: none;
    border: none;
    padding: 0;
    background: transparent;

    // ç§»é™¤æ‰€æœ‰hover、focus效果
    &:hover,
    &:focus,
    &.is-focus {
      box-shadow: none !important;
      outline: none !important;
      border: none !important;
    }
  }

  :deep(.el-input__inner) {
    height: 100%;
    padding-left: 10px;
    padding-top: 10px;
    font-size: 16px;
    color: #323233;
    cursor: pointer; // æ·»åŠ æŒ‡é’ˆæ˜¾ç¤ºä¸ºå¯ç‚¹å‡»

    &::placeholder {
      color: #c0c4cc;
    }
  }

  :deep(.el-input__suffix) {
    display: flex;
    align-items: center;
    height: 100%;
  }

  :deep(.el-select__caret) {
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 10px;
  }

  // ç§»é™¤æ•´ä¸ªç»„件上的任何hover和focus样式
  &:hover,
  &:focus,
  &.is-focus {
    :deep(.el-input__wrapper) {
      box-shadow: none !important;
      outline: none !important;
      border: none !important;
    }
  }
}

// ä¿®æ”¹å…¨å±€çš„下拉框样式
:deep(.el-select-dropdown) {
  border: 1px solid #ececec;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .el-select-dropdown__item {
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    color: #323233;
    padding: 0 20px;

    &:hover {
      background-color: #f5f7fa;
    }

    &.selected {
      color: #3a6cd1;
      font-weight: normal;
      background-color: #f0f7ff;
    }
  }

  // éšè—æ»šåŠ¨æ¡æˆ–调整滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }
}

// ç§»é™¤æ‰€æœ‰input的focus和hover样式
input {

  &:hover,
  &:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
}
</style>
<style lang="less" scoped>
.app-link {
  // font-weight: bolder;
  text-align: center;
  padding-top: 5px;
  font-size: 12px;
@@ -343,7 +459,6 @@
      top: -130px;
      width: 120px;
      left: -22px;

      border: 1px solid #b1b1b1;
    }
  }
@@ -383,6 +498,7 @@

<style lang="less" scoped>
@media screen and (max-width: 700px) {

  .login-bg,
  .account-info,
  .app-link,