feat: 登录页面UI初始化

b8f87e2a · Jstar Xu · 6af56850 · b8f87e2a · b8f87e2a · b8f87e2a
Commit b8f87e2a authored Jun 11, 2025 by Jstar Xu
8 changed files
--- a/index.html
+++ b/index.html
 <!doctype html>
 <html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4939750_9hx3rkhtkzu.css" />
-    <title>%APP_NAME%</title>
-  </head>
-  <body>
+<head>
-    <div id="app">
+  <meta charset="UTF-8" />
-      <style>
+  <link rel="icon" href="/favicon.ico" />
-        .loading-wrapper {
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-          width: 100%;
+  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4939750_8mk2qprsvnh.css" />
-          margin-top: 40vh;
+  <title>%APP_NAME%</title>
-          display: flex;
+</head>
-          justify-content: center;
-        }
-        .pulse {
+<body>
-          width: 110px;
+  <div id="app">
-          height: 60px;
+    <style>
-          color: #00a2ea;
+      .loading-wrapper {
-          --c: radial-gradient(farthest-side, currentColor 96%, #0000);
+        width: 100%;
-          background:
+        margin-top: 40vh;
-            var(--c) 100% 100% /30% 60%,
+        display: flex;
-            var(--c) 70% 0 /50% 100%,
+        justify-content: center;
-            var(--c) 0 100% /36% 68%,
+      }
-            var(--c) 27% 18% /26% 40%,
-            linear-gradient(currentColor 0 0) bottom/67% 58%;
-          background-repeat: no-repeat;
-          position: relative;
-        }
-        .pulse:after {
+      .pulse {
-          content: '';
+        width: 110px;
-          position: absolute;
+        height: 60px;
-          inset: 0;
+        color: #00a2ea;
-          background: inherit;
+        --c: radial-gradient(farthest-side, currentColor 96%, #0000);
-          opacity: 0.4;
+        background:
-          animation: pulse-hjvm54 1s infinite;
+          var(--c) 100% 100% /30% 60%,
-        }
+          var(--c) 70% 0 /50% 100%,
+          var(--c) 0 100% /36% 68%,
+          var(--c) 27% 18% /26% 40%,
+          linear-gradient(currentColor 0 0) bottom/67% 58%;
+        background-repeat: no-repeat;
+        position: relative;
+      }
-        @keyframes pulse-hjvm54 {
+      .pulse:after {
-          to {
+        content: '';
-            transform: scale(1.8);
+        position: absolute;
-            opacity: 0;
+        inset: 0;
-          }
+        background: inherit;
+        opacity: 0.4;
+        animation: pulse-hjvm54 1s infinite;
+      }
+      @keyframes pulse-hjvm54 {
+        to {
+          transform: scale(1.8);
+          opacity: 0;
        }
-      </style>
+      }
-      <div class="loading-wrapper">
+    </style>
-        <div class="pulse"></div>
+    <div class="loading-wrapper">
-      </div>
+      <div class="pulse"></div>
    </div>
+  </div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
-    <script type="module" src="/src/main.ts"></script>
+</html>
-  </body>
\ No newline at end of file
-</html>
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
    "@tailwindcss/vite": "^4.1.8",
    "@vueuse/core": "^13.3.0",
    "axios": "^1.9.0",
+    "crypto-js": "^4.2.0",
    "element-plus": "^2.9.11",
    "nanoid": "^5.1.5",
    "nprogress": "^0.2.0",
@@ -36,6 +37,7 @@
    "@commitlint/config-conventional": "^19.8.1",
    "@commitlint/types": "^19.8.1",
    "@intlify/unplugin-vue-i18n": "^6.0.8",
+    "@types/crypto-js": "^4.2.2",
    "@types/node": "^22.15.29",
    "@types/nprogress": "^0.2.3",
    "@typescript-eslint/parser": "^8.33.1",

--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
      axios:
        specifier: ^1.9.0
        version: 1.9.0
+      crypto-js:
+        specifier: ^4.2.0
+        version: 4.2.0
      element-plus:
        specifier: ^2.9.11
        version: 2.9.11(vue@3.5.16(typescript@5.8.3))
@@ -63,6 +66,9 @@ importers:
      '@intlify/unplugin-vue-i18n':
        specifier: ^6.0.8
        version: 6.0.8(@vue/compiler-dom@3.5.16)(eslint@9.28.0(jiti@2.4.2))(rollup@4.41.1)(typescript@5.8.3)(vue-i18n@11.1.5(vue@3.5.16(typescript@5.8.3)))(vue@3.5.16(typescript@5.8.3))
+      '@types/crypto-js':
+        specifier: ^4.2.2
+        version: 4.2.2
      '@types/node':
        specifier: ^22.15.29
        version: 22.15.29
@@ -647,67 +653,56 @@ packages:
    resolution: {integrity: sha512-wC53ZNDgt0pqx5xCAgNunkTzFE8GTgdZ9EwYGVcg+jEjJdZGtq9xPjDnFgfFozQI/Xm1mh+D9YlYtl+ueswNEg==}
    cpu: [arm]
    os: [linux]
-    libc: [glibc]
  '@rollup/rollup-linux-arm-musleabihf@4.41.1':
    resolution: {integrity: sha512-jwKCca1gbZkZLhLRtsrka5N8sFAaxrGz/7wRJ8Wwvq3jug7toO21vWlViihG85ei7uJTpzbXZRcORotE+xyrLA==}
    cpu: [arm]
    os: [linux]
-    libc: [musl]
  '@rollup/rollup-linux-arm64-gnu@4.41.1':
    resolution: {integrity: sha512-g0UBcNknsmmNQ8V2d/zD2P7WWfJKU0F1nu0k5pW4rvdb+BIqMm8ToluW/eeRmxCared5dD76lS04uL4UaNgpNA==}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]
  '@rollup/rollup-linux-arm64-musl@4.41.1':
    resolution: {integrity: sha512-XZpeGB5TKEZWzIrj7sXr+BEaSgo/ma/kCgrZgL0oo5qdB1JlTzIYQKel/RmhT6vMAvOdM2teYlAaOGJpJ9lahg==}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]
  '@rollup/rollup-linux-loongarch64-gnu@4.41.1':
    resolution: {integrity: sha512-bkCfDJ4qzWfFRCNt5RVV4DOw6KEgFTUZi2r2RuYhGWC8WhCA8lCAJhDeAmrM/fdiAH54m0mA0Vk2FGRPyzI+tw==}
    cpu: [loong64]
    os: [linux]
-    libc: [glibc]
  '@rollup/rollup-linux-powerpc64le-gnu@4.41.1':
    resolution: {integrity: sha512-3mr3Xm+gvMX+/8EKogIZSIEF0WUu0HL9di+YWlJpO8CQBnoLAEL/roTCxuLncEdgcfJcvA4UMOf+2dnjl4Ut1A==}
    cpu: [ppc64]
    os: [linux]
-    libc: [glibc]
  '@rollup/rollup-linux-riscv64-gnu@4.41.1':
    resolution: {integrity: sha512-3rwCIh6MQ1LGrvKJitQjZFuQnT2wxfU+ivhNBzmxXTXPllewOF7JR1s2vMX/tWtUYFgphygxjqMl76q4aMotGw==}
    cpu: [riscv64]
    os: [linux]
-    libc: [glibc]
  '@rollup/rollup-linux-riscv64-musl@4.41.1':
    resolution: {integrity: sha512-LdIUOb3gvfmpkgFZuccNa2uYiqtgZAz3PTzjuM5bH3nvuy9ty6RGc/Q0+HDFrHrizJGVpjnTZ1yS5TNNjFlklw==}
    cpu: [riscv64]
    os: [linux]
-    libc: [musl]
  '@rollup/rollup-linux-s390x-gnu@4.41.1':
    resolution: {integrity: sha512-oIE6M8WC9ma6xYqjvPhzZYk6NbobIURvP/lEbh7FWplcMO6gn7MM2yHKA1eC/GvYwzNKK/1LYgqzdkZ8YFxR8g==}
    cpu: [s390x]
    os: [linux]
-    libc: [glibc]
  '@rollup/rollup-linux-x64-gnu@4.41.1':
    resolution: {integrity: sha512-cWBOvayNvA+SyeQMp79BHPK8ws6sHSsYnK5zDcsC3Hsxr1dgTABKjMnMslPq1DvZIp6uO7kIWhiGwaTdR4Og9A==}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]
  '@rollup/rollup-linux-x64-musl@4.41.1':
    resolution: {integrity: sha512-y5CbN44M+pUCdGDlZFzGGBSKCA4A/J2ZH4edTYSSxFg7ce1Xt3GtydbVKWLlzL+INfFIZAEg1ZV6hh9+QQf9YQ==}
    cpu: [x64]
    os: [linux]
