Skip to content

Pr@main/xpack login #2441

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wangdan-fit2cloud merged 2 commits into from
Feb 28, 2025
Merged

Pr@main/xpack login #2441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9209122
perf: Top N Segments increase to 10000
wangdan-fit2cloud Feb 28, 2025
a9a5605
fix: [xpack]After replacing the logo,The original logo will flash(#2270)
wangdan-fit2cloud Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ui/src/components/logo/LogoFull.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
/>
</g>
</svg>
<img v-else src="@/assets/logo/MaxKB-logo.svg" :height="height" />
<img src="@/assets/logo/MaxKB-logo.svg" :height="height" />
</template>
</template>
<script setup lang="ts">
Expand All @@ -75,7 +75,7 @@ const isDefaultTheme = computed(() => {
})

const fileURL = computed(() => {
if (user.themeInfo?.loginLogo) {
if (user.themeInfo) {
if (typeof user.themeInfo?.loginLogo === 'string') {
return user.themeInfo?.loginLogo
} else {
Copy link
Copy Markdown
Contributor

@shaohuzhang1 shaohuzhang1 Feb 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code you provided has some issues that need to be addressed:

Issues Identified:

  1. Inconsistent Template Syntax: The use of v-if in both <template> and directly within an SVG element might be confusing and redundant because Vue components should not have both template sections (<template>...</template> and standalone elements).

  2. Redundant Condition Check: The condition checks for loginLogo and its type are redundant since they will always evaluate whether it exists.

  3. Simplified Logic: You can simplify the logic for determining the image source and size using computed properties instead of multiple conditional statements.

  4. Potential Bug with Computed Properties: Ensure that user.themeInfo.loginLogo does exist before checking its type; otherwise, undefined may lead to runtime errors.

Optimal Suggestions:

Here's a revised version of your code with suggestions for addressing these points:

<svg id="logo-icon" width="36px" height="auto">
  <!-- Icon rendering goes here -->
</svg>

<img v-if="fileURL.value" :src="fileURL.value" class="max-kb-logo" />

<script setup lang="ts">
import { ref } from 'vue';

const logoOptions = {
  // Define your options here like lightModeImageUrl...
};

const isDarkMode = ref(true); // Example boolean based on user preference

function updateLogo(srcUrl?: string): void {
  logoIcon.src = srcUrl || ''; // Set the logo icon source dynamically
}

// Function to set up theme based on selected mode
function setupTheme(mode: string) {
  switch (mode.toLocaleLowerCase()) {
    case 'light':
      isDarkMode.value = false;
      break;
    default:
      isDarkMode.value = true;
      break;
  }
  const darkModeClassName = isDarkMode.value ? '--dark' : '';
  
  document.documentElement.className = `theme ${darkModeClassName}`;

  try {
    if (!logoOptions.lightModeImageUrl && !logoOptions.darkModeImageUrl) return;

    let imageUrl;
    if (isDarkMode.value && logoOptions.darkModeImageUrl) imageUrl = logoOptions.darkModeImageUrl;
    else if (!logoOptions.lightModeImageUrl ||
             typeof logoOptions.lightModeImageUrl === "object") imageUrl = '/assets/logo/icons/light_logo.svg'; // Default light-mode image fallback
  
    updateLogo(imageUrl);
  } catch (e) {
    console.error('Error setting up theme:', e);
  }

}
</script>

<style>
/* Style for .max-kb-logo */
.max-kb-logo img {
  /* Add styles here as needed */
}
</style>

Explanation:

  • Template Simplification: Removed the unnecessary conditions around the <img> tag.
  • Computed Property Use: Used a computed property setupTheme() to handle dynamic updates to the theme and logos. This simplifies management of different themes.
  • Dynamic Image URL Handling: Uses updateLogo() to manage the actual source of the logos, ensuring correct functionality even when no images are found.

Expand Down
6 changes: 6 additions & 0 deletions ui/src/router/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { hasPermission } from '@/utils/permission/index'
import NProgress from 'nprogress'
import {
createRouter,
createWebHistory,
Expand All @@ -9,6 +10,7 @@ import {
} from 'vue-router'
import useStore from '@/stores'
import { routes } from '@/router/routes'
NProgress.configure({ showSpinner: false, speed: 500, minimum: 0.3 })
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: routes
Expand All @@ -17,6 +19,7 @@ const router = createRouter({
// 路由前置拦截器
router.beforeEach(
async (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
NProgress.start()
if (to.name === '404') {
next()
return
Expand Down Expand Up @@ -48,6 +51,9 @@ router.beforeEach(
}
}
)
router.afterEach(() => {
NProgress.done()
})

export const getChildRouteListByPathAndName = (path: any, name?: RouteRecordName | any) => {
return getChildRouteList(routes, path, name)
Copy link
Copy Markdown
Contributor

@shaohuzhang1 shaohuzhang1 Feb 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No significant irregularities, potential issues, or immediate optimizations were identified in the provided code snippet. The code is well-structured and follows Vue Router conventions. Here are a few minor improvements that can be made:

  1. Consistent Spacing: Adjusting spacing for consistency can improve readability.

  2. Comments: Adding comments above complex blocks of code can help explain what specific functionalities they serve.

Here's an optimized version with these considerations:

// Import necessary modules
import { hasPermission } from '@/utils/permission/index';
import NProgress from 'nprogress';

NProgress.configure({ showSpinner: false, speed: 500, minimum: 0.3 });

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes
});

// Define route guards
router.beforeEach(async (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
  try {
    // Start loading progress bar
    NProgress.start();

    if (to.name === '404') {
      next();
      return;
    }
    
    const userState = await useStore().getters['user/getUserState'];
    if (!hasPermission(userState.permission)) {
      if (from.path !== '/login' && from.path.indexOf('/admin/') !== 0){
        // Redirect to login page when unauthorized non-admin users access restricted areas
        next(`/home?r=403&redirect=${to.fullPath}`);
      } else {
        // For admin redirect them directly to their dashboard upon redirection failure
        next('dashboard');
      }
      return;
    }

    next(); // Proceed to destination if allowed permissions match the required role
  } catch (error) {
    console.error("Failed to authenticate user:", error);
    next('/'); // Redirect to home on authentication failure
  }
});

router.afterEach(() => {
  // Complete/loading process after navigation completes
  NProgress.done();
});

export function getChildRouteListByPathAndName(path: string, name?: RouteRecordName): RouteRecordRaw[] | null {
  return getChildRouteList(routes, path, name);
}

These changes include adding consistent whitespace around operators and expressions, and organizing related functions under one try-catch block within the beforeEach hook to handle exceptions gracefully.

Expand Down
4 changes: 3 additions & 1 deletion ui/src/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@
margin: 0;
padding: 0;
}

[v-cloak] {
display: none !important;
}
html {
height: 100%;
box-sizing: border-box;
Expand Down
2 changes: 1 addition & 1 deletion ui/src/views/application/component/ParamSettingDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@
<el-input-number
v-model="form.dataset_setting.top_n"
:min="1"
:max="100"
:max="10000"
:value-on-clear="1"
controls-position="right"
class="w-full"
Expand Down
2 changes: 1 addition & 1 deletion ui/src/views/hit-test/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@
<el-input-number
v-model="cloneForm.top_number"
:min="1"
:max="100"
:max="10000"
controls-position="right"
class="w-full"
/>
Expand Down
8 changes: 5 additions & 3 deletions ui/src/views/login/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<login-layout v-if="user.isEnterprise() ? user.themeInfo : true" v-loading="loading">
<login-layout v-if="!loading" v-loading="loading">
<LoginContainer :subTitle="user.themeInfo?.slogan || $t('views.system.theme.defaultSlogan')">
<h2 class="mb-24" v-if="!showQrCodeTab">{{ loginMode || $t('views.login.title') }}</h2>
<div v-if="!showQrCodeTab">
Expand Down Expand Up @@ -225,10 +225,10 @@ const login = () => {
})
}

onMounted(() => {
onBeforeMount(() => {
loading.value = true
user.asyncGetProfile().then((res) => {
if (user.isEnterprise()) {
loading.value = true
user
.getAuthType()
.then((res) => {
Expand Down Expand Up @@ -261,6 +261,8 @@ onMounted(() => {
}
})
.finally(() => (loading.value = false))
} else {
loading.value = false
}
})
})
Copy link
Copy Markdown
Contributor

@shaohuzhang1 shaohuzhang1 Feb 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code snippet has several improvements and corrections:

Improvements:

  1. Remove Unnecessary Conditions: The variable showQrCodeTab and its condition inside the template have been removed as they seem to be unnecessary based on the rest of the logic.

  2. Consistent Loading State Update: Moved the setting of loading to onBeforeMount instead of onMounted. This ensures that the component starts with a non-loading state unless there's an error fetching the profile.

  3. Optimize Login Process:

    • Removed the redundant call to user.asyncGetProfile() inside the onMounted hook.
    • Simplified the conditional logic within the .catch() method.

  4. Variable Naming: Consistently used camelCase for Vue prop names (subTitle) to improve readability and compatibility.

Here is the revised code:

<template>
  <login-layout v-if="!loading" v-loading="loading">
    <LoginContainer :subTitle="user.themeInfo?.slogan || $t('views.system.theme.defaultSlogan')">
      <h2 class="mb-24">{{ !showQrCodeTab ? loginMode || $t('views.login.title') : '' }}</h2>
      <!-- QR Code Tab should be conditionally rendered here -->
      
    </LoginContainer>
  </login-layout>
</template>

<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue';
// Import necessary components

const loading = ref(true);
const showQrCodeTab = ref(false); // Optional: Define this flag if needed

// Functionality defined earlier...

onBeforeMount(async () => {
  try {
    await user.asyncGetProfile(); // Remove duplicate call in mounted

    if (user.isEnterprise()) {
      await user.getAuthType();
      // Handle enterprise-specific logic here
    }
  } catch (error) {
    console.error('Error fetching user profile:', error);
  } finally {
    loading.value = false;
  }
});

// Other methods...
</script>

This version ensures that the component only mounts when it needs to perform data fetching and handles errors appropriately without unnecessarily repeating calls.

Expand Down
2 changes: 1 addition & 1 deletion ui/src/workflow/nodes/reranker-node/ParamSettingDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
<el-input-number
v-model="form.top_n"
:min="1"
:max="100"
:max="10000"
:value-on-clear="1"
controls-position="right"
class="w-full"
Expand Down