feat: 优化登录页面

.eslintrc.js

@@ -17,6 +17,7 @@ module.exports = {
   },
   rules: {
     'vue/multi-word-component-names': 'off',
+    '@typescript-eslint/no-unused-expressions': 'off',
     '@typescript-eslint/no-explicit-any': 'off'
   }
 }

package.json

@@ -14,44 +14,44 @@
     "url": "https://github.com/fugary/simple-element-plus-template"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
-    "@guolao/vue-monaco-editor": "^1.5.5",
+    "@element-plus/icons-vue": "^2.3.2",
+    "@guolao/vue-monaco-editor": "^1.6.0",
     "@howiefh/ant-path-matcher": "^0.0.4",
-    "@vicons/material": "^0.12.0",
-    "@vueuse/core": "^10.11.1",
+    "@vicons/material": "^0.13.0",
+    "@vueuse/core": "^14.2.0",
     "async-validator": "^4.2.5",
-    "axios": "^1.7.9",
-    "dayjs": "^1.11.13",
-    "echarts": "^5.5.0",
-    "element-plus": "^2.9.11",
-    "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.52.2",
+    "axios": "^1.13.4",
+    "dayjs": "^1.11.19",
+    "echarts": "^6.0.0",
+    "element-plus": "^2.13.2",
+    "lodash-es": "^4.17.23",
+    "monaco-editor": "^0.55.1",
     "nprogress": "^0.2.0",
     "numeral": "^2.0.6",
-    "pinia": "^2.3.1",
-    "pinia-plugin-persistedstate": "^3.2.3",
+    "pinia": "^3.0.4",
+    "pinia-plugin-persistedstate": "^4.7.1",
     "sortablejs": "^1.15.6",
     "split.js": "^1.6.5",
-    "ua-parser-js": "^1.0.38",
-    "vite-plugin-mock": "^3.0.1",
-    "vue": "^3.4.38",
-    "vue-echarts": "^6.7.3",
-    "vue-i18n": "^9.14.4",
-    "vue-router": "^4.5.1",
+    "ua-parser-js": "^2.0.8",
+    "vite-plugin-mock": "^3.0.2",
+    "vue": "^3.5.27",
+    "vue-echarts": "^8.0.1",
+    "vue-i18n": "^11.2.8",
+    "vue-router": "^5.0.1",
     "vue-virtual-scroller": "^2.0.0-beta.8"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.10.5",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-vue": "^5.2.4",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@rushstack/eslint-patch": "^1.15.0",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vitejs/plugin-vue-jsx": "^5.1.3",
     "@vue/eslint-config-standard": "^8.0.1",
     "eslint": "^8.57.1",
-    "eslint-plugin-vue": "^9.32.0",
-    "rollup-plugin-visualizer": "^5.14.0",
-    "typescript": "^5.7.3",
-    "vite": "^5.4.19",
+    "eslint-plugin-vue": "^9.33.0",
+    "rollup-plugin-visualizer": "^6.0.5",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
     "vite-plugin-eslint": "^1.8.1"
   }
 }

src/assets/login.css

