feat(知识块管理): 添加知识块图片前端预览组件

web/src/components/chunk_image/index.less

@@ -0,0 +1,15 @@
+.primitiveImg {
+  display: inline-block;
+  max-height: 100px;
+}
+
+.image {
+  max-width: 100px;
+  object-fit: contain;
+}
+
+.imagePreview {
+  display: block;
+  max-width: 45vw;
+  max-height: 40vh;
+}

web/src/components/chunk_image/index.tsx

@@ -0,0 +1,36 @@
+import { api_host } from '@/utils/api';
+import { Popover } from 'antd';
+import classNames from 'classnames';
+
+import styles from './index.less';
+
+interface IImage {
+  id: string;
+  className: string;
+}
+
+const ChunkImage = ({ id, className, ...props }: IImage) => {
+  return (
+    <img
+      {...props}
+      src={`${api_host}/document/image/${id}`}
+      alt=""
+      className={classNames(styles.primitiveImg, className)}
+    />
+  );
+};
+
+export default ChunkImage;
+
+export const ImageWithPopover = ({ id }: { id: string }) => {
+  return (
+    <Popover
+      placement="left"
+      content={
+        <ChunkImage id={id} className={styles.imagePreview}></ChunkImage>
+      }
+    >
+      <ChunkImage id={id} className={styles.image}></ChunkImage>
+    </Popover>
+  );
+};

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

@@ -90,3 +90,32 @@
 
   cursor: pointer;
 }
+
+.imagePreviewPane {
+  width: 200px;
+  min-width: 200px;
+  background-color: var(--colors-background-inverse-weak);
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+
+  h4 {
+    margin-bottom: 12px;
+    font-weight: 500;
+  }
+
+  .imagePreviewContainer {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    .fullSizeImage {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+    }
+  }
+}

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

@@ -1,3 +1,4 @@
+import ChunkImage from '@/components/chunk_image';
 import { useFetchNextChunkList, useSwitchChunk } from '@/hooks/chunk-hooks';
 import type { PaginationProps } from 'antd';
 import { Divider, Flex, Pagination, Space, Spin, message } from 'antd';
@@ -46,6 +47,9 @@ const Chunk = () => {
     documentId,
   } = useUpdateChunk();
 
+  // 获取选中的chunk
+  const selectedChunk = data.find((item) => item.chunk_id === selectedChunkId);
+
   const onPaginationChange: PaginationProps['onShowSizeChange'] = (
     page,
     size,
@@ -134,6 +138,37 @@ const Chunk = () => {
         ></ChunkToolBar>
         <Divider></Divider>
         <Flex flex={1} gap={'middle'}>
+          {/* 左侧图片预览窗格 */}
+          <div className={styles.imagePreviewPane}>
+            <h4>{t('关联图片显示区域')}</h4>
+            {selectedChunk ? (
+              selectedChunk.img_id ? (
+                <div className={styles.imagePreviewContainer}>
+                  <ChunkImage
+                    id={selectedChunk.img_id}
+                    className={styles.fullSizeImage}
+                  />
+                </div>
+              ) : (
+                <div className={styles.placeholderContainer}>
+                  {' '}
+                  {/* 新增的容器，可能需要样式 */}
+                  <p>{t('chunk.noImageAssociated', '此区块没有关联图片')}</p>
+                </div>
+              )
+            ) : (
+              <div className={styles.placeholderContainer}>
+                {' '}
+                {/* 新增的容器，可能需要样式 */}
+                <p>
+                  {t(
+                    'chunk.selectChunkToViewImage',
+                    '请选择一个块以查看其图片',
+                  )}
+                </p>
+              </div>
+            )}
+          </div>
           <Flex
             vertical
             className={isPdf ? styles.pagePdfWrapper : styles.pageWrapper}