-    libc: [musl]
  '@rollup/rollup-win32-arm64-msvc@4.41.1':
    resolution: {integrity: sha512-lZkCxIrjlJlMt1dLO/FbpZbzt6J/A8p4DnqzSa4PWqPEUUUnzXLeki/iyPLfV0BmHItlYgHUqJe+3KiyydmiNQ==}
@@ -765,28 +760,24 @@ packages:
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]
  '@tailwindcss/oxide-linux-arm64-musl@4.1.8':
    resolution: {integrity: sha512-O6b8QesPbJCRshsNApsOIpzKt3ztG35gfX9tEf4arD7mwNinsoCKxkj8TgEE0YRjmjtO3r9FlJnT/ENd9EVefQ==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]
  '@tailwindcss/oxide-linux-x64-gnu@4.1.8':
    resolution: {integrity: sha512-32iEXX/pXwikshNOGnERAFwFSfiltmijMIAbUhnNyjFr3tmWmMJWQKU2vNcFX0DACSXJ3ZWcSkzNbaKTdngH6g==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]
  '@tailwindcss/oxide-linux-x64-musl@4.1.8':
    resolution: {integrity: sha512-s+VSSD+TfZeMEsCaFaHTaY5YNj3Dri8rST09gMvYQKwPphacRG7wbuQ5ZJMIJXN/puxPcg/nU+ucvWguPpvBDg==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
-    libc: [musl]
  '@tailwindcss/oxide-wasm32-wasi@4.1.8':
    resolution: {integrity: sha512-CXBPVFkpDjM67sS1psWohZ6g/2/cd+cq56vPxK4JeawelxwK4YECgl9Y9TjkE2qfF+9/s1tHHJqrC4SS6cVvSg==}
@@ -824,6 +815,9 @@ packages:
  '@types/conventional-commits-parser@5.0.1':
    resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==}
