From c7566bba45e6f90594d36ec4b80ac4ff89f577ee Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 08 十月 2026 14:19:36 +0800
Subject: [PATCH] 项目重构
---
src/views/login.vue | 672 +++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 542 insertions(+), 130 deletions(-)
diff --git a/src/views/login.vue b/src/views/login.vue
index f4b6398..dbcdd29 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,71 +1,126 @@
<template>
<div class="login">
- <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
- <h3 class="title">{{ title }}</h3>
- <el-form-item prop="username">
- <el-input
- v-model="loginForm.username"
- type="text"
- size="large"
- auto-complete="off"
- placeholder="璐﹀彿"
- >
- <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
- </el-input>
- </el-form-item>
- <el-form-item prop="password">
- <el-input
- v-model="loginForm.password"
- type="password"
- size="large"
- auto-complete="off"
- placeholder="瀵嗙爜"
- @keyup.enter="handleLogin"
- >
- <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
- </el-input>
- </el-form-item>
- <el-form-item prop="code" v-if="captchaEnabled">
- <el-input
- v-model="loginForm.code"
- size="large"
- auto-complete="off"
- placeholder="楠岃瘉鐮�"
- style="width: 63%"
- @keyup.enter="handleLogin"
- >
- <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
- </el-input>
- <div class="login-code">
- <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+ <!-- 宸︿晶锛氫华鍣ㄦ帶鍒跺彴闈㈡澘 -->
+ <aside class="login-brand">
+ <header class="brand-head">
+ <span class="brand-id">
+ <span class="brand-mark" aria-hidden="true">
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+ stroke-linecap="round" stroke-linejoin="round">
+ <path d="M9 3h6" />
+ <path d="M10 3v5.2L5.4 17A2.6 2.6 0 0 0 7.8 21h8.4a2.6 2.6 0 0 0 2.4-4L14 8.2V3" />
+ <path d="M7.2 14h9.6" />
+ </svg>
+ </span>
+ <span class="brand-name">{{ title }}</span>
+ </span>
+
+ <span class="brand-console">
+ <i class="led" aria-hidden="true"></i>
+ <span>INSTRUMENT CONSOLE</span>
+ </span>
+ </header>
+
+ <!-- 閲忕▼鍒诲害灏猴細绾楗帮紝缁欓潰鏉夸华琛ㄦ劅 -->
+ <div class="gauge" aria-hidden="true">
+ <div class="gauge-ticks"></div>
+ <div class="gauge-scale">
+ <span v-for="n in gaugeScale" :key="n">{{ n }}</span>
</div>
- </el-form-item>
- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">璁颁綇瀵嗙爜</el-checkbox>
- <el-form-item style="width:100%;">
+ </div>
+
+ <!-- 鍒诲害灏轰笅鏂圭殑闈欐�佽鏁拌建杩癸細绾楗� -->
+ <div class="trace" aria-hidden="true">
+ <svg viewBox="0 0 560 56" preserveAspectRatio="none" fill="none">
+ <polyline
+ points="0,50 20,50 30,48 40,50 60,50 70,44 80,50 110,50 120,20 130,8 140,20 150,50 170,50 180,30 190,50 210,50 220,46 230,50 260,50 270,38 280,50 300,50 310,50 320,14 330,6 340,16 350,50 380,50 390,34 400,50 430,50 440,49 450,50 480,50 490,26 500,50 520,50 540,50 560,50"
+ stroke="rgba(94, 234, 212, 0.5)"
+ stroke-width="1.5"
+ stroke-linejoin="round"
+ stroke-linecap="round"
+ vector-effect="non-scaling-stroke"
+ />
+ </svg>
+ </div>
+
+ <div class="brand-copy">
+ <h1 class="brand-title">瀹為獙瀹や俊鎭鐞嗙郴缁�</h1>
+ <p class="brand-sub">Laboratory Information Management System</p>
+ </div>
+
+ <ul class="brand-points">
+ <li v-for="(item, i) in capabilities" :key="item">
+ <span class="pt-idx">{{ i < 9 ? '0' + (i + 1) : i + 1 }}</span>
+ <span class="pt-txt">{{ item }}</span>
+ <span class="pt-line" aria-hidden="true"></span>
+ </li>
+ </ul>
+
+ <p class="brand-foot">{{ footerContent }}</p>
+ </aside>
+
+ <!-- 鍙充晶锛氳韩浠介獙璇佹帶鍒跺崱 -->
+ <main class="login-main">
+ <el-form
+ ref="loginRef"
+ :model="loginForm"
+ :rules="loginRules"
+ label-position="top"
+ class="login-form"
+ >
+ <div class="form-head">
+ <h2 class="form-title">
+ <i class="led" aria-hidden="true"></i>
+ 韬唤楠岃瘉
+ </h2>
+ <span class="form-tag">AUTH</span>
+ </div>
+
+ <el-form-item label="璐﹀彿" prop="username">
+ <el-input
+ v-model="loginForm.username"
+ type="text"
+ size="large"
+ autocomplete="username"
+ placeholder="璇疯緭鍏ヨ处鍙�"
+ >
+ <template #prefix><svg-icon icon-class="user" class="input-icon" /></template>
+ </el-input>
+ </el-form-item>
+
+ <el-form-item label="瀵嗙爜" prop="password">
+ <el-input
+ v-model="loginForm.password"
+ type="password"
+ size="large"
+ autocomplete="current-password"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ @keyup.enter="handleLogin"
+ >
+ <template #prefix><svg-icon icon-class="password" class="input-icon" /></template>
+ </el-input>
+ </el-form-item>
+
+ <div class="form-actions">
+ <el-checkbox v-model="loginForm.rememberMe" class="remember">璁颁綇瀵嗙爜</el-checkbox>
+ <router-link v-if="register" class="link-type" :to="'/register'">绔嬪嵆娉ㄥ唽</router-link>
+ </div>
+
<el-button
:loading="loading"
size="large"
type="primary"
- style="width:100%;"
+ class="submit-btn"
@click.prevent="handleLogin"
>
- <span v-if="!loading">鐧� 褰�</span>
- <span v-else>鐧� 褰� 涓�...</span>
+ {{ loading ? '鐧� 褰� 涓�' : '鐧� 褰�' }}
</el-button>
- <div style="float: right;" v-if="register">
- <router-link class="link-type" :to="'/register'">绔嬪嵆娉ㄥ唽</router-link>
- </div>
- </el-form-item>
- </el-form>
- <!-- 搴曢儴 -->
- <div class="el-login-footer">
- <span>{{ footerContent }}</span>
- </div>
+ </el-form>
+ </main>
</div>
</template>
<script setup>
-import { getCodeImg } from "@/api/login"
import Cookies from "js-cookie"
import { encrypt, decrypt } from "@/utils/jsencrypt"
import useUserStore from '@/store/modules/user'
@@ -73,6 +128,14 @@
const title = import.meta.env.VITE_APP_TITLE
const footerContent = defaultSettings.footerContent
+// 瑁呴グ鎬у埢搴﹀��
+const gaugeScale = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+const capabilities = [
+ '鏍峰搧鍏ㄦ祦绋嬭拷婧�',
+ '妫�楠屾暟鎹泦涓鐞�',
+ '浣撶郴鏂囦欢涓庤褰曞綊妗�',
+ '璁惧涓庝汉鍛樿兘鍔涚鎺�'
+]
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
@@ -81,21 +144,15 @@
const loginForm = ref({
username: "admin",
password: "admin123",
- rememberMe: false,
- code: "",
- uuid: ""
+ rememberMe: false
})
const loginRules = {
username: [{ required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勮处鍙�" }],
- password: [{ required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勫瘑鐮�" }],
- code: [{ required: true, trigger: "change", message: "璇疯緭鍏ラ獙璇佺爜" }]
+ password: [{ required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勫瘑鐮�" }]
}
-const codeUrl = ref("")
const loading = ref(false)
-// 楠岃瘉鐮佸紑鍏�
-const captchaEnabled = ref(true)
// 娉ㄥ唽寮�鍏�
const register = ref(false)
const redirect = ref(undefined)
@@ -131,21 +188,7 @@
router.push({ path: redirect.value || "/", query: otherQueryParams })
}).catch(() => {
loading.value = false
- // 閲嶆柊鑾峰彇楠岃瘉鐮�
- if (captchaEnabled.value) {
- getCode()
- }
})
- }
- })
-}
-
-function getCode() {
- getCodeImg().then(res => {
- captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
- if (captchaEnabled.value) {
- codeUrl.value = "data:image/gif;base64," + res.img
- loginForm.value.uuid = res.uuid
}
})
}
@@ -161,79 +204,448 @@
}
}
-getCode()
getCookie()
</script>
<style lang='scss' scoped>
+$console-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
.login {
display: flex;
- justify-content: center;
- align-items: center;
height: 100%;
- background-image: url("../assets/images/login-background.jpg");
- background-size: cover;
+ background: var(--lims-bg);
}
-.title {
- margin: 0px auto 30px auto;
- text-align: center;
- color: #707070;
+
+/* ============ 宸︿晶锛氫华鍣ㄦ帶鍒跺彴闈㈡澘 ============ */
+.login-brand {
+ position: relative;
+ overflow: hidden;
+ flex: 0 0 46%;
+ min-width: 400px;
+ padding: 40px 48px 32px;
+ display: flex;
+ flex-direction: column;
+ color: #fff;
+ /* 瀹為獙瀹ょ瑪璁版湰缁嗙綉鏍� + 闈掔豢娓愬彉銆�
+ 搴曡壊鍘嬪埌 teal-700 涓�妗ｏ細鐧借壊姝ｆ枃鍦� #0d9488 涓婂彧鏈� 3.3:1锛岃揪涓嶅埌 AA 4.5:1銆� */
+ background-color: #0f766e;
+ background-image:
+ linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
+ linear-gradient(158deg, #0f766e 0%, #0d6a62 50%, #0a5750 100%);
+ background-size: 32px 32px, 32px 32px, 100% 100%;
+}
+
+/* --- 椤舵爮锛氭爣璇� + 鎺у埗鍙伴摥鐗� --- */
+.brand-head {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ padding-bottom: 14px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.22);
+
+ .brand-id {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .brand-mark {
+ width: 30px;
+ height: 30px;
+ flex-shrink: 0;
+ border-radius: 7px;
+ background: rgba(255, 255, 255, 0.14);
+ border: 1px solid rgba(255, 255, 255, 0.26);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ svg {
+ width: 17px;
+ height: 17px;
+ }
+ }
+
+ .brand-name {
+ font-family: $console-mono;
+ font-size: 16px;
+ font-weight: 600;
+ letter-spacing: 4px;
+ color: rgba(255, 255, 255, 0.97);
+ }
+
+ .brand-console {
+ display: flex;
+ align-items: center;
+ gap: 7px;
+ font-family: $console-mono;
+ font-size: 10px;
+ letter-spacing: 1.6px;
+ /* 绾楗伴摥鐗岋紝涓嶆壙杞戒俊鎭� */
+ color: rgba(255, 255, 255, 0.78);
+ white-space: nowrap;
+
+ .led {
+ color: #5eead4;
+ }
+ }
+}
+
+/* LED 鎸囩ず鐏細棰滆壊璺熼殢涓婁笅鏂囷紝绾楗� */
+.led {
+ width: 6px;
+ height: 6px;
+ flex-shrink: 0;
+ border-radius: 50%;
+ background: currentColor;
+ box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
+ animation: led-pulse 2.6s ease-in-out infinite;
+}
+
+@keyframes led-pulse {
+
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0.35;
+ }
+}
+
+/* --- 閲忕▼鍒诲害灏猴紙瑁呴グ锛� --- */
+.gauge {
+ flex-shrink: 0;
+ margin-top: 18px;
+}
+
+.gauge-ticks {
+ height: 14px;
+ background-image:
+ linear-gradient(to right, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px),
+ linear-gradient(to right, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px);
+ background-size: 28px 14px, 7px 7px;
+ background-position: 0 100%, 0 100%;
+ background-repeat: repeat-x, repeat-x;
+}
+
+.gauge-scale {
+ display: flex;
+ justify-content: space-between;
+ font-family: $console-mono;
+ font-size: 10px;
+ letter-spacing: 0.5px;
+ color: rgba(255, 255, 255, 0.6);
+ font-variant-numeric: tabular-nums;
+}
+
+/* --- 璇绘暟杞ㄨ抗锛氬埢搴﹀昂涓嬫柟鐨勯潤鎬佹尝褰紙瑁呴グ锛� --- */
+.trace {
+ flex-shrink: 0;
+ height: 56px;
+ margin-top: 20px;
+
+ svg {
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+/* 鍝佺墝涓讳綋锛氫笂涓嬪悇鐣欎竴涓� auto 澶栬竟璺濓紝璁╀腑娈靛湪澶�/鑴氫箣闂村眳涓� */
+.brand-copy {
+ flex: 0 0 auto;
+ margin-top: auto;
+
+ .brand-title {
+ margin: 0;
+ font-size: 30px;
+ font-weight: 600;
+ line-height: 1.34;
+ letter-spacing: 1px;
+ }
+
+ .brand-sub {
+ margin: 10px 0 0;
+ font-size: 11px;
+ line-height: 1.6;
+ letter-spacing: 0.9px;
+ color: rgba(255, 255, 255, 0.88);
+ }
+}
+
+/* 鑳藉姏娓呭崟锛氱粏绾垮垎闅� + 搴忓彿 + 鐐圭姸寮曞绾� */
+.brand-points {
+ flex-shrink: 0;
+ margin: 26px 0 0;
+ padding: 0;
+ list-style: none;
+
+ li {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 10px 0;
+ font-size: 13.5px;
+ line-height: 1.3;
+ color: rgba(255, 255, 255, 0.95);
+ border-top: 1px solid rgba(255, 255, 255, 0.13);
+
+ &:last-child {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.13);
+ }
+ }
+
+ .pt-idx {
+ flex-shrink: 0;
+ font-family: $console-mono;
+ font-size: 10.5px;
+ font-weight: 600;
+ letter-spacing: 0.5px;
+ /* 绾楗板簭鍙凤紝涓嶆壙杞戒俊鎭紝鍏佽浣庝簬姝ｆ枃瀵规瘮搴� */
+ color: rgba(255, 255, 255, 0.62);
+ font-variant-numeric: tabular-nums;
+ }
+
+ .pt-txt {
+ flex-shrink: 0;
+ }
+
+ /* 鐐圭姸寮曞绾匡紝鎶婅鍙充晶濉弧锛屽儚浠〃闈㈡澘涓婄殑閫氶亾鏍囧昂 */
+ .pt-line {
+ flex: 1 1 auto;
+ min-width: 12px;
+ height: 1px;
+ background-image: repeating-linear-gradient(to right,
+ rgba(255, 255, 255, 0.22) 0 2px,
+ transparent 2px 7px);
+ }
+}
+
+.brand-foot {
+ flex-shrink: 0;
+ margin: auto 0 0;
+ font-size: 11px;
+ line-height: 1.6;
+ color: rgba(255, 255, 255, 0.85);
+}
+
+/* ============ 鍙充晶锛氳韩浠介獙璇佹帶鍒跺崱 ============ */
+.login-main {
+ flex: 1 1 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 40px 32px;
+ overflow-y: auto;
+ background: var(--lims-bg);
}
.login-form {
- border-radius: 6px;
- background: #ffffff;
- width: 400px;
- padding: 25px 25px 5px 25px;
- z-index: 1;
- .el-input {
- height: 40px;
- input {
- height: 40px;
+ position: relative;
+ width: 392px;
+ max-width: 100%;
+ padding: 0 32px 28px;
+ background: var(--lims-surface);
+ border: 1px solid var(--lims-border);
+ border-radius: var(--lims-radius);
+ box-shadow:
+ 0 18px 42px -22px rgba(16, 40, 38, 0.22),
+ 0 2px 8px rgba(16, 40, 38, 0.05);
+
+ /* 鍗″ご鍋氭垚浠〃鐩樻爣棰樻潯 */
+ .form-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ margin: 0 -32px 24px;
+ padding: 13px 20px;
+ background: var(--lims-surface-2);
+ border-bottom: 1px solid var(--lims-border);
+ border-radius: var(--lims-radius) var(--lims-radius) 0 0;
+ }
+
+ .form-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin: 0;
+ font-size: 15px;
+ font-weight: 600;
+ letter-spacing: 1px;
+ color: var(--lims-text);
+
+ .led {
+ color: var(--el-color-primary);
}
}
+
+ .form-tag {
+ font-family: $console-mono;
+ font-size: 10px;
+ letter-spacing: 2px;
+ color: var(--lims-text-3);
+ }
+
+ :deep(.el-form-item) {
+ margin-bottom: 16px;
+ }
+
+ :deep(.el-form-item__label) {
+ padding-bottom: 6px;
+ font-size: 12px;
+ font-weight: 600;
+ letter-spacing: 0.14em;
+ line-height: 1.4;
+ color: var(--lims-text-2);
+ }
+
+ :deep(.el-input__wrapper) {
+ border-radius: var(--lims-radius-sm);
+ padding: 1px 12px;
+ box-shadow: 0 0 0 1px var(--lims-border) inset;
+ transition: box-shadow 0.16s ease;
+
+ &:hover {
+ box-shadow: 0 0 0 1px var(--el-color-primary-light-5) inset;
+ }
+
+ &.is-focus {
+ box-shadow:
+ 0 0 0 1px var(--el-color-primary) inset,
+ 0 0 0 3px var(--el-color-primary-light-9);
+ }
+ }
+
+ /* 绛夊杈撳叆锛岃创鍚堜华琛ㄨ鏁� */
+ :deep(.el-input__inner) {
+ font-family: $console-mono;
+ font-variant-numeric: tabular-nums;
+ letter-spacing: 0.05em;
+ }
+
.input-icon {
- height: 39px;
width: 14px;
- margin-left: 0px;
+ color: var(--lims-text-3);
}
-}
-.login-tip {
- font-size: 13px;
- text-align: center;
- color: #bfbfbf;
-}
-.login-code {
- width: 33%;
- height: 40px;
- float: right;
- img {
- cursor: pointer;
- vertical-align: middle;
+
+ :deep(.el-button--primary) {
+ width: 100%;
+ height: 46px;
+ font-size: 14px;
+ font-weight: 600;
+ letter-spacing: 4px;
+ border: none;
+ border-radius: var(--lims-radius-sm);
+ background-image: linear-gradient(135deg, #12a594, #0d9488 58%, #0b6b61);
+ transition: filter 0.16s ease, box-shadow 0.16s ease;
+
+ &:hover:not(.is-disabled) {
+ filter: brightness(1.06);
+ box-shadow: 0 8px 18px -10px rgba(13, 148, 136, 0.7);
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--el-color-primary-dark-2);
+ outline-offset: 2px;
+ }
}
-}
-.el-login-footer {
- height: 40px;
- line-height: 40px;
- position: fixed;
- bottom: 0;
- width: 100%;
- text-align: center;
- color: #fff;
- font-family: Arial;
- font-size: 12px;
- letter-spacing: 1px;
-}
-.login-code-img {
- height: 40px;
- padding-left: 12px;
}
-html.dark .login {
- background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url("../assets/images/login-background.jpg");
- .login-form {
- background: var(--el-bg-color-overlay) !important;
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+/* 浠〃瑁佸垏瑙掓爣锛氬瑙掍袱涓� L 褰㈢粏绾匡紝绾楗� */
+.login-form::before,
+.login-form::after {
+ content: "";
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ border: 0 solid var(--el-color-primary);
+ opacity: 0.55;
+ pointer-events: none;
+}
+
+.login-form::before {
+ top: -1px;
+ left: -1px;
+ border-top-width: 1px;
+ border-left-width: 1px;
+ border-top-left-radius: var(--lims-radius);
+}
+
+.login-form::after {
+ right: -1px;
+ bottom: -1px;
+ border-right-width: 1px;
+ border-bottom-width: 1px;
+ border-bottom-right-radius: var(--lims-radius);
+}
+
+/* 璁颁綇瀵嗙爜 + 绔嬪嵆娉ㄥ唽 */
+.form-actions {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin: 0 0 18px;
+
+ .remember {
+ color: var(--lims-text-2);
}
+
+ .link-type {
+ font-size: 13px;
+ }
+
+ .link-type:focus-visible {
+ outline: 2px solid var(--el-color-primary);
+ outline-offset: 2px;
+ border-radius: 3px;
+ }
+}
+
+/* 绐勫睆锛氭敹绐勫搧鐗岄潰鏉匡紝閾墝璁╀綅缁欐爣璇� */
+@media (max-width: 1024px) {
+ .login-brand {
+ flex-basis: 40%;
+ min-width: 320px;
+ padding: 30px 32px 26px;
+
+ .brand-head .brand-console {
+ display: none;
+ }
+
+ .brand-copy .brand-title {
+ font-size: 25px;
+ }
+ }
+}
+
+@media (max-width: 900px) {
+ .login-brand {
+ display: none;
+ }
+
+ .login-main {
+ flex: 1 1 100%;
+ }
+}
+
+html.dark .login-brand {
+ background-image:
+ linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+ linear-gradient(158deg, #0f766e 0%, #0d5f57 55%, #10403c 100%);
+}
+
+html.dark .login-form {
+ background: var(--el-bg-color-overlay);
+ border-color: var(--lims-border);
+ box-shadow:
+ 0 18px 42px -22px rgba(0, 0, 0, 0.6),
+ 0 2px 8px rgba(0, 0, 0, 0.28);
}
</style>
--
Gitblit v1.9.3