@oinone/kunlun-vue-admin-base 6.3.5 → 6.3.7

package/src/view/login/SSOLogin.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="login-page" :style="loginContainerStyle" :key="node_code">
+    <video
+      ref="videoRef"
+      loop
+      autoplay
+      muted
+      class="login-page-strick-video"
+      v-if="isVideoBackground && !isStandLayout"
+      :controls="false"
+      :src="backgroundImage"
+    ></video>
+
+    <!-- logo在页面左上角 -->
+    <div class="login-page-container-img" v-if="logoInLeft" :style="logoStyle">
+      <img v-if="loginPageLogo" :src="loginPageLogo" alt="logo" />
+    </div>
+
+    <div class="login-page-container" @keyup.enter="login" :style="loginBlockStyle">
+      <div v-if="enableI18n && currentLanguage && currentLanguage.name" class="login-language-wrapper">
+        <a-dropdown>
+          <div class="login-language-current-row">
+            <oio-icon icon="oinone-a-yuyanxuanze4x" size="14" color="var(--oio-text-color-secondary)" />
+            <span class="login-language-current">{{ currentLanguage.name }}</span>
+            <oio-icon icon="oinone-zhutixiala" size="10" color="var(--oio-text-color-secondary)" />
+          </div>
+          <template #overlay>
+            <a-menu>
+              <a-menu-item v-for="language in languages" :key="language.code" @click="() => onLanguageChange(language)">
+                {{ language.name }}
+              </a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
+      </div>
+
+      <!-- 账号登录 -->
+      <div class="login-page-title">{{ translateValueByKey(accountLoginLabel) }}</div>
+      <oio-form :data="authForm" class="login-page-form">
+        <oio-form-item
+          name="login"
+          :help="error['login']"
+          :validateStatus="error['login'] || error['password'] ? 'error' : ''"
+        >
+          <oio-input
+            class="login-input"
+            :placeholder="translateValueByKey(accountPlaceholder)"
+            v-model:value="authForm.login"
+            @blur="loginBlur"
+            @change="clearErrorMessage"
+          >
+            <template #prefix>
+              <user-outlined />
+            </template>
+          </oio-input>
+        </oio-form-item>
+        <oio-form-item
+          name="password"
+          :help="error['password']"
+          :validateStatus="error['login'] || error['password'] ? 'error' : ''"
+        >
+          <a-input-password
+            class="login-input"
+            :placeholder="translateValueByKey(passwordPlaceholder)"
+            v-model:value="authForm.password"
+            @change="clearErrorMessage"
+          >
+            <template #prefix>
+              <lock-outlined />
+            </template>
+          </a-input-password>
+        </oio-form-item>
+      </oio-form>
+      <oio-button type="primary" block @click="login">{{ translateValueByKey(loginLabel) }}</oio-button>
+    </div>
+    <div
+      class="login-page-ugly-bg"
+      v-if="isStandLayout"
+      :style="{
+        backgroundImage: `url(${backgroundImage})`
+      }"
+    >
+      <video
+        ref="videoRef"
+        loop
+        autoplay
+        muted
+        class="login-page-video"
+        v-if="isVideoBackground"
+        :controls="false"
+        :src="backgroundImage"
+      ></video>
+    </div>
+
+    <div class="login-page-footer" v-if="copyrightStatus">
+      <div>
+        Copyrights ©{{ copyright.year }}
+        <span style="cursor: pointer" @click="onCompanyUrl">{{ translateValueByKey(copyright.company) }}</span>
+      </div>
+      <div>{{ copyright.icp }}</div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { LockOutlined, UserOutlined } from '@ant-design/icons-vue';
+import {
+  genStaticPath,
+  getCopyrightStatus,
+  OioLoginLogoPosition,
+  OioLoginThemeConfig,
+  OioLoginThemeName,
+  translateValueByKey
+} from '@oinone/kunlun-engine';
+import { OioButton, OioForm, OioFormItem, OioIcon, OioInput, VIDEO_SUFFIX_LIST } from '@oinone/kunlun-vue-ui-antd';
+import { LoginData, RuntimeLanguage } from '@oinone/kunlun-vue-ui-common';
+import {
+  Dropdown as ADropdown,
+  InputPassword as AInputPassword,
+  Menu as AMenu,
+  MenuItem as AMenuItem
+} from 'ant-design-vue';
+import { computed, defineProps, nextTick, onActivated, PropType, ref } from 'vue';
+
+const props = defineProps({
+  loginMethod: { type: String, required: true },
+  loginUrl: { type: String, required: true },
+  login: { type: Function as PropType<() => void>, required: true },
+  loginBlur: { type: Function as PropType<() => void>, required: false },
+  error: { type: Object as PropType<LoginData>, required: true },
+  clearErrorMessage: { type: Function as PropType<() => void>, required: true },
+  authForm: { type: Object as PropType<LoginData>, required: true },
+  copyrightYear: { type: [Number, String], required: true },
+  currentLoginTheme: { type: Object, required: true },
+  systemMajorConfig: { type: Object as PropType<Record<string, any>>, required: true },
+  loginLabel: { type: String, required: true },
+  accountLoginLabel: { type: String, required: true },
+  accountPlaceholder: { type: String, required: true },
+  passwordPlaceholder: { type: String, required: true },
+  enableI18n: { type: Boolean },
+  languages: { type: Array as PropType<RuntimeLanguage[]>, required: true },
+  currentLanguage: { type: Object as PropType<RuntimeLanguage>, required: true },
+  onLanguageChange: { type: Function as PropType<(language: RuntimeLanguage) => void>, required: true },
+  node_code: String
+});
+
+const videoRef = ref<HTMLVideoElement>();
+
+onActivated(() => {
+  nextTick(() => {
+    if (videoRef.value) {
+      videoRef.value.play();
+    }
+  });
+});
+
+/**
+ *  有大背景图，并且左侧布局
+ */
+const useCenteredKeepLeft = {
+  justifyContent: 'flex-start',
+  paddingLeft: '14%'
+};
+
+/**
+ *  有大背景图，并且右侧布局
+ */
+const useCenteredKeepRight = {
+  justifyContent: 'flex-end',
+  paddingRight: '14%'
+};
+
+/**
+ * logo的样式
+ */
+const logoStyle = computed(() => {
+  return loginThemeConfig.value.logoPosition === OioLoginLogoPosition.LEFT ? { left: '60px' } : { right: '60px' };
+});
+
+/**
+ * 背景图
+ */
+const backgroundImage = computed(() => {
+  return loginThemeConfig.value.backgroundImage;
+});
+
+/**
+ * logo
+ */
+const loginPageLogo = computed(() => loginThemeConfig.value.logo || '');
+
+/**
+ *  当前背景图是不是视频
+ */
+const isVideoBackground = computed(() => {
+  if (backgroundImage.value) {
+    const isVideo = !!VIDEO_SUFFIX_LIST.find((suffix) => backgroundImage.value.endsWith(suffix));
+
+    return isVideo;
+  }
+
+  return false;
+});
+
+/**
+ * 默认背景图样式
+ */
+const useCenteredStyle = computed(() => {
+  return {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundImage: isVideoBackground.value ? '' : `url(${backgroundImage.value})`
+  };
+});
+
+/**
+ * 登录页的样式
+ */
+const loginContainerStyle = computed(() => {
+  const { name, backgroundColor } = loginThemeConfig.value;
+  let style = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor
+  };
+
+  switch (name) {
+    case 'CENTER_STICK':
+    case 'CENTER_STICK_LOGO':
+      style = Object.assign(style, useCenteredStyle.value);
+      break;
+    case 'LEFT_STICK':
+      style = Object.assign(style, useCenteredStyle.value, useCenteredKeepLeft);
+      break;
+    case 'RIGHT_STICK':
+      style = Object.assign(style, useCenteredStyle.value, useCenteredKeepRight);
+      break;
+    case 'STAND_RIGHT':
+      style = Object.assign(style, {
+        flexDirection: 'row-Reverse'
+      });
+      break;
+    default:
+      break;
+  }
+
+  return style;
+});
+
+/**
+ * logo 是否显示在页面左侧
+ */
+const logoInLeft = computed(() => {
+  return (
+    loginThemeConfig.value.logoPosition !== OioLoginLogoPosition.CENTER &&
+    loginThemeConfig.value.name !== OioLoginThemeName.CENTER_STICK_LOGO
+  );
+});
+
+const isStandLayout = computed(() => {
+  return [OioLoginThemeName.STAND_LEFT, OioLoginThemeName.STAND_RIGHT].includes(loginThemeConfig.value.name);
+});
+
+/**
+ * 登录form表单的样式
+ */
+const loginBlockStyle = computed(() => {
+  const style: Record<string, string> = {};
+  const { name } = loginThemeConfig.value;
+  if ([OioLoginThemeName.STAND_LEFT, OioLoginThemeName.STAND_RIGHT].includes(name)) {
+    style.boxShadow = 'none';
+    style.margin = '0 150px';
+  }
+
+  return style;
+});
+
+/**
+ * 登录主题配置
+ */
+const loginThemeConfig = computed<Required<OioLoginThemeConfig>>(() => {
+  const name = props.currentLoginTheme.name || OioLoginThemeName.STAND_RIGHT;
+  const defaultImage = [OioLoginThemeName.STAND_LEFT, OioLoginThemeName.STAND_RIGHT].includes(name)
+    ? genStaticPath('login_bg_left.jpg')
+    : genStaticPath('login_big_image@2x-1.png');
+
+  return {
+    name,
+    backgroundImage: props.currentLoginTheme.backgroundImage || defaultImage,
+    backgroundColor: props.currentLoginTheme.backgroundColor!,
+    logo: props.currentLoginTheme.logo,
+    logoPosition: props.currentLoginTheme.logoPosition || OioLoginLogoPosition.LEFT
+  };
+});
+
+const copyrightStatus = getCopyrightStatus();
+
+const copyright = computed(() => {
+  return {
+    year: props.copyrightYear || '',
+    company: props.systemMajorConfig?.partnerName || '',
+    icp: props.systemMajorConfig?.icpDesc || ''
+  };
+});
+
+const onCompanyUrl = () => {
+  if (props.systemMajorConfig.officialWebsite) {
+    window.open(props.systemMajorConfig.officialWebsite, '_blank');
+  }
+};
+</script>

