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,55 +38,63 @@ const KnowledgeCard = ({ item }: IProps) => {
   };
 
   return (
-    <Card className={styles.card} onClick={handleCardClick}>
-      <div className={styles.container}>
-        <div className={styles.content}>
-          <Avatar size={34} icon={<UserOutlined />} src={item.avatar} />
-          <OperateDropdown deleteItem={removeKnowledge}></OperateDropdown>
-        </div>
-        <div className={styles.titleWrapper}>
-          <span className={styles.title}>{item.name}</span>
-          <p>{item.description}</p>
-        </div>
-        <div className={styles.footer}>
-          <div className={styles.footerTop}>
-            <div className={styles.bottomLeft}>
-              <FileTextOutlined className={styles.leftIcon} />
-              <span className={styles.rightText}>
-                <Space>
-                  {item.doc_num}
-                  {t('knowledgeList.doc')}
-                </Space>
-              </span>
-            </div>
+    <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}>
+            <Avatar size={34} icon={<UserOutlined />} src={item.avatar} />
+            <OperateDropdown deleteItem={removeKnowledge}></OperateDropdown>
           </div>
-          <div className={styles.bottom}>
-            <div className={styles.bottomLeft}>
-              <CalendarOutlined className={styles.leftIcon} />
-              <span className={styles.rightText}>
-                {formatDate(item.update_time)}
-              </span>
+          <div className={styles.titleWrapper}>
+            <span className={styles.title}>{item.name}</span>
+            <p>{item.description}</p>
+          </div>
+          <div className={styles.footer}>
+            <div className={styles.footerTop}>
+              <div className={styles.bottomLeft}>
+                <FileTextOutlined className={styles.leftIcon} />
+                <span className={styles.rightText}>
+                  <Space>
+                    {item.doc_num}
+                    {t('knowledgeList.doc')}
+                  </Space>
+                </span>
+              </div>
             </div>
-            {/* <Avatar.Group size={25}>
-              <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
-              <a href="https://ant.design">
-                <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
-              </a>
-              <Tooltip title="Ant User" placement="top">
+            <div className={styles.bottom}>
+              <div className={styles.bottomLeft}>
+                <CalendarOutlined className={styles.leftIcon} />
+                <span className={styles.rightText}>
+                  {formatDate(item.update_time)}
+                </span>
+              </div>
+              {/* <Avatar.Group size={25}>
+                <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
+                <a href="https://ant.design">
+                  <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
+                </a>
+                <Tooltip title="Ant User" placement="top">
+                  <Avatar
+                    style={{ backgroundColor: '#87d068' }}
+                    icon={<UserOutlined />}
+                  />
+                </Tooltip>
                 <Avatar
-                  style={{ backgroundColor: '#87d068' }}
-                  icon={<UserOutlined />}
+                  style={{ backgroundColor: '#1677ff' }}
+                  icon={<AntDesignOutlined />}
                 />
-              </Tooltip>
-              <Avatar
-                style={{ backgroundColor: '#1677ff' }}
-                icon={<AntDesignOutlined />}
-              />
-            </Avatar.Group> */}
+              </Avatar.Group> */}
+            </div>
           </div>
         </div>
-      </div>
-    </Card>
+      </Card>
+    </Badge.Ribbon>
   );
 };