@oinone/kunlun-vue-admin-base 6.3.4 → 6.3.6

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

package/src/view/reset-password/ForgetPasswordWidget.ts

@@ -101,7 +101,11 @@ export class ForgetPasswordWidget extends BaseI18nRouterWidget {
     if (!phone) {
       return false;
     }
-    const { broken, errorMsg } = await UserService.fetchVerificationCodeByForget(phone);
+    const { broken, errorMsg } = await UserService.fetchVerificationCodeByForget(
+      phone,
+      undefined,
+      this.selectedCountry?.data?.phoneCode
+    );
     if (broken) {
       if (errorMsg) {
         OioMessage.error(errorMsg);

package/src/view/reset-password/style/index.scss

@@ -66,7 +66,7 @@
     background: #fafafc;
   }
 
-  .ant-input-affix-wrapper {
+  .oio-input.ant-input-affix-wrapper {
     background-color: #fafafc;
     border-radius: 4px;
     border: solid 1px #e6e6e6;
@@ -86,7 +86,7 @@
     }
   }
 
-  .ant-input-affix-wrapper > input.ant-input {
+  .oio-input.ant-input-affix-wrapper > input.ant-input {
     height: 46px !important;
     box-shadow: 0 0 0 1000px #fafafc inset;
     background-color: #fafafc;

package/src/view/search/DefaultSearch.vue

@@ -165,6 +165,7 @@ function createSearchBar(
           type: ButtonType.link,
           iconPlacement: IconPlacement.AFTER,
           icon: 'oinone-xiala',
+          iconColor: 'var(--oio-primary-color)',
           onClick: options.onExpand
         },
         { default: () => expandText }
@@ -241,7 +242,7 @@ export default defineComponent({
       let invisible = false;
       let hasExpandButton = false;
 
-      if (props.template && !props.disabledExpand) {
+      if (props.template) {
         const { widgets } = props.template;
         if (widgets && widgets.length) {
           let fields: DslDefinition[] = [];
@@ -253,18 +254,22 @@ export default defineComponent({
                 cateFields: props.cateFields,
                 dslNodeType: DslDefinitionType.ELEMENT,
                 widget: 'SearchTab',
-                widgets: cateWidgets
+                widgets: cateWidgets,
+                showTopCateAll: props.showTopCateAll,
+                showSecondCateAll: props.showSecondCateAll,
+                topCateJustify: props.topCateJustify
               })!
             );
           }
 
-          const finalExpandSize = props.invisibleSearch ? props.foldSize + 1 : props.foldSize;
-          appendFieldDslDefinition(fields, widgets, finalExpandSize, props.foldSize, props.cateFields);
-          if (fields.length) {
+          if (!props.disabledExpand) {
+            const finalExpandSize = props.invisibleSearch ? props.foldSize + 1 : props.foldSize;
+            appendFieldDslDefinition(fields, widgets, finalExpandSize, props.foldSize, props.cateFields);
             hasExpandButton = fields.length > finalExpandSize;
             if (hasExpandButton) {
               fields = fields.slice(0, finalExpandSize);
             }
+
             if (!props.invisibleSearch) {
               const searchActionBar: VNode[] = createSearchBar(false, {
                 hasExpandButton,
@@ -294,25 +299,22 @@ export default defineComponent({
               );
               fields.push(searchBarCol);
             }
-          } else {
-            hasExpandButton = false;
-            fields = widgets;
+            defaultChildren.push(
+              withDirectives(
+                DslRender.render({
+                  internal: true,
+                  dslNodeType: DslDefinitionType.PACK,
+                  widgets: fields,
+                  widget: InternalWidget.Row,
+                  cols: DEFAULT_COLS,
+                  resolveOptions: {
+                    mode: ResolveMode.NORMAL
+                  }
+                })!,
+                [[vShow, !props.isExpand]]
+              )
+            );
           }
-          defaultChildren.push(
-            withDirectives(
-              DslRender.render({
-                internal: true,
-                dslNodeType: DslDefinitionType.PACK,
-                widgets: fields,
-                widget: InternalWidget.Row,
-                cols: DEFAULT_COLS,
-                resolveOptions: {
-                  mode: ResolveMode.NORMAL
-                }
-              })!,
-              [[vShow, !props.isExpand]]
-            )
-          );
         }
       }
 

package/src/view/search/DefaultSearchTab.vue

@@ -27,6 +27,9 @@ export default defineComponent({
       type: Array as PropType<any[]>,
       default: () => []
     },
+    topCateJustify: {
+      type: String
+    },
     cateFields: {
       type: Array as PropType<string[]>
     },
@@ -104,11 +107,16 @@ export default defineComponent({
   render() {
     const cateSearchNodes = [] as VNode[];
     if (this.topCateFieldOptions?.length) {
+      const className = ['oio-cate-search'];
+      if (this.topCateJustify) {
+        className.push(`oio-cate-search-${this.topCateJustify.toLocaleLowerCase()}`);
+      }
+
       cateSearchNodes.push(
         createVNode(
           OioTabs,
           {
-            class: 'oio-cate-search',
+            class: className,
             activeKey: this.topCateActive,
             'onUpdate:activeKey': (val) => (this.topCateActive = val),
             onChange: this.onChangeTopCate

package/src/view/search/SearchTabWidget.ts

@@ -2,7 +2,7 @@ import { SPI } from '@oinone/kunlun-spi';
 import { IModelField, IModelFieldOption, ModelFieldType, ViewType } from '@oinone/kunlun-meta';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { ActiveRecord, RuntimeModelField } from '@oinone/kunlun-engine';
-import { BooleanHelper, CallChaining } from '@oinone/kunlun-shared';
+import { BooleanHelper, CallChaining, Optional } from '@oinone/kunlun-shared';
 import DefaultSearchTab from './DefaultSearchTab.vue';
 import { BaseElementWidget } from '../../basic';
 import { CATE_ALL_OPTION } from './types';
@@ -43,7 +43,7 @@ export class SearchTabWidget extends BaseElementWidget {
 
   @Widget.Reactive()
   protected get showTopCateAll(): boolean {
-    return BooleanHelper.toBoolean(this.getDsl().showTopCateAll) || true;
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.getDsl().showTopCateAll)).orElse(true);
   }
 
   @Widget.Reactive()
@@ -64,9 +64,14 @@ export class SearchTabWidget extends BaseElementWidget {
     );
   }
 
+  @Widget.Reactive()
+  protected get topCateJustify(): string | undefined {
+    return this.getDsl().topCateJustify;
+  }
+
   @Widget.Reactive()
   protected get showSecondCateAll(): boolean {
-    return BooleanHelper.toBoolean(this.getDsl().showSecondCateAll) || true;
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.getDsl().showSecondCateAll)).orElse(true);
   }
 
   @Widget.Reactive()

package/src/view/search/SearchWidget.ts

@@ -6,7 +6,7 @@ import {
 } from '@oinone/kunlun-engine';
 import { Entity, ViewType } from '@oinone/kunlun-meta';
 import { getRouterInstance } from '@oinone/kunlun-router';
-import { BooleanHelper, NumberHelper } from '@oinone/kunlun-shared';
+import { BooleanHelper, NumberHelper, Optional } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
 import { OioMessage } from '@oinone/kunlun-vue-ui-antd';
 import { isAllInvisible, Widget } from '@oinone/kunlun-vue-widget';
@@ -57,6 +57,21 @@ export class SearchWidget extends BaseSearchWidget {
     return [topCateField, secondCateField];
   }
 
+  @Widget.Reactive()
+  protected get topCateJustify(): string | undefined {
+    return this.getDsl().topCateJustify;
+  }
+
+  @Widget.Reactive()
+  protected get showTopCateAll(): boolean {
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.getDsl().showTopCateAll)).orElse(true);
+  }
+
+  @Widget.Reactive()
+  protected get showSecondCateAll(): boolean {
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.getDsl().showSecondCateAll)).orElse(true);
+  }
+
   public initialize(props) {
     super.initialize(props);
     this.setComponent(DefaultSearch);

package/src/view/search/style/index.scss

@@ -10,10 +10,29 @@ $labelMarginRight: 16px;
     box-shadow: none;
     margin-bottom: var(--oio-margin-md);
     height: auto;
-    &.oio-tabs.ant-tabs-top .ant-tabs-nav .ant-tabs-tab {
-      padding: var(--oio-padding-md) 0;
-      font-size: var(--oio-font-size-lg);
-      font-weight: bold;
+
+    &.oio-cate-search-center {
+      .ant-tabs-nav-wrap {
+        justify-content: center;
+      }
+    }
+
+    &.oio-cate-search-end {
+      .ant-tabs-nav-wrap {
+        justify-content: end;
+      }
+    }
+    &.oio-tabs.ant-tabs-top {
+      .ant-tabs-tab + .ant-tabs-tab {
+        margin-left: 40px;
+      }
+
+      .ant-tabs-nav {
+        .ant-tabs-tab {
+          padding: var(--oio-padding-md) 0;
+          font-size: var(--oio-font-size-lg);
+        }
+      }
     }
     .ant-tabs-content-holder {
       display: none;
@@ -28,9 +47,8 @@ $labelMarginRight: 16px;
         padding: 0 var(--oio-padding-md);
         margin-right: var(--oio-margin-md);
         border-radius: var(--oio-border-radius);
-        background: var(--oio-tag-select-background);
         font-size: var(--oio-font-size);
-        color: var(--oio-text-color);
+        color: var(--oio-text-color-secondary);
         height: var(--oio-height);
         line-height: var(--oio-height);
         font-weight: 400;
@@ -39,10 +57,14 @@ $labelMarginRight: 16px;
           margin-right: 0;
         }
 
-        &:hover,
+        &:hover {
+          background: var(--oio-hover-background-color);
+          color: var(--oio-hover-text-color);
+        }
+
         &.active {
-          color: #fff;
-          background: var(--oio-primary-color);
+          color: var(--oio-selected-text-color);
+          background: var(--oio-selected-background-color);
         }
       }
     }