style(projects): 重构登录页样式

2025-06-19 23:04:09 +08:00 · 2025-06-19 23:04:09 +08:00 · 406800de59
commit 406800de59
parent 7e4ecae6cb
6 changed files with 258 additions and 162 deletions
--- a/src/assets/svg-icon/login-background.svg
+++ b/src/assets/svg-icon/login-background.svg
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@ -34,6 +34,7 @@ declare module 'vue' {
    IconIcRoundRefresh: typeof import('~icons/ic/round-refresh')['default']
    IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
    IconLocalBanner: typeof import('~icons/local/banner')['default']
+    IconLocalLoginBg: typeof import('~icons/local/login-bg')['default']
    IconLocalLogo: typeof import('~icons/local/logo')['default']
    'IconMaterialSymbols:add': typeof import('~icons/material-symbols/add')['default']
    'IconMaterialSymbols:deleteOutline': typeof import('~icons/material-symbols/delete-outline')['default']
@ -46,6 +47,7 @@ declare module 'vue' {
    IconMaterialSymbolsAddRounded: typeof import('~icons/material-symbols/add-rounded')['default']
    IconMaterialSymbolsDeleteOutline: typeof import('~icons/material-symbols/delete-outline')['default']
    IconMaterialSymbolsDriveFileRenameOutlineOutline: typeof import('~icons/material-symbols/drive-file-rename-outline-outline')['default']
+    'IconMdi:github': typeof import('~icons/mdi/github')['default']
    IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
    IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
    IconMdiDrag: typeof import('~icons/mdi/drag')['default']
@ -53,6 +55,7 @@ declare module 'vue' {
    IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
    'IconQuill:collapse': typeof import('~icons/quill/collapse')['default']
    'IconQuill:expand': typeof import('~icons/quill/expand')['default']
+    'IconSimpleIcons:gitee': typeof import('~icons/simple-icons/gitee')['default']
    IconUilSearch: typeof import('~icons/uil/search')['default']
    JsonPreview: typeof import('./../components/custom/json-preview.vue')['default']
    LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
--- a/src/views/_builtin/login/index.vue
+++ b/src/views/_builtin/login/index.vue
@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Component } from 'vue';
-import { getPaletteColorByNumber, mixColor } from '@sa/color';
 import { loginModuleRecord } from '@/constants/app';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
+import loginBackground from '@/assets/svg-icon/login-background.svg';
 import { $t } from '@/locales';
 import PwdLogin from './modules/pwd-login.vue';
 import CodeLogin from './modules/code-login.vue';
@ -36,29 +36,23 @@ const moduleMap: Record<UnionKey.LoginModule, LoginModule> = {
 };

 const activeModule = computed(() => moduleMap[props.module || 'pwd-login']);
-
-const bgThemeColor = computed(() =>
-  themeStore.darkMode ? getPaletteColorByNumber(themeStore.themeColor, 600) : themeStore.themeColor
-);
-
-const bgColor = computed(() => {
-  const COLOR_WHITE = '#ffffff';
-
-  const ratio = themeStore.darkMode ? 0.5 : 0.2;
-
-  return mixColor(COLOR_WHITE, themeStore.themeColor, ratio);
-});
 </script>

 <template>
-  <div class="relative size-full flex-center overflow-hidden" :style="{ backgroundColor: bgColor }">
-    <WaveBg :theme-color="bgThemeColor" />
-    <NCard :bordered="false" class="relative z-4 w-auto rd-12px">
-      <div class="w-400px lt-sm:w-300px">
+  <div class="relative size-full flex flex-wrap overflow-hidden">
+    <div class="hidden h-full w-50% bg-primary-100 lg:block dark:bg-primary-800">
+      <div class="size-full flex-center">
+        <img class="w-60% sm:w-80%" :src="loginBackground" />
+      </div>
+    </div>
+    <div class="w-full flex-col-center px-24px py-32px lg:w-50%">
+      <div class="mx-auto max-w-464px w-full">
        <header class="flex-y-center justify-between">
-          <SystemLogo class="text-58px text-primary lt-sm:text-52px" />
-          <h3 class="text-28px text-primary font-500 lt-sm:text-22px">{{ $t('system.title') }}</h3>
-          <div class="i-flex-col">
+          <div class="flex-y-center gap-16px">
+            <SystemLogo class="text-42px text-primary" />
+            <h3 class="text-32px text-primary font-500">{{ $t('system.title') }}</h3>
+          </div>
+          <div class="flex-y-center">
            <ThemeSchemaSwitch
              :theme-schema="themeStore.themeScheme"
              :show-tooltip="false"
@ -75,15 +69,14 @@ const bgColor = computed(() => {
          </div>
        </header>
        <main class="pt-24px">
-          <h3 class="text-18px text-primary font-medium">{{ $t(activeModule.label) }}</h3>
-          <div class="pt-24px">
+          <div>
            <Transition :name="themeStore.page.animateMode" mode="out-in" appear>
              <component :is="activeModule.component" />
            </Transition>
          </div>
        </main>
      </div>
-    </NCard>
+    </div>
  </div>
 </template>

--- a/src/views/_builtin/login/modules/pwd-login.vue
+++ b/src/views/_builtin/login/modules/pwd-login.vue
@ -121,63 +121,89 @@ async function handleSocialLogin(type: Api.System.SocialSource) {
 </script>

 <template>
-  <NForm
-    ref="formRef"
-    :model="model"
-    :rules="rules"
-    size="large"
-    :show-label="false"
-    @keyup.enter="() => !authStore.loginLoading && handleSubmit()"
-  >
-    <NFormItem v-if="tenantEnabled" path="tenantId">
-      <NSelect
-        v-model:value="model.tenantId"
-        placeholder="请选择租户"
-        :options="tenantOption"
-        :loading="tenantLoading"
-      />
-    </NFormItem>
-    <NFormItem path="username">
-      <NInput v-model:value="model.username" :placeholder="$t('page.login.common.userNamePlaceholder')" />
-    </NFormItem>
-    <NFormItem path="password">
-      <NInput
-        v-model:value="model.password"
-        type="password"
-        show-password-on="click"
-        :placeholder="$t('page.login.common.passwordPlaceholder')"
-      />
-    </NFormItem>
-    <NFormItem v-if="captchaEnabled" path="code">
-      <div class="w-full flex-y-center gap-16px">
-        <NInput v-model:value="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
-        <NSpin :show="codeLoading" :size="28" class="h-42px">
-          <NButton :focusable="false" class="login-code h-42px w-116px" @click="handleFetchCaptchaCode">
-            <img v-if="codeUrl" :src="codeUrl" />
-            <NEmpty v-else :show-icon="false" description="暂无验证码" />
-          </NButton>
-        </NSpin>
-      </div>
-    </NFormItem>
-    <NSpace vertical :size="16" class="mb-8px">
-      <div class="mx-6px flex-y-center justify-between">
-        <NCheckbox v-model:checked="remberMe">{{ $t('page.login.pwdLogin.rememberMe') }}</NCheckbox>
-        <NSpace :size="1">
-          <ButtonIcon class="color-#44b549" icon="ic:outline-wechat" @click="handleSocialLogin('wechat_open')" />
-          <ButtonIcon local-icon="topiam" @click="handleSocialLogin('topiam')" />
-          <ButtonIcon local-icon="maxkey" @click="handleSocialLogin('maxkey')" />
-          <ButtonIcon class="color-#c71d23" icon="simple-icons:gitee" @click="handleSocialLogin('gitee')" />
-          <ButtonIcon class="color-#010409" icon="mdi:github" @click="handleSocialLogin('github')" />
-        </NSpace>
-      </div>
-      <NButton type="primary" size="large" block :loading="authStore.loginLoading" @click="handleSubmit">
-        {{ $t('common.login') }}
+  <div>
+    <div class="mb-12px text-30px text-black font-500 dark:text-white">登录到您的账户</div>
+    <div class="pb-24px text-18px text-#858585">欢迎回来！请输入您的账户信息</div>
+    <NForm
+      ref="formRef"
+      :model="model"
+      :rules="rules"
+      size="large"
+      :show-label="false"
+      @keyup.enter="() => !authStore.loginLoading && handleSubmit()"
+    >
+      <NFormItem v-if="tenantEnabled" path="tenantId">
+        <NSelect
+          v-model:value="model.tenantId"
+          placeholder="请选择租户"
+          :options="tenantOption"
+          :loading="tenantLoading"
+        />
+      </NFormItem>
+      <NFormItem path="username">
+        <NInput v-model:value="model.username" :placeholder="$t('page.login.common.userNamePlaceholder')" />
+      </NFormItem>
+      <NFormItem path="password">
+        <NInput
+          v-model:value="model.password"
+          type="password"
+          show-password-on="click"
+          :placeholder="$t('page.login.common.passwordPlaceholder')"
+        />
+      </NFormItem>
+      <NFormItem v-if="captchaEnabled" path="code">
+        <div class="w-full flex-y-center gap-16px">
+          <NInput v-model:value="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
+          <NSpin :show="codeLoading" :size="28" class="h-52px">
+            <NButton :focusable="false" class="login-code h-52px w-136px" @click="handleFetchCaptchaCode">
+              <img v-if="codeUrl" :src="codeUrl" />
+              <NEmpty v-else :show-icon="false" description="暂无验证码" />
+            </NButton>
+          </NSpin>
+        </div>
+      </NFormItem>
+      <NSpace vertical :size="16" class="mb-8px">
+        <div class="mx-6px mb-10px flex-y-center justify-between">
+          <NCheckbox v-model:checked="remberMe" size="large">{{ $t('page.login.pwdLogin.rememberMe') }}</NCheckbox>
+          <NA type="primary" class="text-18px" @click="toggleLoginModule('reset-pwd')">
+            {{ $t('page.login.pwdLogin.forgetPassword') }}
+          </NA>
+        </div>
+        <NButton type="primary" size="large" block :loading="authStore.loginLoading" @click="handleSubmit">
+          {{ $t('common.login') }}
+        </NButton>
+        <NButton v-if="registerEnabled" size="large" block @click="toggleLoginModule('register')">
+          {{ $t('page.login.common.register') }}
+        </NButton>
+      </NSpace>
+    </NForm>
+
+    <NDivider>
+      <div class="color-#858585">{{ $t('page.login.pwdLogin.otherAccountLogin') }}</div>
+    </NDivider>
+
+    <div class="w-full flex-y-center gap-16px">
+      <NButton class="flex-1" @click="handleSocialLogin('gitee')">
+        <template #icon>
+          <icon-simple-icons:gitee class="color-#c71d23" />
+        </template>
+        <span class="ml-6px">Gitee</span>
      </NButton>
-      <NButton v-if="registerEnabled" size="large" block @click="toggleLoginModule('register')">
+      <NButton class="flex-1" @click="handleSocialLogin('github')">
+        <template #icon>
+          <icon-mdi:github class="color-#010409" />
+        </template>
+        <span class="ml-6px">GitHub</span>
+      </NButton>
+    </div>
+
+    <div class="mt-32px w-full text-center text-18px text-#858585">
+      您还没有账户？
+      <NA type="primary" class="text-18px" @click="toggleLoginModule('register')">
        {{ $t('page.login.common.register') }}
-      </NButton>
-    </NSpace>
-  </NForm>
+      </NA>
+    </div>
+  </div>
 </template>

 <style scoped>
@ -188,7 +214,34 @@ async function handleSocialLogin(type: Api.System.SocialSource) {
  }

  img {
-    height: 40px;
+    height: 52px;
  }
 }
+
+:deep(.n-base-selection),
+:deep(.n-input) {
+  --n-height: 52px !important;
+  --n-font-size: 16px !important;
+  --n-border-radius: 8px !important;
+}
+
+:deep(.n-base-selection-label) {
+  padding: 0 6px !important;
+}
+
+:deep(.n-checkbox) {
+  --n-size: 18px !important;
+  --n-font-size: 16px !important;
+}
+
+:deep(.n-button) {
+  --n-height: 52px !important;
+  --n-font-size: 18px !important;
+  --n-border-radius: 8px !important;
+}
+
+:deep(.n-divider) {
+  --n-font-size: 16px !important;
+  --n-font-weight: 400 !important;
+}
 </style>
--- a/src/views/_builtin/login/modules/register.vue
+++ b/src/views/_builtin/login/modules/register.vue
@ -103,56 +103,64 @@ handleFetchCaptchaCode();
 </script>

 <template>
-  <NForm
-    ref="formRef"
-    :model="model"
-    :rules="rules"
-    size="large"
-    :show-label="false"
-    @keyup.enter="() => !registerLoading && handleSubmit()"
-  >
-    <NFormItem v-if="tenantEnabled" path="tenantId">
-      <NSelect v-model:value="model.tenantId" :options="tenantOption" :enabled="tenantEnabled" />
-    </NFormItem>
-    <NFormItem path="username">
-      <NInput v-model:value="model.username" :placeholder="$t('page.login.common.userNamePlaceholder')" />
-    </NFormItem>
-    <NFormItem path="password">
-      <NInput
-        v-model:value="model.password"
-        type="password"
-        show-password-on="click"
-        :placeholder="$t('page.login.common.passwordPlaceholder')"
-      />
-    </NFormItem>
-    <NFormItem path="confirmPassword">
-      <NInput
-        v-model:value="model.confirmPassword"
-        type="password"
-        show-password-on="click"
-        :placeholder="$t('page.login.common.confirmPasswordPlaceholder')"
-      />
-    </NFormItem>
-    <NFormItem v-if="captchaEnabled" path="code">
-      <div class="w-full flex-y-center gap-16px">
-        <NInput v-model:value="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
-        <NSpin :show="codeLoading" :size="28" class="h-42px">
-          <NButton :focusable="false" class="login-code h-42px w-116px" @click="handleFetchCaptchaCode">
-            <img v-if="codeUrl" :src="codeUrl" />
-            <NEmpty v-else :show-icon="false" description="暂无验证码" />
-          </NButton>
-        </NSpin>
-      </div>
-    </NFormItem>
-    <NSpace vertical :size="18" class="w-full">
-      <NButton type="primary" size="large" block :loading="registerLoading" @click="handleSubmit">
-        {{ $t('page.login.common.register') }}
-      </NButton>
-      <NButton size="large" block @click="toggleLoginModule('pwd-login')">
-        {{ $t('page.login.common.back') }}
-      </NButton>
-    </NSpace>
-  </NForm>
+  <div>
+    <div class="mb-12px text-30px text-black font-500 dark:text-white">注册新账户</div>
+    <div class="pb-24px text-18px text-#858585">欢迎注册！请输入您的账户信息</div>
+    <NForm
+      ref="formRef"
+      :model="model"
+      :rules="rules"
+      size="large"
+      :show-label="false"
+      @keyup.enter="() => !registerLoading && handleSubmit()"
+    >
+      <NFormItem v-if="tenantEnabled" path="tenantId">
+        <NSelect v-model:value="model.tenantId" :options="tenantOption" :enabled="tenantEnabled" />
+      </NFormItem>
+      <NFormItem path="username">
+        <NInput v-model:value="model.username" :placeholder="$t('page.login.common.userNamePlaceholder')" />
+      </NFormItem>
+      <NFormItem path="password">
+        <NInput
+          v-model:value="model.password"
+          type="password"
+          show-password-on="click"
+          :placeholder="$t('page.login.common.passwordPlaceholder')"
+        />
+      </NFormItem>
+      <NFormItem path="confirmPassword">
+        <NInput
+          v-model:value="model.confirmPassword"
+          type="password"
+          show-password-on="click"
+          :placeholder="$t('page.login.common.confirmPasswordPlaceholder')"
+        />
+      </NFormItem>
+      <NFormItem v-if="captchaEnabled" path="code">
+        <div class="w-full flex-y-center gap-16px">
+          <NInput v-model:value="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
+          <NSpin :show="codeLoading" :size="28" class="h-52px">
+            <NButton :focusable="false" class="login-code h-52px w-136px" @click="handleFetchCaptchaCode">
+              <img v-if="codeUrl" :src="codeUrl" />
+              <NEmpty v-else :show-icon="false" description="暂无验证码" />
+            </NButton>
+          </NSpin>
+        </div>
+      </NFormItem>
+      <NSpace vertical :size="18" class="w-full pt-6px">
+        <NButton type="primary" size="large" block :loading="registerLoading" @click="handleSubmit">
+          {{ $t('page.login.common.register') }}
+        </NButton>
+      </NSpace>
+    </NForm>
+
+    <div class="mt-32px w-full text-center text-18px text-#858585">
+      您已有账户？
+      <NA type="primary" class="text-18px" @click="toggleLoginModule('pwd-login')">
+        {{ $t('common.login') }}
+      </NA>
+    </div>
+  </div>
 </template>

 <style scoped lang="scss">
@ -166,4 +174,21 @@ handleFetchCaptchaCode();
    height: 40px;
  }
 }
+
+:deep(.n-base-selection),
+:deep(.n-input) {
+  --n-height: 52px !important;
+  --n-font-size: 16px !important;
+  --n-border-radius: 8px !important;
+}
+
+:deep(.n-base-selection-label) {
+  padding: 0 6px !important;
+}
+
+:deep(.n-button) {
+  --n-height: 52px !important;
+  --n-font-size: 18px !important;
+  --n-border-radius: 8px !important;
+}
 </style>
--- a/src/views/_builtin/login/modules/reset-pwd.vue
+++ b/src/views/_builtin/login/modules/reset-pwd.vue
@ -45,38 +45,59 @@ async function handleSubmit() {
 </script>

 <template>
-  <NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false" @keyup.enter="handleSubmit">
-    <NFormItem path="phone">
-      <NInput v-model:value="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')" />
-    </NFormItem>
-    <NFormItem path="code">
-      <NInput v-model:value="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
-    </NFormItem>
-    <NFormItem path="password">
-      <NInput
-        v-model:value="model.password"
-        type="password"
-        show-password-on="click"
-        :placeholder="$t('page.login.common.passwordPlaceholder')"
-      />
-    </NFormItem>
-    <NFormItem path="confirmPassword">
-      <NInput
-        v-model:value="model.confirmPassword"
-        type="password"
-        show-password-on="click"
-        :placeholder="$t('page.login.common.confirmPasswordPlaceholder')"
-      />
-    </NFormItem>
-    <NSpace vertical :size="18" class="w-full">
-      <NButton type="primary" size="large" round block @click="handleSubmit">
-        {{ $t('common.confirm') }}
-      </NButton>
-      <NButton size="large" round block @click="toggleLoginModule('pwd-login')">
-        {{ $t('page.login.common.back') }}
-      </NButton>
-    </NSpace>
-  </NForm>
+  <div>
+    <div class="mb-12px text-30px text-black font-500 dark:text-white">{{ $t('page.login.resetPwd.title') }}</div>
+    <div class="pb-24px text-18px text-#858585">请输入您的手机号，我们将发送验证码到您的手机</div>
+    <NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false" @keyup.enter="handleSubmit">
+      <NFormItem path="phone">
+        <NInput v-model:value="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')" />
+      </NFormItem>
+      <NFormItem path="code">
+        <NInput v-model:value="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
+      </NFormItem>
+      <NFormItem path="password">
+        <NInput
+          v-model:value="model.password"
+          type="password"
+          show-password-on="click"
+          :placeholder="$t('page.login.common.passwordPlaceholder')"
+        />
+      </NFormItem>
+      <NFormItem path="confirmPassword">
+        <NInput
+          v-model:value="model.confirmPassword"
+          type="password"
+          show-password-on="click"
+          :placeholder="$t('page.login.common.confirmPasswordPlaceholder')"
+        />
+      </NFormItem>
+      <NSpace vertical :size="18" class="w-full">
+        <NButton type="primary" size="large" block @click="handleSubmit">
+          {{ $t('page.login.resetPwd.title') }}
+        </NButton>
+        <NButton size="large" block @click="toggleLoginModule('pwd-login')">
+          {{ $t('page.login.common.back') }}
+        </NButton>
+      </NSpace>
+    </NForm>
+  </div>
 </template>

-<style scoped></style>
+<style scoped>
+:deep(.n-base-selection),
+:deep(.n-input) {
+  --n-height: 52px !important;
+  --n-font-size: 16px !important;
+  --n-border-radius: 8px !important;
+}
+
+:deep(.n-base-selection-label) {
+  padding: 0 6px !important;
+}
+
+:deep(.n-button) {
+  --n-height: 52px !important;
+  --n-font-size: 18px !important;
+  --n-border-radius: 8px !important;
+}
+</style>