Merge branch 'dev' of https://gitee.com/xlsea/ruoyi-plus-soybean into flow

2025-09-24 07:49:47 +08:00 · 2025-06-19 23:18:02 +08:00
parent 56bfd64fbe 47d5c1c71b
commit 2b5735ab34
23 changed files with 455 additions and 214 deletions
--- 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="w-64px text-primary lt-sm:text-48px" />
-          <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>
--- a/src/views/_builtin/social-callback/index.vue
+++ b/src/views/_builtin/social-callback/index.vue
@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
-import { useLoading } from '@sa/hooks';
+import { getRgb } from '@sa/color';
+import { DARK_CLASS } from '@/constants/app';
 import { fetchSocialLoginCallback } from '@/service/api';
 import { useAuthStore } from '@/store/modules/auth';
 import { useRouterPush } from '@/hooks/common/router';
+import { localStg } from '@/utils/storage';
+import { toggleHtmlClass } from '@/utils/common';

 const route = useRoute();
 const authStore = useAuthStore();
 const { routerPushByKey } = useRouterPush();
-const { loading, startLoading, endLoading } = useLoading(true);

 /**
 * 接收Route传递的参数
@ -56,7 +58,6 @@ const callbackByCode = async (data: Api.Auth.SocialLoginForm) => {
    return;
  }
  await processResponse();
-  endLoading();
 };

 const loginByCode = async (data: Api.Auth.SocialLoginForm) => {
@ -67,11 +68,9 @@ const loginByCode = async (data: Api.Auth.SocialLoginForm) => {
  } catch {
    handleError();
  }
-  endLoading();
 };

 const init = async () => {
-  startLoading();
  // 如果域名不相等 则重定向处理
  const host = window.location.host;
  if (domain !== host) {
@ -99,17 +98,28 @@ const init = async () => {
 onMounted(async () => {
  await init();
 });
+
+const themeColor = localStg.get('themeColor') || '#2080f0';
+const darkMode = localStg.get('darkMode') || false;
+const { r, g, b } = getRgb(themeColor);
+
+if (darkMode) {
+  toggleHtmlClass(DARK_CLASS).add();
+}
+
+const primaryColor = `--primary-color: ${r} ${g} ${b}`;
 </script>

 <template>
-  <div class="fixed-center flex-col bg-layout">
-    <div class="my-36px h-120px w-120px">
-      <div class="relative h-full" :class="{ 'animate-spin': loading }">
-        <img src="@/assets/imgs/logo.png" width="120" />
-      </div>
+  <div class="fixed-center flex-col bg-layout" :style="primaryColor">
+    <div class="my-52px h-120px w-120px">
+      <!-- From Uiverse.io by SchawnnahJ -->
+      <div class="loader"></div>
    </div>
-    <h2 class="text-28px text-primary font-500">{{ msg }}</h2>
+    <h2 class="text-30px text-primary-400 font-500">{{ $t('system.title') }}</h2>
  </div>
 </template>

-<style scoped></style>
+<style lang="scss" scoped>
+@use '@/styles/scss/loading.scss';
+</style>
--- a/src/views/system/menu/modules/menu-operate-drawer.vue
+++ b/src/views/system/menu/modules/menu-operate-drawer.vue
@ -255,12 +255,10 @@ function onCreate() {
      <NForm ref="formRef" :model="model" :rules="rules">
        <NGrid responsive="screen" item-responsive>
          <NFormItemGi :span="24" :label="$t('page.system.menu.parentId')" path="pid">
-            <NTreeSelect
+            <MenuTreeSelect
              v-model:value="model.parentId"
+              :immediate="false"
              :options="treeData as []"
-              label-field="menuName"
-              key-field="menuId"
-              :default-expanded-keys="[0]"
              :placeholder="$t('page.system.menu.form.parentId.required')"
            />
          </NFormItemGi>