+  '@types/crypto-js@4.2.2':
+    resolution: {integrity: sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==}
  '@types/estree@1.0.7':
    resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
@@ -1228,6 +1222,9 @@ packages:
    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
    engines: {node: '>= 8'}
+  crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
  css-functions-list@3.2.3:
    resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==}
    engines: {node: '>=12 || >=16'}
@@ -1837,28 +1834,24 @@ packages:
    engines: {node: '>= 12.0.0'}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]
  lightningcss-linux-arm64-musl@1.30.1:
    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
    engines: {node: '>= 12.0.0'}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]
  lightningcss-linux-x64-gnu@1.30.1:
    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]
  lightningcss-linux-x64-musl@1.30.1:
    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [linux]
-    libc: [musl]
  lightningcss-win32-arm64-msvc@1.30.1:
    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
@@ -3376,6 +3369,8 @@ snapshots:
    dependencies:
      '@types/node': 22.15.29
+  '@types/crypto-js@4.2.2': {}
  '@types/estree@1.0.7': {}
  '@types/json-schema@7.0.15': {}
@@ -3864,6 +3859,8 @@ snapshots:
      shebang-command: 2.0.0
      which: 2.0.2
+  crypto-js@4.2.0: {}
  css-functions-list@3.2.3: {}
  css-tree@3.1.0:

--- a/src/assets/svgs/login-box-bg.svg
+++ b/src/assets/svgs/login-box-bg.svg
--- a/src/config/app-config.json
+++ b/src/config/app-config.json
 {
-  "appTitle": "航行印记管理后台"
+  "appTitle": "航行印记管理后台",
+  "welcome": "欢迎使用航行印记管理后台",
+  "cryptoSalt": {
+    "key": "MFF4C0G174948373",
+    "iv": "1946019462025011"
+  }
 }
