feat(知识块管理): 实现chunk关联图片预览显示功能

web/src/components/chunk_image/index.tsx

@@ -1,4 +1,3 @@
-import { api_host } from '@/utils/api';
 import { Popover } from 'antd';
 import classNames from 'classnames';
 
@@ -10,10 +9,12 @@ interface IImage {
 }
 
 const ChunkImage = ({ id, className, ...props }: IImage) => {
+  const imgSrc = id;
+
   return (
     <img
       {...props}
-      src={`${api_host}/document/image/${id}`}
+      src={imgSrc}
       alt=""
       className={classNames(styles.primitiveImg, className)}
     />

web/src/pages/add-knowledge/components/knowledge-chunk/index.less

@@ -94,13 +94,20 @@
 .imagePreviewPane {
   width: 200px;
   min-width: 200px;
-  background-color: var(--colors-background-inverse-weak);
+  background-color: #f0f9ff;
   border-radius: 8px;
   padding: 16px;
   display: flex;
   flex-direction: column;
 
   h4 {
+    text-align: center;
+    margin-bottom: 12px;
+    font-weight: 500;
+  }
+
+  p {
+    text-align: center;
     margin-bottom: 12px;
     font-weight: 500;
   }

web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx

@@ -50,6 +50,11 @@ const Chunk = () => {
   // 获取选中的chunk
   const selectedChunk = data.find((item) => item.chunk_id === selectedChunkId);
 
+  // 获取图片ID，兼容两种字段名
+  const getImageId = (chunk: any) => {
+    return chunk?.image_id || chunk?.img_id;
+  };
+
   const onPaginationChange: PaginationProps['onShowSizeChange'] = (
     page,
     size,
@@ -142,24 +147,22 @@ const Chunk = () => {
           <div className={styles.imagePreviewPane}>
             <h4>{t('关联图片显示区域')}</h4>
             {selectedChunk ? (
-              selectedChunk.img_id ? (
+              getImageId(selectedChunk) ? (
                 <div className={styles.imagePreviewContainer}>
                   <ChunkImage
-                    id={selectedChunk.img_id}
+                    id={getImageId(selectedChunk)}
                     className={styles.fullSizeImage}
                   />
                 </div>
               ) : (
                 <div className={styles.placeholderContainer}>
                   {' '}
-                  {/* 新增的容器，可能需要样式 */}
                   <p>{t('chunk.noImageAssociated', '此区块没有关联图片')}</p>
                 </div>
               )
             ) : (
               <div className={styles.placeholderContainer}>
                 {' '}
-                {/* 新增的容器，可能需要样式 */}
                 <p>
                   {t(
                     'chunk.selectChunkToViewImage',

web/src/pages/knowledge/index.tsx

@@ -1,16 +1,7 @@
 import { useInfiniteFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
-import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
+import { SearchOutlined } from '@ant-design/icons';
-import {
+import { Divider, Empty, Flex, Input, Skeleton, Space, Spin } from 'antd';
-  Button,
-  Divider,
-  Empty,
-  Flex,
-  Input,
-  Skeleton,
-  Space,
-  Spin,
-} from 'antd';
 import { useTranslation } from 'react-i18next';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import { useSaveKnowledge } from './hooks';
@@ -26,7 +17,6 @@ const KnowledgeList = () => {
   const {
     visible,
     hideModal,
-    showModal,
     onCreateOk,
     loading: creatingLoading,
   } = useSaveKnowledge();
@@ -67,15 +57,6 @@ const KnowledgeList = () => {
             onChange={handleInputChange}
             prefix={<SearchOutlined />}
           />
-
-          {/*<Button
-            type="primary"
-            icon={<PlusOutlined />}
-            onClick={showModal}
-            className={styles.topButton}
-          >
-            {t('createKnowledgeBase')}
-          </Button>*/}
         </Space>
       </div>
       <Spin spinning={loading}>