From 1cde74f30b9b64fe88681003e55644e8d4b9a126 Mon Sep 17 00:00:00 2001
From: zstar <65890619+zstar1003@users.noreply.github.com>
Date: Fri, 16 May 2025 14:02:54 +0800
Subject: [PATCH 1/3] =?UTF-8?q?"chore(=E5=BC=80=E5=8F=91=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?):=20=E5=85=B3=E9=97=ADReact=20Query=E5=BC=80=E5=8F=91=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/app.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/src/app.tsx b/web/src/app.tsx
index c00c245..09e2b73 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -1,6 +1,5 @@
 import i18n from '@/locales/config';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { App, ConfigProvider, ConfigProviderProps, theme } from 'antd';
 import pt_BR from 'antd/lib/locale/pt_BR';
 import deDE from 'antd/locale/de_DE';
@@ -68,7 +67,7 @@ function Root({ children }: React.PropsWithChildren) {
       >
         <App>{children}</App>
       </ConfigProvider>
-      <ReactQueryDevtools buttonPosition={'top-left'} />
+      {/* <ReactQueryDevtools buttonPosition={'top-left'} /> */}
     </>
   );
 }

From 4accf90791748a5a3c1b5244b7a358329ec58b94 Mon Sep 17 00:00:00 2001
From: zstar <65890619+zstar1003@users.noreply.github.com>
Date: Fri, 16 May 2025 16:12:07 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat(=E7=9F=A5=E8=AF=86=E5=9D=97=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86):=20=E6=B7=BB=E5=8A=A0=E7=9F=A5=E8=AF=86=E5=9D=97?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=89=8D=E7=AB=AF=E9=A2=84=E8=A7=88=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/chunk_image/index.less     | 15 ++++++++
 web/src/components/chunk_image/index.tsx      | 36 +++++++++++++++++++
 .../components/knowledge-chunk/index.less     | 29 +++++++++++++++
 .../components/knowledge-chunk/index.tsx      | 35 ++++++++++++++++++
 4 files changed, 115 insertions(+)
 create mode 100644 web/src/components/chunk_image/index.less
 create mode 100644 web/src/components/chunk_image/index.tsx

diff --git a/web/src/components/chunk_image/index.less b/web/src/components/chunk_image/index.less
new file mode 100644
index 0000000..6aff0bd
--- /dev/null
+++ b/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;
+}
diff --git a/web/src/components/chunk_image/index.tsx b/web/src/components/chunk_image/index.tsx
new file mode 100644
index 0000000..13c22c1
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/index.less b/web/src/pages/add-knowledge/components/knowledge-chunk/index.less
index a41a35a..617f479 100644
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/index.less
+++ b/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;
+    }
+  }
+}
diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx
index 6bce601..52967f5 100644
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx
+++ b/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}

From 0fb970667bdcbf4118d12e683962fd617d848dc6 Mon Sep 17 00:00:00 2001
From: zstar <65890619+zstar1003@users.noreply.github.com>
Date: Fri, 16 May 2025 17:15:33 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat(=E7=9F=A5=E8=AF=86=E5=9D=97=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86):=20=E5=AE=9E=E7=8E=B0chunk=E5=85=B3=E8=81=94?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88=E6=98=BE=E7=A4=BA=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/chunk_image/index.tsx      |  5 ++--
 .../components/knowledge-chunk/index.less     |  9 +++++++-
 .../components/knowledge-chunk/index.tsx      | 11 +++++----
 web/src/pages/knowledge/index.tsx             | 23 ++-----------------
 4 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/web/src/components/chunk_image/index.tsx b/web/src/components/chunk_image/index.tsx
index 13c22c1..c1ddca9 100644
--- a/web/src/components/chunk_image/index.tsx
+++ b/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)}
     />
diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/index.less b/web/src/pages/add-knowledge/components/knowledge-chunk/index.less
index 617f479..0867737 100644
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/index.less
+++ b/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;
   }
diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx
index 52967f5..78f8152 100644
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx
+++ b/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',
diff --git a/web/src/pages/knowledge/index.tsx b/web/src/pages/knowledge/index.tsx
index 6991a70..a6b5857 100644
--- a/web/src/pages/knowledge/index.tsx
+++ b/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 {
-  Button,
-  Divider,
-  Empty,
-  Flex,
-  Input,
-  Skeleton,
-  Space,
-  Spin,
-} from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import { 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}>