系统登入界面的设计

2025-10-28 16:27:42 +08:00
parent ddc7ce2fe7
commit f99f8eb560
4 changed files with 182 additions and 32 deletions
--- a/openhis-ui-vue3/src/assets/logo/LOGO.jpg
+++ b/openhis-ui-vue3/src/assets/logo/LOGO.jpg
--- a/openhis-ui-vue3/src/settings.js
+++ b/openhis-ui-vue3/src/settings.js
@@ -3,6 +3,10 @@ export default {
   * 网页标题
   */
  title: import.meta.env.VITE_APP_TITLE,
+  /**
+   * 系统名称
+   */
+  systemName: import.meta.env.VITE_APP_SYSTEM_NAME || 'XXX医院信息管理系统',
  /**
   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
   */
--- a/openhis-ui-vue3/src/views/login.vue
+++ b/openhis-ui-vue3/src/views/login.vue
@@ -1,12 +1,14 @@
 <template>
  <div class="login">
    <!--  顶部  -->
-    <!-- <div class="el-login-top">
-      <el-image :src="logoNew"></el-image>
-    </div> -->
    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
-      <h1 class="title">医院信息管理系统</h1>
+    <div class="el-login-top">
+      <el-image :src="logoNew"></el-image>
+    </div>
+      <h1 class="title">{{ currentTenantName || settings.systemName }}</h1>
+      <p class="login-subtitle">请使用您的账号密码安全登录系统</p>
      <el-form-item prop="username">
+        <p class="label">用户名</p>
        <el-input
          v-model="loginForm.username"
          type="text"
@@ -21,25 +23,35 @@
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
+        <p class="label">密码</p>
        <el-input
          v-model="loginForm.password"
-          type="password"
+          :type="passwordVisible ? 'text' : 'password'"
          size="large"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter="handleLogin"
-          show-password
        >
          <template #prefix
            ><svg-icon icon-class="password" class="el-input__icon input-icon"
          /></template>
+          <template #suffix>
+            <span 
+              class="password-toggle"
+              @click="togglePasswordVisibility"
+              style="cursor: pointer; color: #606266; font-size: 14px; padding: 0 10px;"
+            >
+              {{ passwordVisible ? '隐藏' : '显示' }}
+            </span>
+          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="tenantId">
+        <p class="label">医疗机构</p>
        <el-select
          v-model="loginForm.tenantId"
          size="large"
-          placeholder="所属医院"
+          placeholder="请选择医疗机构"
          clearable
          filterable
        >
@@ -51,6 +63,11 @@
          />
        </el-select>
      </el-form-item>
+      <el-form-item class="login-options">
+        <el-checkbox v-model="loginForm.rememberMe" class="remember-me">记住我</el-checkbox>
+        <el-link type="primary" class="forgot-password" @click="handleForgotPassword">忘记密码？</el-link>
+      </el-form-item>
+      
      <!-- <el-form-item prop="tenantId"> -->
        <!-- <span class="descriptions-item-label" style="margin: 0 10px 0 0">连接医保</span> -->
        <!-- <el-switch v-model="loginForm.invokeYb" @change="topNavChange" size="large"/> -->
@@ -87,8 +104,17 @@
          <router-link class="link-type" :to="'/register'">立即注册</router-link>
        </div>
      </el-form-item>
+      <div class="footer">
+            © 2025 XXX医院信息系统 | 版本 v2.5.1
+            <!-- 公司版权信息（新增） -->
+            <div class="company-copyright">
+                技术支持：上海经创贺联信息技术有限公司
+            </div>
+        </div>
    </el-form>
+    
    <!--  底部  -->
+    
    <div class="el-login-footer">
      <div class="el-login-footer-link">
        <span><el-link :underline="false">his账号用户协议</el-link></span>
@@ -109,12 +135,15 @@
 </template>

 <script setup>
+import { getCurrentInstance, ref, reactive, computed, onMounted, watch } from 'vue';
+import settings from '@/settings';
 import { getCodeImg, sign, getUserBindTenantList } from '@/api/login';
 import { invokeYbPlugin } from '@/api/public';
 import Cookies from 'js-cookie';
 import { encrypt, decrypt } from '@/utils/jsencrypt';
 import useUserStore from '@/store/modules/user';
-import logoNew from '@/assets/logo/logoBlack.png';
+import { ElMessage } from 'element-plus';
+import logoNew from '@/assets/logo/LOGO.jpg';
 const userStore = useUserStore();
 const route = useRoute();
 const router = useRouter();
@@ -131,6 +160,7 @@ const loginForm = ref({
 });

 const tenantOptions = ref([]);
+const currentTenantName = ref('');

 const loginRules = {
  username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
@@ -146,6 +176,21 @@ const captchaEnabled = ref(true);
 // 注册开关
 const register = ref(false);
 const redirect = ref(undefined);
+const passwordVisible = ref(false);
+
+function togglePasswordVisibility() {
+  passwordVisible.value = !passwordVisible.value;
+}
+
+// 处理忘记密码功能
+function handleForgotPassword() {
+  // 这里可以添加忘记密码的逻辑，例如跳转到忘记密码页面或显示忘记密码弹窗
+  // 目前先显示一个提示
+  ElMessage({
+    message: '忘记密码功能正在开发中',
+    type: 'info'
+  });
+}

 watch(
  route,
@@ -155,7 +200,7 @@ watch(
  { immediate: true }
 );

-// 页面加载时从 localStorage 获取 invokeYb 的值
+// 页面加载时从 localStorage 获取 invokeYb 的值和从 Cookies 获取记住的登录信息
 onMounted(() => {
  const storedInvokeYb = localStorage.getItem('invokeYb');
  if (storedInvokeYb !== null) {
@@ -164,6 +209,38 @@ onMounted(() => {
    // 如果 localStorage 中没有值，则设置默认值并保存
    localStorage.setItem('invokeYb', 'true');
  }
+  
+  // 从 Cookies 中恢复记住的登录信息
+  const rememberMe = Cookies.get('rememberMe');
+  if (rememberMe && rememberMe === 'true') {
+    const username = Cookies.get('username');
+    const password = Cookies.get('password');
+    if (username) {
+      loginForm.value.username = username;
+      loginForm.value.rememberMe = true;
+      // 解密密码
+      if (password) {
+        try {
+          loginForm.value.password = decrypt(password);
+        } catch (e) {
+          console.error('密码解密失败:', e);
+        }
+      }
+    }
+  }
+  
+  // 获取医疗机构列表
+  getUserBindTenantList().then((res) => {
+    tenantOptions.value = res.data.map(item => ({
+      label: item.tenantName,
+      value: item.id
+    }));
+    // 如果只有一个医疗机构，自动选中
+    if (tenantOptions.value.length === 1) {
+      loginForm.value.tenantId = tenantOptions.value[0].value;
+      currentTenantName.value = tenantOptions.value[0].label;
+    }
+  });
 });

 function handleLogin() {
@@ -279,6 +356,14 @@ function getCode() {
  });
 }

+// 监听租户选择变化
+watch(() => loginForm.value.tenantId, (newTenantId) => {
+  const selectedTenant = tenantOptions.value.find(item => item.value === newTenantId);
+  if (selectedTenant) {
+    currentTenantName.value = selectedTenant.label;
+  }
+});
+
 // 切换医保连接开关时更新 localStorage
 function topNavChange(value) {
  localStorage.setItem('invokeYb', value.toString());
@@ -303,6 +388,7 @@ function getTenantList(username) {
          label: item.tenantName,
        }));
        loginForm.value.tenantId = tenantOptions.value[0].value; //默认选中第一个
+        currentTenantName.value = tenantOptions.value[0].label;
      }
    }
  });