package/src/view/login/SSOLoginWidget.ts

@@ -0,0 +1,103 @@
+import { translateValueByKey } from '@oinone/kunlun-engine';
+import { UrlHelper } from '@oinone/kunlun-shared';
+import { SPI } from '@oinone/kunlun-spi';
+import { RouterWidget } from '@oinone/kunlun-vue-router';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { BaseLoginWidget } from './BaseLoginWidget';
+import SSOLogin from './SSOLogin.vue';
+
+@SPI.ClassFactory(
+  RouterWidget.Token({
+    widget: 'sso-login'
+  })
+)
+export class SSOLoginWidget extends BaseLoginWidget {
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(SSOLogin);
+    return this;
+  }
+
+  protected get keyMapping(): Record<string, string> {
+    return {
+      login: 'username',
+      client_id: 'clientId',
+      redirect_uri: 'redirectUri'
+    };
+  }
+
+  protected mappingForKey(key: string): string {
+    return this.keyMapping[key] || key;
+  }
+
+  @Widget.Reactive()
+  protected get loginMethod(): string {
+    return 'POST';
+  }
+
+  @Widget.Reactive()
+  protected get loginUrl() {
+    return UrlHelper.appendBasePath('/pamirs/sso/oauth2/login');
+  }
+
+  @Widget.Method()
+  public async login() {
+    const rst = await this.beforeClick();
+    if (!rst) {
+      return;
+    }
+
+    const { login, password } = this.authForm;
+    if (!login || !password) {
+      this.error.login = login ? '' : translateValueByKey(this.errorMessages.loginEmpty);
+      this.error.password = password ? '' : translateValueByKey(this.errorMessages.passwordEmpty);
+      return;
+    }
+
+    const formData: Record<string, string> = {};
+    formData[this.mappingForKey('login')] = login;
+    formData[this.mappingForKey('password')] = password;
+    Object.entries(this.getUrlParameters()).forEach(([key, value]) => {
+      if (key === 'error') {
+        return;
+      }
+      formData[this.mappingForKey(key)] = value;
+    });
+    this.submitLoginFormData(formData);
+  }
+
+  protected submitLoginFormData(formData: Record<string, string>) {
+    // 1. 创建 form 元素
+    const form = document.createElement('form');
+    form.action = this.loginUrl; // 提交的目标地址（服务端可能返回 302 重定向）
+    form.method = this.loginMethod; // 提交方法（POST/GET）
+    form.style.display = 'none'; // 隐藏表单
+
+    // 2. 添加表单数据（键值对）
+    Object.entries(formData).forEach(([key, value]) => {
+      const input = document.createElement('input');
+      input.name = key; // 字段名
+      input.value = value; // 字段值
+      form.appendChild(input);
+    });
+
+    // 3. 将表单添加到页面并提交
+    document.body.appendChild(form);
+    form.submit(); // 触发提交，浏览器会自动处理 302 重定向
+
+    // 4. 清理（可选，提交后页面会跳转，可能无需清理）
+    document.body.removeChild(form);
+  }
+
+  protected getUrlParameters(): Record<string, string> {
+    return this.matched?.segmentParams['sso-login'] || {};
+  }
+
+  protected async beforeMount() {
+    await super.beforeMount();
+    const { error } = this.getUrlParameters();
+    if (error) {
+      this.error.password = error;
+    }
+  }
+}

package/src/view/login/index.ts

@@ -1 +1,3 @@
+export * from './BaseLoginWidget';
 export * from './LoginWidget';
+export * from './SSOLoginWidget';