feat: Use Badge.Ribbon to distinguish the teams to which the knowledge base belongs #2846 (#2891)

### What problem does this PR solve?

feat: Use Badge.Ribbon to distinguish the teams to which the knowledge
base belongs #2846

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

web/src/components/api-service/chat-overview-modal/backend-service-api.tsx

@@ -22,10 +22,10 @@ const BackendServiceApi = ({ show }: { show(): void }) => {
       <Flex gap={8} align="center">
         <b>{t('backendServiceApi')}</b>
         <Paragraph
-          copyable={{ text: `${location.origin}/v1/api/` }}
+          copyable={{ text: `${location.origin}/api/v1/` }}
           className={styles.apiLinkText}
         >
-          {location.origin}/v1/api/
+          {location.origin}/api/v1/
         </Paragraph>
       </Flex>
     </Card>

web/src/interfaces/database/knowledge.ts

@@ -22,6 +22,7 @@ export interface IKnowledge {
   update_time: number;
   vector_similarity_weight: number;
   embd_id: string;
+  nickname?: string;
 }
 
 export interface Parserconfig {

web/src/pages/knowledge/knowledge-card/index.less

@@ -76,3 +76,11 @@
     vertical-align: middle;
   }
 }
+
+.hideRibbon {
+  display: none !important;
+}
+
+.ribbon {
+  top: 4px;
+}

web/src/pages/knowledge/knowledge-card/index.tsx

@@ -6,12 +6,14 @@ import {
   FileTextOutlined,
   UserOutlined,
 } from '@ant-design/icons';
-import { Avatar, Card, Space } from 'antd';
+import { Avatar, Badge, Card, Space } from 'antd';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'umi';
 
 import OperateDropdown from '@/components/operate-dropdown';
 import { useDeleteKnowledge } from '@/hooks/knowledge-hooks';
+import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import styles from './index.less';
 
 interface IProps {
@@ -21,6 +23,7 @@ interface IProps {
 const KnowledgeCard = ({ item }: IProps) => {
   const navigate = useNavigate();
   const { t } = useTranslation();
+  const { data: userInfo } = useFetchUserInfo();
 
   const { deleteKnowledge } = useDeleteKnowledge();
 
@@ -35,6 +38,13 @@ const KnowledgeCard = ({ item }: IProps) => {
   };
 
   return (
+    <Badge.Ribbon
+      text={item.nickname}
+      color={userInfo.nickname === item.nickname ? '#1677ff' : 'pink'}
+      className={classNames(styles.ribbon, {
+        [styles.hideRibbon]: item.permission !== 'team',
+      })}
+    >
       <Card className={styles.card} onClick={handleCardClick}>
         <div className={styles.container}>
           <div className={styles.content}>
@@ -84,6 +94,7 @@ const KnowledgeCard = ({ item }: IProps) => {
           </div>
         </div>
       </Card>
+    </Badge.Ribbon>
   );
 };