@@ -0,0 +1,263 @@
+/* Login Page Styles */
+.login-container {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    overflow: hidden;
+    background-color: #f0f2f5;
+}
+
+/* Left Branding Section */
+.login-branding {
+    width: 50%;
+    background: linear-gradient(135deg, #001529 0%, #003a73 100%);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+/* Decorative Circle */
+.branding-decoration {
+    position: absolute;
+    top: -10%;
+    left: -10%;
+    width: 50vw;
+    height: 50vw;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
+    animation: float 20s infinite ease-in-out;
+    pointer-events: none;
+}
+
+.branding-content {
+    z-index: 2;
+    text-align: center;
+    padding: 0 40px;
+    animation: fadeIn 1.2s ease-out;
+}
+
+.branding-title {
+    font-size: 48px;
+    font-weight: 700;
+    margin-bottom: 20px;
+    letter-spacing: 2px;
+    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.branding-subtitle {
+    font-size: 20px;
+    font-weight: 300;
+    opacity: 0.9;
+    letter-spacing: 1px;
+    margin-top: 0;
+}
+
+.branding-footer {
+    position: absolute;
+    bottom: 40px;
+    font-size: 14px;
+    opacity: 0.6;
+}
+
+/* Right Form Section */
+.login-form-section {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--el-bg-color);
+    position: relative;
+}
+
+.login-tools {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    z-index: 10;
+}
+
+.form-wrapper {
+    width: 100%;
+    max-width: 420px;
+    padding: 40px;
+    animation: slideUp 0.8s ease-out;
+}
+
+.form-header {
+    margin-bottom: 40px;
+    text-align: left;
+}
+
+.form-header h2 {
+    font-size: 32px;
+    font-weight: 700;
+    color: var(--el-text-color-primary);
+    margin: 0 0 10px;
+}
+
+.form-subtitle {
+    font-size: 16px;
+    color: var(--el-text-color-secondary);
+    margin: 0;
+}
+
+/* Form Styles */
+.modern-form .el-form-item {
+    margin-bottom: 24px;
+}
+
+.modern-form .el-input__wrapper {
+    box-shadow: none;
+    background-color: var(--el-fill-color-light);
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 1px 11px;
+    transition: all 0.3s;
+}
+
+.modern-form .el-input__wrapper:hover {
+    background-color: var(--el-fill-color);
+}
+
+.modern-form .el-input__wrapper.is-focus {
+    background-color: var(--el-bg-color);
+    border-color: var(--el-color-primary);
+    box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+}
+
+.modern-form .el-input__inner {
+    height: 48px;
+    font-size: 16px;
+    color: var(--el-text-color-primary);
+}
+
+/* Button Styles */
+.form-actions {
+    margin-top: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.login-btn {
+    width: 100%;
+    height: 50px;
+    font-size: 18px;
+    font-weight: 600;
+    border-radius: 8px;
+    transition: all 0.3s;
+    letter-spacing: 1px;
+}
+
+.login-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 16px rgba(64, 158, 255, 0.3);
+}
+
+.reset-btn {
+    margin-left: 10px;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0px) rotate(0deg);
+    }
+
+    50% {
+        transform: translateY(-20px) rotate(5deg);
+    }
+
+    100% {
+        transform: translateY(0px) rotate(0deg);
+    }
+}
+
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+    transition: all 0.3s ease;
+}
+
+.fade-slide-enter-from {
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+.fade-slide-leave-to {
+    opacity: 0;
+    transform: translateY(-10px);
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+    .login-container {
+        flex-direction: column;
+    }
+
+    .login-branding {
+        width: 100%;
+        height: 200px;
+        flex: none;
+    }
+
+    .branding-title {
+        font-size: 32px;
+        margin-bottom: 5px;
+    }
+
+    .branding-subtitle {
+        font-size: 16px;
+    }
+
+    .branding-decoration {
+        width: 100vw;
+        height: 100vw;
+        top: -50vw;
+        left: 0;
+    }
+
+    .login-form-section {
+        width: 100%;
+        flex: 1;
+        align-items: flex-start;
+        padding-top: 40px;
+    }
+
+    .form-wrapper {
+        padding: 20px;
+    }
+
+    .login-tools {
+        top: 10px;
+        right: 10px;
+    }
+}

src/messages/common_cn.js

@@ -3,6 +3,7 @@ export const common = baseMessages()
 
 common.label.title = '简单Element+模板'
 common.label.login = '登录'
+common.label.logining = '登录中...'
 common.label.index = '首页'
 common.label.settings = '设置'
 common.label.confirm = '确认'
@@ -88,6 +89,8 @@ common.msg.commonInput = '请输入{0}'
 common.msg.networkError = '网络异常，请稍后再试.'
 common.msg.networkTimeout = '系统处理超时，请稍后再试.'
 common.msg.loginTitle = '用户登录'
+common.msg.loginSubtitle = '企业级快速开发平台'
+common.msg.loginWelcome = '欢迎回来，请输入您的账号密码'
 common.msg.loading = '系统正在处理中，请稍候...'
 common.msg.saveSuccess = '保存成功。'
 common.msg.operationSuccess = '操作成功。'

src/messages/common_en.js

@@ -3,6 +3,7 @@ export const common = baseMessages()
 
 common.label.title = 'Simple Element+'
 common.label.login = 'Login'
+common.label.logining = 'Logging in...'
 common.label.index = 'Home'
 common.label.settings = 'Settings'
 common.label.confirm = 'Confirm'
@@ -88,6 +89,8 @@ common.msg.commonInput = 'Please input {0}'
 common.msg.networkError = 'Network error, please try later.'
 common.msg.networkTimeout = 'System process timeout, please try later.'
 common.msg.loginTitle = 'User Login'
+common.msg.loginSubtitle = 'Enterprise Rapid Development Platform'
+common.msg.loginWelcome = 'Welcome back, please enter your credentials'
 common.msg.loading = 'Loading, please wait...'
 common.msg.saveSuccess = 'Save Success.'
 common.msg.operationSuccess = 'Operation Success.'

src/views/Login.vue

@@ -4,40 +4,51 @@ import { useRouter } from 'vue-router'
 import { useThemeAndLocaleMenus } from '@/services/menu/MenuService'
 import { useLoginConfigStore } from '@/stores/LoginConfigStore'
 import { ElMessage } from 'element-plus'
+import { Lock, User } from '@element-plus/icons-vue'
 
 const router = useRouter()
 const loginConfigStore = useLoginConfigStore()
 
 const themeAndLocaleMenus = ref(useThemeAndLocaleMenus())
 
-/**
- * @type {[CommonFormOption]}
- */
 const loginFormOptions = [{
   labelKey: 'common.label.username',
   required: true,
-  prop: 'userName'
+  prop: 'userName',
+  attrs: {
+    size: 'large',
+    'prefix-icon': User
+  }
 }, {
   labelKey: 'common.label.password',
   required: true,
   prop: 'userPassword',
   attrs: {
-    showPassword: true
+    size: 'large',
+    showPassword: true,
+    'prefix-icon': Lock
   }
 }]
 
-/**
- * @type {LoginVo}
- */
 const loginVo = ref({
   userName: 'admin',
   userPassword: '123456'
 })
 
-const submitForm = form => {
-  form.validate(async (valid) => {
+const loading = ref(false)
+const formRef = ref()
+
+const submitForm = async () => {
+  const form = formRef.value?.form
+  if (!form) return
+
+  await form.validate(async (valid) => {
     if (valid) {
+      loading.value = true
       const loginResult = await loginConfigStore.login(loginVo.value)
+        .finally(() => {
+          loading.value = false
+        })
       if (loginResult.success) {
         router.push('/')
       } else {
@@ -46,60 +57,92 @@ const submitForm = form => {
     }
   })
 }
-const formRef = ref()
 </script>
 
 <template>
-  <el-container>
-    <el-card class="login-form">
-      <template #header>
-        <div class="card-header">
-          <span>{{ $t('common.msg.loginTitle') }}</span>
+  <div class="login-container">
+    <!-- Tools -->
+    <div class="login-tools">
       <common-menu
         :menus="themeAndLocaleMenus"
         mode="horizontal"
         :ellipsis="false"
       />
     </div>
-      </template>
+
+    <!-- Left Branding -->
+    <div class="login-branding">
+      <div class="branding-decoration" />
+      <div class="branding-content">
+        <transition
+          name="fade-slide"
+          mode="out-in"
+        >
+          <div :key="$i18n.locale">
+            <h1 class="branding-title">
+              {{ $t('common.label.title') }}
+            </h1>
+            <p class="branding-subtitle">
+              {{ $t('common.msg.loginSubtitle') }}
+            </p>
+          </div>
+        </transition>
+      </div>
+    </div>
+
+    <!-- Right Form Section -->
+    <div class="login-form-section">
+      <div class="form-wrapper">
+        <div class="form-header">
+          <h2>{{ $t('common.msg.loginTitle') }}</h2>
+          <p class="form-subtitle">
+            {{ $t('common.msg.loginWelcome') }}
+          </p>
+        </div>
+
         <common-form
           ref="formRef"
           :model="loginVo"
           :options="loginFormOptions"
-        label-width="100px"
+          class="modern-form"
+          label-position="top"
           :show-buttons="false"
+          @submit-form="submitForm"
         />
-      <template #footer>
+
+        <div class="form-actions">
           <el-button
             type="primary"
-          @click="submitForm(formRef.form)"
+            class="login-btn"
+            :loading="loading"
+            @click="submitForm"
           >
-          {{ $t('common.label.submit') }}
+            {{ loading ? $t('common.label.logining') : $t('common.label.login') }}
           </el-button>
+
           <el-button
+            class="reset-btn"
+            text
             @click="formRef.form.resetFields()"
           >
             {{ $t('common.label.reset') }}
           </el-button>
-      </template>
-    </el-card>
-  </el-container>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
+<style scoped src="@/assets/login.css"></style>
+
 <style scoped>
-.login-form {
-  width: 500px;
-  margin: 5% auto;
+:deep(.el-menu--horizontal) {
+  border-bottom: none !important;
 }
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+:deep(.el-menu--horizontal > .el-menu-item) {
+  border-bottom: none !important;
 }
-
-.el-menu--horizontal.el-menu {
-  border-bottom: none;
+:deep(.el-menu--horizontal > .el-menu-item.is-active) {
+  border-bottom: none !important;
 }
-
 </style>

vite.config.js

@@ -1,6 +1,6 @@
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { viteMockServe } from 'vite-plugin-mock'
 import vueJsx from '@vitejs/plugin-vue-jsx'
@@ -16,9 +16,6 @@ const optionalPlugins = [{
     mockPath: './mock'
   }),
   enabled: true
-}, {
-  plugin: splitVendorChunkPlugin(),
-  enabled: true
 }].filter(p => p.enabled).map(p => p.plugin)
 
 const JS_FILE_NAMES = 'js/[name]-[hash].js'
@@ -49,7 +46,7 @@ export default ({ mode }) => {
         output: {
           chunkFileNames: JS_FILE_NAMES, // 引入文件名的名称
           entryFileNames: JS_FILE_NAMES, // 包的入口文件名称
-          assetFileNames (assetInfo) {
+          assetFileNames(assetInfo) {
             if (assetInfo.name?.endsWith('.css')) { // CSS文件
               return CSS_FILE_NAMES
             } else if (IMG_EXT_LIST.some((ext) => assetInfo.name?.endsWith(ext))) { // 图片
@@ -57,7 +54,7 @@ export default ({ mode }) => {
             }
             return 'assets/[name]-[hash].[ext]' // 其他资源
           },
-          manualChunks (id) {
+          manualChunks(id) {
             if (id.includes('element-plus')) {
               return 'elp'
             }