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

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']

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 }">
+  <div class="relative size-full flex flex-wrap overflow-hidden">
-    <WaveBg :theme-color="bgThemeColor" />
+    <div class="hidden h-full w-50% bg-primary-100 lg:block dark:bg-primary-800">
-    <NCard :bordered="false" class="relative z-4 w-auto rd-12px">
+      <div class="size-full flex-center">
-      <div class="w-400px lt-sm:w-300px">
+        <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" />
+          <div class="flex-y-center gap-16px">
-          <h3 class="text-28px text-primary font-500 lt-sm:text-22px">{{ $t('system.title') }}</h3>
+            <SystemLogo class="text-42px text-primary" />
-          <div class="i-flex-col">
+            <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>
-          <div class="pt-24px">
             <Transition :name="themeStore.page.animateMode" mode="out-in" appear>
               <component :is="activeModule.component" />
             </Transition>
           </div>
         </main>
       </div>
-    </NCard>
+    </div>
   </div>
 </template>
 

src/views/_builtin/login/modules/pwd-login.vue

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

src/views/_builtin/login/modules/register.vue

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

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