Skip to content

fix: In the permission settings, the knowledge base list does not distinguish between knowledge base types, and all are marked with the icon of the general knowledge base. #2806

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
wxg0103 merged 1 commit into from
Apr 7, 2025
Merged

fix: In the permission settings, the knowledge base list does not distinguish between knowledge base types, and all are marked with the icon of the general knowledge base. #2806

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 4 additions & 2 deletions apps/setting/sql/get_member_permission.sql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ FROM
"id",
"name",
'DATASET' AS "type",
user_id
user_id,
"type" AS "icon"
FROM
dataset
WHERE
Expand All @@ -17,7 +18,8 @@ FROM
"id",
"name",
'APPLICATION' AS "type",
user_id
user_id,
"icon" AS "icon"
FROM
application
WHERE
Expand Down
36 changes: 32 additions & 4 deletions ui/src/views/team/component/PermissionSetting.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,41 @@
<template #default="{ row }">
<div class="flex align-center">
<AppAvatar
v-if="isApplication"
:name="row.name"
pinyinColor
v-if="isApplication && isAppIcon(row?.icon)"
style="background: none"
class="mr-12"
shape="square"
:size="24"
>
<img :src="row?.icon" alt="" />
</AppAvatar>

<AppAvatar
v-else-if="row?.name && isApplication"
:name="row?.name"
pinyinColor
shape="square"
:size="24"
class="mr-12"
/>
<AppAvatar v-else-if="isDataset" class="mr-12 avatar-blue" shape="square" :size="24">
<AppAvatar
v-if="row.icon === '1' && isDataset"
class="mr-8 avatar-purple"
shape="square"
:size="24"
>
<img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
</AppAvatar>
<AppAvatar
v-else-if="row.icon === '2' && isDataset"
class="mr-8 avatar-purple"
shape="square"
:size="24"
style="background: none"
>
<img src="@/assets/logo_lark.svg" style="width: 100%" alt="" />
</AppAvatar>
<AppAvatar v-else-if="isDataset" class="mr-8 avatar-blue" shape="square" :size="24">
<img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
</AppAvatar>
<auto-tooltip :content="row?.name">
Expand Down Expand Up @@ -85,6 +112,7 @@
<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { TeamEnum } from '@/enums/team'
import { isAppIcon } from '@/utils/application'

const props = defineProps({
data: {
Copy link
Copy Markdown
Contributor Author

@shaohuzhang1 shaohuzhang1 Apr 7, 2025

Choose a reason for hiding this comment

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

There are several issues and optimizations that can be addressed in the provided code:

  1. Logical Error with Avatar Styling: The <AppAvatar> component has incorrect styling conditions.

    • style="background: none" should be inside the <AppAvatar> tag, not added to the class.
    • Ensure that isAppIcon(row?.icon) correctly returns true or false.

  2. Redundant Code Blocks: Remove duplicate conditional blocks where an app icon (row.icon) exists but no application type (isApplication) matches.

  3. Simplified SVG Source for Icons: Avoid adding inline styles like style="width: 58%" and style="width: 100%". Instead, use Vue's CSS classes effectively.

  4. Potential Missing Import Statements: Ensure that import { isAppIcon } includes all necessary function implementations or imports (if available).

Here’s the updated code snippet incorporating these corrections:

 <template #default="{ row }">
   <div class="flex align-center">
     <AppAvatar
       v-if="isApplication && isAppIcon(row?.icon)"
       class="mr-12"
       shape="square"
       :size="24"
     >
       <img :src="row?.icon" alt="" />
     </AppAvatar>

     <AppAvatar
       v-else-if="row?.name && isApplication"
       :name="row?.name"
       pinyinColor
       shape="square"
       :size="24"
       class="mr-12"
     />

     <AppAvatar
       v-if="row?.icon === '1'"
       class="mr-8 avatar-purple"
       shape="square"
       :size="24"
     >
       <img src="@/assets/icon_web.svg" alt="" />
     </AppAvatar>
     <AppAvatar
       v-else-if="row?.icon === '2'"
       class="mr-8 avatar-purple"
       shape="square"
       :size="24"
     >
       <img src="@/assets/logo_lark.svg" alt="" />
     </AppAvatar>
     <AppAvatar v-else-if="isDataset" class="mr-8 avatar-blue" shape="square" :size="24">
       <img src="@/assets/icon_document.svg" alt="" />
     </AppAvatar>

     <auto-tooltip :content="row?.name">

And ensure you have the correct implementation of isAppIcon if needed:

// utils/application.ts
export const isAppIcon = (icon?: string): boolean => {
  // Example logic, adjust according to actual requirements
  return ["app-id1", "app-id2"].includes(icon);
};

By making these changes and ensuring proper usage of dependencies and functions, the component should work as intended without any visual discrepancies due to wrong styling attributes.

Expand Down