代码&交互整理

frontend/src/app/knowledge/(desktop)/features/KnowledgeCard.tsx

@@ -1,5 +1,6 @@
-import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { Card, Skeleton } from 'antd';
+import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 
 const { Meta } = Card;
@@ -8,32 +9,27 @@ interface KnowLedgeCardProps {
   intro: string;
   name: string;
 }
-const App: React.FC = (props: KnowLedgeCardProps) => {
+const KnowledgeCard: React.FC = (props: KnowLedgeCardProps) => {
   const [loading, setLoading] = useState(false);
   const { name, intro } = props;
-  const onChange = (checked: boolean) => {
+  const router = useRouter();
-    setLoading(!checked);
+  const handleCardEditClick = () => {
+    router.push('/knowledge/1/base');
   };
-
   return (
     <Card
       actions={[
-        <SettingOutlined key="setting" />,
+        <EditOutlined key="edit" onClick={handleCardEditClick} />,
-        <EditOutlined key="edit" />,
+        <DeleteOutlined key="ellipsis" />,
-        <EllipsisOutlined key="ellipsis" />,
       ]}
       bordered={false}
       style={{ marginTop: 16, width: 300 }}
     >
       <Skeleton active avatar loading={loading}>
-        <Meta
+        <Meta description={intro} title={name} />
-          // avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />}
-          description={intro}
-          title={name}
-        />
       </Skeleton>
     </Card>
   );
 };
 
-export default App;
+export default KnowledgeCard;

frontend/src/app/knowledge/(desktop)/features/KnowledgeList.tsx

@@ -3,14 +3,13 @@ import React, { memo } from 'react';
 import KnowledgeCard from './KnowledgeCard';
 
 const list = [
-  { intro: 'aaaaa', name: '321' },
+  { intro: '知识库简介', name: '知识库名称' },
-  { intro: 'aaaaa', name: '321' },
+  { intro: '知识库简介', name: '知识库名称' },
-  { intro: 'aaaaa', name: '321' },
+  { intro: '知识库简介', name: '知识库名称' },
-  { intro: 'aaaaa', name: '321' },
+  { intro: '知识库简介', name: '知识库名称' },
-  { intro: 'aaaaa', name: '321' },
+  { intro: '知识库简介', name: '知识库名称' },
-  { intro: 'aaaaa', name: '321' },
+  { intro: '知识库简介', name: '知识库名称' },
-  { intro: 'aaaaa', name: '321' },
+  { intro: '知识库简介', name: '知识库名称' },
-  { intro: 'aaaaa', name: '321' },
 ];
 
 const RenderList = memo(() =>

frontend/src/app/knowledge/(desktop)/features/ModalCreateKnowledge.tsx

@@ -4,25 +4,6 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-// export const imageTypeOptions: SegmentedProps['options'] = [
-//   {
-//     label: 'JPG',
-//     value: ImageType.JPG,
-//   },
-//   {
-//     label: 'PNG',
-//     value: ImageType.PNG,
-//   },
-//   {
-//     label: 'SVG',
-//     value: ImageType.SVG,
-//   },
-//   {
-//     label: 'WEBP',
-//     value: ImageType.WEBP,
-//   },
-// ];
-
 const DEFAULT_FIELD_VALUE = {
   // imageType: ImageType.JPG,
   withBackground: true,
@@ -30,8 +11,10 @@ const DEFAULT_FIELD_VALUE = {
   withPluginInfo: false,
   withSystemRole: false,
 };
-
+interface ModalCreateKnowledgeProps extends ModalProps {
-const CreateKnowledgeBase = memo<ModalProps>(({ onClose, open }) => {
+  toggleModal: (open: boolean) => void;
+}
+const CreateKnowledgeBase = memo<ModalCreateKnowledgeProps>(({ toggleModal, open }) => {
   const { t } = useTranslation('chat');
 
   return (
@@ -39,8 +22,8 @@ const CreateKnowledgeBase = memo<ModalProps>(({ onClose, open }) => {
       allowFullscreen
       centered={false}
       maxHeight={false}
-      onCancel={onClose}
+      onCancel={() => toggleModal(false)}
-      onOk={onClose}
+      onOk={() => toggleModal(false)}
       open={open}
       title="创建知识库"
     >

frontend/src/app/knowledge/(desktop)/index.tsx

@@ -3,36 +3,29 @@
 import { FloatButton } from 'antd';
 import { Plus } from 'lucide-react';
 import dynamic from 'next/dynamic';
-import { memo, useEffect, useState } from 'react';
+import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ResponsiveIndex from '@/components/ResponsiveIndex';
-
 import KnowledgeCardList from './features/KnowledgeList';
 // import CreateKnowledgeBase from './features/createKnowledgeBase';
 import Layout from './layout.desktop';
 
-const CreateKnowledgeBase = dynamic(() => import('./features/CreateKnowledgeBase'));
+const ModalCreateKnowledge = dynamic(() => import('./features/ModalCreateKnowledge'));
-// const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
 
 const DesktopPage = memo(() => {
   const [showModal, setShowModal] = useState(false);
-  useEffect(() => {
-    setShowModal(true);
-  }, []);
-  const onClose = () => setShowModal(false);
   return (
-    <ResponsiveIndex Mobile={() => <div>321</div>}>
+    <>
       <Layout>
         <Flexbox gap={20} horizontal justify="flex-start" wrap="wrap">
           <KnowledgeCardList />
-          <CreateKnowledgeBase onClose={onClose} open={showModal} />
         </Flexbox>
         <FloatButton icon={<Plus />} onClick={() => setShowModal(true)}>
           新建知识库
         </FloatButton>
       </Layout>
-    </ResponsiveIndex>
+      <ModalCreateKnowledge open={showModal} toggleModal={setShowModal} />
+    </>
   );
 });
 export default DesktopPage;

frontend/src/app/knowledge/[id]/base/[fileId]/features/ModalSegment.tsx

@@ -2,9 +2,14 @@ import { Input, Modal } from 'antd';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
-const ModalSegment = memo(() => {
+type ModalSegmentProps = {
+  open: boolean;
+  toggleOpen: (open: boolean) => void;
+};
+
+const ModalSegment = memo<ModalSegmentProps>(({ open, toggleOpen }) => {
   return (
-    <Modal okText="确认修改" open title="知识片段">
+    <Modal okText="确认修改" onCancel={() => toggleOpen(false)} open={open} title="知识片段">
       <Flexbox padding={20}>
         <Center>
           <Input.TextArea autoSize={{ maxRows: 15, minRows: 10 }} style={{ width: 600 }} />

frontend/src/app/knowledge/[id]/base/[fileId]/page.tsx

@@ -2,9 +2,10 @@
 
 import { Card, List } from 'antd';
 import { createStyles } from 'antd-style';
+import dynamic from 'next/dynamic';
 import React, { memo, useState } from 'react';
 
-import ModalSegment from './features/ModalSegment';
+const ModalSegment = dynamic(() => import('./features/ModalSegment'));
 
 const data = [
   {
@@ -42,7 +43,11 @@ const useStyle = createStyles(({ css, token }) => ({
 
 const App = memo(() => {
   const { styles } = useStyle();
-  const [isShowModal, setModal] = useState();
+  const [isModalOpen, toggleOpen] = useState(false);
+  console.log(toggleOpen);
+  const handleSegmentCardClick = () => {
+    toggleOpen(true);
+  };
   return (
     <>
       <List
@@ -55,14 +60,14 @@ const App = memo(() => {
         }}
         renderItem={() => (
           <List.Item>
-            <Card className={styles.card} onClick={() => console.log(1)}>
+            <Card className={styles.card} onClick={handleSegmentCardClick}>
               Card content
             </Card>
           </List.Item>
         )}
         size="large"
       />
-      <ModalSegment />
+      <ModalSegment open={isModalOpen} toggleOpen={toggleOpen} />
     </>
   );
 });

frontend/src/app/knowledge/[id]/base/features/ModalAddFile.tsx

@@ -5,6 +5,11 @@ import React, { memo } from 'react';
 
 const { Dragger } = Upload;
 
+type ModalAddFileProps = {
+  open: boolean;
+  setModalOpen: (open: boolean) => void;
+};
+
 const props: UploadProps = {
   action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
   multiple: true,
@@ -25,9 +30,9 @@ const props: UploadProps = {
   },
 };
 
-const ModalAddFile = memo(() => {
+const ModalAddFile = memo<ModalAddFileProps>(({ open, setModalOpen }) => {
   return (
-    <Modal open title="添加文件">
+    <Modal onCancel={() => setModalOpen(false)} open={open} title="添加文件">
       <Dragger {...props}>
         <p className="ant-upload-drag-icon">
           <InboxOutlined />

frontend/src/app/knowledge/[id]/base/page.tsx

@@ -2,11 +2,13 @@
 
 import { Button, Table } from 'antd';
 import type { TableColumnsType } from 'antd';
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
 import React, { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ModalAddFile from './features/ModalAddFile';
+// import ModalAddFile from './features/ModalAddFile';
-
+const ModalAddFile = dynamic(() => import('./features/ModalAddFile'));
 interface DataType {
   address: string;
   age: number;
@@ -14,94 +16,82 @@ interface DataType {
   name: string;
 }
 
-const columns: TableColumnsType<DataType> = [
-  {
-    dataIndex: 'index',
-    title: '序号',
-  },
-  {
-    dataIndex: 'name',
-    title: '文档名称',
-  },
-  {
-    dataIndex: 'loader',
-    title: '文档加载器',
-  },
-  {
-    dataIndex: 'loader',
-    title: '文档加载器',
-  },
-  {
-    dataIndex: 'splitter',
-    title: '分词器',
-  },
-  {
-    dataIndex: 'source',
-    title: '源文件',
-  },
-  {
-    dataIndex: 'vector',
-    title: '向量库',
-  },
-];
-
 const data: DataType[] = [];
 for (let i = 0; i < 46; i++) {
   data.push({
     address: `London, Park Lane no. ${i}`,
     age: 32,
+    index: i,
     key: i,
     name: `Edward King ${i}`,
   });
 }
 
-const App: React.FC = () => {
+const App: React.FC<{ params }> = ({ params }) => {
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
   const [loading, setLoading] = useState(false);
-
+  const [isShowModal, setModal] = useState(false);
-  const start = () => {
-    setLoading(true);
-    // ajax request after empty completing
-    setTimeout(() => {
-      setSelectedRowKeys([]);
-      setLoading(false);
-    }, 1000);
-  };
-
   const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
     console.log('selectedRowKeys changed:', newSelectedRowKeys);
     setSelectedRowKeys(newSelectedRowKeys);
   };
-
+  const columns: TableColumnsType<DataType> = [
+    {
+      dataIndex: 'index',
+      title: '序号',
+    },
+    {
+      dataIndex: 'name',
+      render: (text) => <Link href={`/knowledge/${params.id}/base/2`}>{text}</Link>,
+      title: '文档名称',
+    },
+    {
+      dataIndex: 'loader',
+      title: '文档加载器',
+    },
+    {
+      dataIndex: 'loader',
+      title: '文档加载器',
+    },
+    {
+      dataIndex: 'splitter',
+      title: '分词器',
+    },
+    {
+      dataIndex: 'source',
+      title: '源文件',
+    },
+    {
+      dataIndex: 'vector',
+      title: '向量库',
+    },
+  ];
   const rowSelection = {
     onChange: onSelectChange,
     selectedRowKeys,
   };
   const hasSelected = selectedRowKeys.length > 0;
-
+  console.log(params);
   return (
     <>
       <Flexbox width={'100%'}>
         <Flexbox direction="horizontal" justify="space-between" style={{ marginBottom: 16 }}>
           <Flexbox direction="horizontal" gap={20}>
-            <Button disabled={!hasSelected} loading={loading} onClick={start} type="default">
+            <Button disabled={!hasSelected} loading={loading} type="default">
               下载选中文档
             </Button>
-            <Button disabled={!hasSelected} loading={loading} onClick={start} type="default">
+            <Button disabled={!hasSelected} loading={loading} type="default">
               重新添加至向量库
             </Button>
-            <Button disabled={!hasSelected} loading={loading} onClick={start} type="default">
+            <Button disabled={!hasSelected} loading={loading} type="default">
               向量库删除
             </Button>
-            <Button disabled={!hasSelected} loading={loading} onClick={start} type="default">
+            <Button disabled={!hasSelected} loading={loading} type="default">
               从知识库中删除
             </Button>
-            <span style={{ marginLeft: 8 }}>
-              {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
-            </span>
           </Flexbox>
           <div>
-            <Button loading={loading} onClick={start} type="primary">
+            <Button loading={loading} onClick={() => setModal(true)} type="primary">
               添加文件
             </Button>
           </div>
@@ -110,10 +100,11 @@ const App: React.FC = () => {
           columns={columns}
           dataSource={data}
           rowSelection={rowSelection}
+          size="middle"
           style={{ width: '100%' }}
         />
       </Flexbox>
-      <ModalAddFile />
+      <ModalAddFile open={isShowModal} setModalOpen={setModal} />
     </>
   );
 };

frontend/src/app/knowledge/[id]/config/page.tsx

@@ -1,53 +1,58 @@
 'use client';
 
 import { Form, type ItemGroup } from '@lobehub/ui';
-import { Form as AntForm, Input, InputNumber, Slider, Switch } from 'antd';
+import { Form as AntForm, Button, Input, InputNumber, Switch } from 'antd';
 import { Settings } from 'lucide-react';
 import { memo, useCallback } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 
 const KnowledgeBaseConfig = memo(() => {
   const [form] = AntForm.useForm();
 
-  const handleConfigChange = useCallback(() => {
+  const handleConfigChange = useCallback(async () => {
-    console.log(321);
+    try {
-  }, []);
+      const values = await form.validateFields();
+      console.log('Success:', values);
+    } catch (errorInfo) {
+      console.log('Failed:', errorInfo);
+    }
+  }, [form]);
   const system: ItemGroup = {
     children: [
       {
         children: <Input placeholder={'请为知识库命名'} />,
-        desc: '名称',
         label: '知识库名称',
         name: 'name',
+        rules: [{ message: '请输入知识库名称', required: true }],
       },
       {
         children: <Input.TextArea placeholder={'请简单介绍你的知识库'} />,
-        desc: '简介',
         label: '知识库简介',
         name: 'intro',
+        rules: [{ message: '请输入知识库简介', required: true }],
       },
       {
         children: <InputNumber placeholder={'请输入数字'} style={{ width: 200 }} />,
-        desc: '321',
         label: '单段文本最大长度',
         name: 'paragraphMaxLength',
+        rules: [{ message: '请输入知识库名称', required: true }],
       },
       {
         children: <InputNumber placeholder={'请输入数字'} style={{ width: 200 }} />,
-        desc: '321',
         label: '相邻文本重合长度',
         name: 'paragraphOverlapLength',
+        rules: [{ message: '请输入知识库名称', required: true }],
       },
       {
-        children: <Slider style={{ width: 100 }} />,
+        children: <InputNumber style={{ width: 200 }} />,
-        desc: '321',
         label: '文本匹配条数',
         name: 'paragraphMatchCount',
+        rules: [{ message: '请输入知识库名称', required: true }],
       },
       {
-        children: <Switch style={{ width: 100 }} />,
+        children: <Switch style={{ width: 50 }} />,
-        desc: '321',
         label: '开启中文标题加强',
         name: 'chineseTitleEnhance',
       },
@@ -56,7 +61,16 @@ const KnowledgeBaseConfig = memo(() => {
     title: '知识库设置',
   };
 
-  return <Form form={form} items={[system]} onValuesChange={handleConfigChange} {...FORM_STYLE} />;
+  return (
+    <>
+      <Form form={form} items={[system]} onValuesChange={handleConfigChange} {...FORM_STYLE} />
+      <Flexbox padding={50}>
+        <Button size="large" style={{ width: 400 }}>
+          保存
+        </Button>
+      </Flexbox>
+    </>
+  );
 });
 
 export default KnowledgeBaseConfig;

frontend/src/app/knowledge/[id]/features/KnowledgeBaseConfig.tsx

@@ -1,31 +0,0 @@
-import { Form, type ItemGroup } from '@lobehub/ui';
-import { Form as AntForm, Input } from 'antd';
-import { AppWindow } from 'lucide-react';
-import { memo, useCallback } from 'react';
-
-import { FORM_STYLE } from '@/const/layoutTokens';
-
-// 参考settings/llm/Anthropic/index.tsx的代码生成一个名为KnowledgeBaseConfig.tsx的表单组件
-const KnowledgeBaseConfig = memo(() => {
-  const [form] = AntForm.useForm();
-
-  const handleConfigChange = useCallback(() => {
-    console.log(321);
-  }, []);
-  const system: ItemGroup = {
-    children: [
-      {
-        children: <Input placeholder={'321'} />,
-        desc: '知识库名称321',
-        label: '知识库名称',
-        name: 'password',
-      },
-    ],
-    icon: AppWindow,
-    title: '321',
-  };
-
-  return <Form form={form} items={[system]} onValuesChange={handleConfigChange} {...FORM_STYLE} />;
-});
-
-export default KnowledgeBaseConfig;

frontend/src/app/knowledge/[id]/layout.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { createStyles } from 'antd-style';
 import { PropsWithChildren, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -9,16 +8,12 @@ import { SidebarTabKey } from '@/store/global/initialState';
 
 import KnowledgeTabs from './tabs';
 
-const useStyles = createStyles(({ stylish, token, css }) => ({
+interface LayoutProps extends PropsWithChildren {
-  container: {
+  params: Record<string, string>;
-    paddingLeft: 20,
+}
-    paddingRight: 20,
+export default memo<LayoutProps>(({ children, params }) => {
-    position: 'relative',
-  },
-}));
-
-export default memo(({ children, params }: PropsWithChildren) => {
   console.log(params);
+
   return (
     <AppLayoutDesktop sidebarKey={SidebarTabKey.Knowledge}>
       <Flexbox direction="horizontal" flex={1} gap={40} height={'100%'}>
@@ -32,6 +27,7 @@ export default memo(({ children, params }: PropsWithChildren) => {
             <Center>图标占位</Center>
             <Center>知识库名称</Center>
           </Flexbox>
+
           <KnowledgeTabs params={params} />
         </Flexbox>
         <Flexbox padding={40} width={'100%'}>

frontend/src/app/knowledge/[id]/page.tsx

@@ -1,11 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-import { memo } from 'react';
-
-const KnowledgeBaseConfig = dynamic(() => import('./features/KnowledgeBaseConfig'));
-const KnowledgeDetail = memo(() => {
-  return <KnowledgeBaseConfig />;
-});
-
-export default KnowledgeDetail;

frontend/src/app/knowledge/[id]/tabs/index.tsx

@@ -1,27 +1,35 @@
 import { Settings2, Webhook } from 'lucide-react';
-import Link from 'next/link';
+import { useRouter } from 'next/navigation';
-import { memo } from 'react';
+import { memo, useState } from 'react';
-
-import { KnowledgeTabs } from '@/store/global/initialState';
 
 import Item from './TabItem';
 
+export enum KnowledgeTabs {
+  Base = 'base',
+  Config = 'config',
+}
+
 export interface KnowledgeTabsProps {
   activeTab?: KnowledgeTabs;
   params: Record<string, string>;
 }
 
-const KnowledgeTabsBox = memo<KnowledgeTabsProps>(({ activeTab, params }) => {
+const KnowledgeTabsBox = memo<KnowledgeTabsProps>(({ params }) => {
   console.log(params);
+  const [activeTab, setActiveTab] = useState<KnowledgeTabs>(KnowledgeTabs.Base);
   const items = [
     { icon: Webhook, label: '知识库', value: KnowledgeTabs.Base },
     { icon: Settings2, label: '配置', value: KnowledgeTabs.Config },
   ];
-
+  const router = useRouter();
+  const handleTabClick = (value: KnowledgeTabs) => {
+    setActiveTab(value);
+    router.push(`/knowledge/${params.id}/${value}`);
+  };
   return items.map(({ value, icon, label }) => (
-    <Link aria-label={label} href={`/knowledge/${params.id}/${value}`} key={value}>
+    <div aria-label={label} key={value} onClick={() => handleTabClick(value)}>
       <Item active={activeTab === value} hoverable icon={icon} label={label} />
-    </Link>
+    </div>
   ));
 });
 

frontend/src/store/global/initialState.ts

@@ -2,7 +2,7 @@ import { GlobalCommonState, initialCommonState } from './slices/common/initialSt
 import { GlobalPreferenceState, initialPreferenceState } from './slices/preference/initialState';
 import { GlobalSettingsState, initialSettingsState } from './slices/settings/initialState';
 
-export { KnowledgeTabs, SettingsTabs, SidebarTabKey } from './slices/common/initialState';
+export { SettingsTabs, SidebarTabKey } from './slices/common/initialState';
 
 export type GlobalState = GlobalCommonState & GlobalSettingsState & GlobalPreferenceState;
 

frontend/src/store/global/slices/common/initialState.ts

@@ -15,11 +15,6 @@ export enum SettingsTabs {
   TTS = 'tts',
 }
 
-export enum KnowledgeTabs {
-  Base = 'base',
-  Config = 'config',
-}
-
 export interface Guide {
   // Topic 引导
   topic?: boolean;