--- a/src/utils/crypto.ts
+++ b/src/utils/crypto.ts
+import Crypto from 'crypto-js'
+import appConfig from '@/config/app-config.json'
+export function encryptPwd(password: string) {
+  const key = Crypto.enc.Utf8.parse(appConfig.cryptoSalt.key) // 加密密钥
+  const iv = Crypto.enc.Utf8.parse(appConfig.cryptoSalt.iv) // 向量
+  const encrypted = Crypto.AES.encrypt(password, key, {
+    iv: iv,
+    mode: Crypto.mode.CBC,
+    padding: Crypto.pad.Pkcs7,
+  })
+  return encrypted.toString()
+}
--- a/src/views/login/components/LoginForm.vue
+++ b/src/views/login/components/LoginForm.vue
+<template>
+  <div class="flex min-h-screen w-full flex-col items-center justify-center">
+    <!-- 登录表单容器 -->
+    <el-form ref="loginFormRef" :model="form" :rules="rules" label-position="top" class="w-full max-w-md p-6">
+      <!-- 标题 -->
+      <h2 class="mb-6 text-center text-2xl font-bold">登录</h2>
+      <!-- 用户名 -->
+      <el-form-item prop="username" label="用户名" class="mt-[25px]">
+        <el-input v-model="form.username" size="large" placeholder="请输入用户名" class="w-full" />
+      </el-form-item>
+      <!-- 密码 -->
+      <el-form-item prop="password" label="密码" class="mt-[25px]">
+        <el-input v-model="form.password" size="large" placeholder="请输入密码" type="password" class="w-full" />
+      </el-form-item>
+      <!-- 登录按钮 -->
+      <el-form-item class="mt-[30px]">
+        <el-button type="primary" class="w-full" @click="handleLogin">登录</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+import { encryptPwd } from '@/utils/crypto'
+const form = ref({
+  username: '',
+  password: '',
+})
+const loginFormRef = useTemplateRef('loginFormRef')
+const rules = {
+  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
+  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
+}
+const handleLogin = async () => {
+  const isValid = await loginFormRef.value!.validate()
+  if (isValid) {
+    console.log(encryptPwd(form.value.password))
+  }
+}
+</script>
+<style scoped>
+/* 可根据需求扩展样式 */
+</style>
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import LoginForm from './components/LoginForm.vue'
+import appConfig from '@/config/app-config.json'
+</script>
 <template>
-  <div>登陆页面</div>
+  <div class="login-page relative h-[100%]">
+    <ElScrollbar class="h-full">
+      <div class="relative mx-auto flex h-[100vh] overflow-hidden">
+        <div class="login-page-left bg-opacity-[20] relative flex-1 p-[30px] max-sm:hidden">
+          <!-- <div class="relative flex items-center text-white">
+            <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
+            <span class="text-20px font-bold">{{ appConfig.appTitle }}</span>
+          </div> -->
+          <div class="flex h-[calc(100%-60px)] items-center justify-center">
+            <div>
+              <img key="1" src="@/assets/svgs/login-box-bg.svg" alt="" class="w-[350px]" />
+              <div key="2" class="text-[20px] text-white">{{ appConfig.welcome }}</div>
+              <!-- <div key="3" class="text-14px mt-5 font-normal text-white">
+                {{ t('login.message') }}
+              </div> -->
+            </div>
+          </div>
+        </div>
+        <div class="relative flex-1 p-[30px] sm:p-[10px]">
+          <div class="at-2xl:justify-end at-xl:justify-end flex items-center justify-between text-white">
+            <div class="at-2xl:hidden at-xl:hidden flex items-center">
+              <!-- <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" /> -->
+              <span class="text-[20px] font-bold">{{ appConfig.appTitle }}</span>
+            </div>
+          </div>
+          <!-- <Transition appear enter-active-class="animate__animated animate__bounceInRight"> -->
+          <div
+            class="at-2xl:max-w-[500px] at-xl:max-w-[500px] at-md:max-w-[500px] at-lg:max-w-[500px] m-auto flex h-full w-[100%] items-center"
+          >
+            <LoginForm class="p-20px xl:light:bg-white m-auto h-auto xl:rounded-3xl" />
+          </div>
+          <!-- </Transition> -->
+        </div>
+      </div>
+    </ElScrollbar>
+  </div>
 </template>
+<style lang="scss" scoped>
+.login-page {
+  overflow: auto;
+}
+.login-page-left {
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    background-color: #283149;
+    background-position: center;
+    background-repeat: no-repeat;
+    content: '';
+  }
+}
+</style>