@@ -389,31 +475,85 @@ getCookie();
 getTenantList(loginForm.value.username);
 </script>

+<style>
+html, body {
+  height: auto;
+  min-height: 100vh;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+}
+</style>
+
 <style lang="scss" scoped>
 .login {
  display: flex;
  justify-content: center;
-  align-items: center;
-  height: 100%;
+  background: #f8f9fa; 
+  min-height: 100vh;
+  padding-bottom: 100px; /* 为底部固定footer留出空间 */
  //background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
 }
 .title {
-  margin: 0px auto 30px auto;
+  margin: 10px auto 15px auto;
  text-align: center;
  color: #000;
  font-family: 'Microsoft Yahei,STHeiti,Simsun,STSong,Helvetica Neue,Helvetica,Arial,sans-serif';
 }
+.label{
+  display: block;
+  margin-bottom: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text);
+}

+.login-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 8px 0 10px 0;
+  width: 100%; /* 确保容器占满宽度 */
+}
+
+.remember-me {
+  margin: 0;
+  color: var(--text);
+}
+
+.forgot-password {
+  font-size: 14px;
+  color: var(--primary);
+  cursor: pointer;
+  text-align: right; /* 确保文本右对齐 */
+  margin-left: auto; /* 确保元素右对齐 */
+}
+ .footer {
+            margin-top: 32px;
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+.login-subtitle {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 20px;
+}
 .login-form {
-  border-radius: 6px;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px var(--shadow);
+  border: 1px solid var(--border);
  background: #ffffff;
-  width: 400px;
+  width: 100%;
+  max-width: 400px;
+  padding: 40px;
  padding: 25px 25px 5px 25px;
+  text-align: center;
  .el-input {
    height: 50px; // 修改输入框高度
    input {
-      height: 50px; // 修改输入框高度
+      height: 50px; // 修改输入框高度 
      font-size: 18px; // 修改输入框内文字大小
    }
  }
@@ -438,24 +578,20 @@ getTenantList(loginForm.value.username);
  }
 }
 .el-login-top {
-  height: 80px;
-  line-height: 40px;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  text-align: left;
-  color: #000;
-  font-family: Arial;
-  font-size: 12px;
-  letter-spacing: 1px;
-  background-color: #f1f1f1;
-  padding: 20px;
+  text-align: center;
+  margin: 0 auto 10px;
+  .el-image {
+    max-width: 120px;
+    max-height: 120px;
+  }
 }
 .el-login-footer {
-  height: 100px;
-  line-height: 40px;
+  height: 80px;
+  line-height: 30px;
  position: fixed;
  bottom: 0;
+  left: 0;
+  right: 0;
  width: 100%;
  text-align: center;
  color: #000;
@@ -463,8 +599,7 @@ getTenantList(loginForm.value.username);
  font-size: 12px;
  letter-spacing: 1px;
  background-color: #f1f1f1;
-
-  color: #000;
+  z-index: 100; /* 确保footer在最上层 */
  span {
    margin: 0 10px;
  }
@@ -490,6 +625,13 @@ getTenantList(loginForm.value.username);
  width: 24px !important; // 调整图标的宽度
  height: 24px !important; // 调整图标的高度
  font-size: 24px !important; // 调整图标的字体大小
+  color: #606266 !important; // 确保图标颜色可见
+  cursor: pointer !important; // 确保鼠标悬停时显示指针
+}
+
+:deep(.password-toggle) {
+  line-height: 50px !important; // 确保文字垂直居中
+  user-select: none; // 禁止选中文字
 }
 :deep(.el-select__wrapper) {
  background-color: #f5f7fa !important;
@@ -498,4 +640,8 @@ getTenantList(loginForm.value.username);
  font-size: 18px !important;
  height: 50px !important; // 修改输入框高度
 }
+
+:deep(.el-form-item) {
+  margin-bottom: 15px !important; // 减小输入框之间的距离
+}
 </style>