From 1378fc4cd7abc24ed3a982e09437c2c8a74e9f2f Mon Sep 17 00:00:00 2001
From: 647556386 <647556386@qq.com>
Date: 星期二, 27 一月 2026 19:06:32 +0800
Subject: [PATCH] 代码优化
---
项目代码/WIDESEA_WMSClient/src/views/Login.vue | 282 ++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 203 insertions(+), 79 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/views/Login.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/views/Login.vue"
index 6283b76..91b5e8d 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/views/Login.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/views/Login.vue"
@@ -13,115 +13,90 @@
<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 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 class="item">
<div class="input-icon el-icon-mobile"></div>
-
- <input
- v-focus
- type="text"
- v-model="userInfo.verificationCode"
- placeholder="杈撳叆楠岃瘉鐮�"
- />
+ <input v-focus type="text" v-model="userInfo.verificationCode" placeholder="杈撳叆楠岃瘉鐮�" />
<div class="code" @click="getVierificationCode">
<img v-show="codeImgSrc != ''" :src="codeImgSrc" />
</div>
</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>婕旂ず璐﹀彿锛歛dmin666 瀵嗙爜:123456</p>
- <p>鏈湴璐﹀彿锛歛dmin 瀵嗙爜:123456</p>
- <p><a href="https://jq.qq.com/?_wv=1027&k=Sqstuy0M" style="text-decoration: none"
- target="_blank">QQ3缇�:743852316</a>
-
- <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">浜琁CP澶�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 +105,7 @@
});
};
getVierificationCode();
-
+
let appContext = getCurrentInstance().appContext;
let $message = appContext.config.globalProperties.$message;
let router = useRouter();
@@ -141,6 +116,13 @@
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 +132,7 @@
}
$message.success("鐧诲綍鎴愬姛,姝ｅ湪璺宠浆!");
store.commit("setUserInfo", result.data);
-
+
router.push({ path: "/" });
});
};
@@ -170,6 +152,9 @@
userInfo,
loginPress,
openUrl,
+ stationOptions,
+ stationValue,
+ handleStationChange,
};
},
directives: {
@@ -196,12 +181,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 +192,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 +235,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 +279,6 @@
font-weight: bolder;
font-size: 20px;
letter-spacing: 2px;
-
position: relative;
display: flex;
@@ -309,10 +317,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;
+
+ // 绉婚櫎鎵�鏈塰over銆乫ocus鏁堟灉
+ &: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鍜宖ocus鏍峰紡
+ &: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;
+ }
+}
+
+// 绉婚櫎鎵�鏈塱nput鐨刦ocus鍜宧over鏍峰紡
+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 +467,6 @@
top: -130px;
width: 120px;
left: -22px;
-
border: 1px solid #b1b1b1;
}
}
@@ -383,6 +506,7 @@
<style lang="less" scoped>
@media screen and (max-width: 700px) {
+
.login-bg,
.account-info,
.app-link,
--
Gitblit v1.9.3