add front end code (#27)

2025-12-17 19:22:55 +08:00 · 2024-01-17 09:37:01 +08:00
parent 3859fce6bf
commit 6b8fc2ce1f
89 changed files with 21430 additions and 0 deletions
--- a/web/src/pages/add-knowledge/components/knowledge-file/createEFileModal.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/createEFileModal.tsx
@ -0,0 +1,72 @@
+import { connect } from 'umi';
+import i18n from 'i18next';
+import { useTranslation, Trans } from 'react-i18next'
+import { Input, Modal, Form } from 'antd'
+import { rsaPsw } from '@/utils'
+import styles from './index.less';
+
+type FieldType = {
+    name?: string;
+};
+const Index = ({ kFModel, dispatch, getKfList, kb_id }) => {
+    const { isShowCEFwModal } = kFModel
+    const { t } = useTranslation()
+    const handleCancel = () => {
+        dispatch({
+            type: 'kFModel/updateState',
+            payload: {
+                isShowCEFwModal: false
+            }
+        });
+    };
+    const [form] = Form.useForm()
+    const handleOk = async () => {
+        try {
+            const values = await form.validateFields();
+            dispatch({
+                type: 'kFModel/document_create',
+                payload: {
+                    name: values.name,
+                    kb_id
+                },
+                callback: () => {
+                    dispatch({
+                        type: 'kFModel/updateState',
+                        payload: {
+                            isShowCEFwModal: false
+                        }
+                    });
+                    getKfList && getKfList()
+                }
+            });
+
+        } catch (errorInfo) {
+            console.log('Failed:', errorInfo);
+        }
+    };
+
+    return (
+        <Modal title="Basic Modal" open={isShowCEFwModal} onOk={handleOk} onCancel={handleCancel}>
+            <Form
+                form={form}
+                name="validateOnly"
+                labelCol={{ span: 8 }}
+                wrapperCol={{ span: 16 }}
+                style={{ maxWidth: 600 }}
+                autoComplete="off"
+            >
+                <Form.Item<FieldType>
+                    label="文件名"
+                    name="name"
+                    rules={[{ required: true, message: 'Please input name!' }]}
+                >
+                    <Input />
+                </Form.Item>
+
+            </Form>
+        </Modal >
+
+
+    );
+}
+export default connect(({ kFModel, loading }) => ({ kFModel, loading }))(Index);
--- a/web/src/pages/add-knowledge/components/knowledge-file/index.less
+++ b/web/src/pages/add-knowledge/components/knowledge-file/index.less
@ -0,0 +1,24 @@
+.filter {
+    height: 32px;
+    display: flex;
+    margin: 10px 0;
+    justify-content: space-between;
+
+    .search {
+        flex: 1;
+    }
+
+    .operate {
+        width: 200px;
+    }
+}
+
+.img {
+    height: 16px;
+    width: 16px;
+    margin-right: 6px;
+}
+
+.column {
+    min-width: 200px
+}
--- a/web/src/pages/add-knowledge/components/knowledge-file/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/index.tsx
@ -0,0 +1,218 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { connect, useNavigate, useLocation } from 'umi'
+import { Space, Table, Tag, Input, Button, Switch, Popover, Dropdown, } from 'antd';
+import type { MenuProps } from 'antd';
+import { PlusOutlined, DownOutlined } from '@ant-design/icons'
+import { debounce } from 'lodash';
+import type { ColumnsType } from 'antd/es/table';
+import UploadFile from './upload'
+import CreateEPModal from './createEFileModal'
+import SegmentSetModal from './segmentSetModal'
+import styles from './index.less'
+
+interface DataType {
+    name: string;
+    chunk_num: string;
+    token_num: number;
+    update_date: string;
+    size: string;
+    status: string;
+    id: string;
+    parser_id: string
+}
+
+
+
+const Index: React.FC = ({ kFModel, dispatch, id }) => {
+    const { data, loading } = kFModel
+    const [inputValue, setInputValue] = useState('')
+    const [doc_id, setDocId] = useState('0')
+    const [parser_id, setParserId] = useState('0')
+    const changeValue = (value: string) => {
+        {
+            console.log(value)
+        }
+    }
+    const getKfList = () => {
+        dispatch({
+            type: 'kFModel/getKfList',
+            payload: {
+                kb_id: id
+            }
+        });
+    }
+    useEffect(() => {
+        if (id) {
+            getKfList()
+        }
+    }, [id])
+    const debounceChange = debounce(changeValue, 300)
+    const debounceCallback = useCallback((value: string) => debounceChange(value), [])
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const value = e.target.value
+        setInputValue(value)
+        debounceCallback(e.target.value)
+
+    }
+    const onChangeStatus = (e: boolean, doc_id: string) => {
+        dispatch({
+            type: 'kFModel/updateDocumentStatus',
+            payload: {
+                doc_id,
+                status: Number(e)
+            },
+            callback() {
+                getKfList()
+            }
+        });
+    }
+    const onRmDocument = () => {
+        dispatch({
+            type: 'kFModel/document_rm',
+            payload: {
+                doc_id
+            },
+            callback() {
+                getKfList()
+            }
+        });
+
+    }
+    const showCEFModal = () => {
+        dispatch({
+            type: 'kFModel/updateState',
+            payload: {
+                isShowCEFwModal: true
+            }
+        });
+    };
+
+    const showSegmentSetModal = () => {
+        dispatch({
+            type: 'kFModel/updateState',
+            payload: {
+                isShowSegmentSetModal: true
+            }
+        });
+    };
+    const actionItems: MenuProps['items'] = useMemo(() => {
+        return [
+            {
+                key: '1',
+                label: (
+                    <div>
+                        <UploadFile kb_id={id} getKfList={getKfList} />
+                    </div>
+
+                ),
+            },
+            {
+                key: '2',
+                label: (
+                    <div>
+                        <Button type="link" onClick={showCEFModal}> 导入虚拟文件</Button>
+                    </div>
+                ),
+                // disabled: true,
+            },
+        ]
+    }, [id]);
+    const chunkItems: MenuProps['items'] = [
+        {
+            key: '1',
+            label: (
+                <div>
+
+                    <Button type="link" onClick={showSegmentSetModal}> 分段设置</Button>
+                </div>
+
+            ),
+        },
+        {
+            key: '2',
+            label: (
+                <div>
+                    <Button type="link" onClick={onRmDocument}> 删除</Button>
+                </div>
+            ),
+            // disabled: true,
+        },
+    ]
+    const columns: ColumnsType<DataType> = [
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            render: (text) => <a><img className={styles.img} src='https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg' alt="" />{text}</a>,
+            className: `${styles.column}`
+        },
+        {
+            title: '数据总量',
+            dataIndex: 'chunk_num',
+            key: 'chunk_num',
+            className: `${styles.column}`
+        },
+        {
+            title: 'Tokens',
+            dataIndex: 'token_num',
+            key: 'token_num',
+            className: `${styles.column}`
+        },
+        {
+            title: '文件大小',
+            dataIndex: 'size',
+            key: 'size',
+            className: `${styles.column}`
+        },
+        {
+            title: '状态',
+            key: 'status',
+            dataIndex: 'status',
+            className: `${styles.column}`,
+            render: (_, { status: string, id }) => (
+                <>
+                    <Switch defaultChecked={status === '1'} onChange={(e) => {
+                        onChangeStatus(e, id)
+                    }} />
+                </>
+            ),
+        },
+        {
+            title: 'Action',
+            key: 'action',
+            className: `${styles.column}`,
+            render: (_, record) => (
+                <Space size="middle">
+                    <Dropdown menu={{ items: chunkItems }} trigger={['click']}>
+                        <a onClick={() => {
+                            setDocId(record.id)
+                            setParserId(record.parser_id)
+                        }}>
+                            分段设置 <DownOutlined />
+                        </a>
+                    </Dropdown>
+                </Space>
+            ),
+        },
+    ];
+    return <>
+        <div className={styles.filter}>
+            <div className="search">
+                <Input placeholder="搜索" value={inputValue} allowClear onChange={handleInputChange} />
+            </div>
+            <div className="operate">
+                <Dropdown menu={{ items: actionItems }} trigger={['click']} >
+                    <a>
+                        导入文件 <DownOutlined />
+                    </a>
+                </Dropdown>
+
+            </div>
+        </div>
+        <Table rowKey='id' columns={columns} dataSource={data} loading={loading} pagination={false} scroll={{ scrollToFirstRowOnChange: true, x: true }} />
+        <CreateEPModal getKfList={getKfList} kb_id={id} />
+        <SegmentSetModal getKfList={getKfList} parser_id={parser_id} doc_id={doc_id} />
+    </>
+};
+
+export default connect(({ kFModel, loading }) => ({ kFModel, loading }))(Index);
--- a/web/src/pages/add-knowledge/components/knowledge-file/model.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-file/model.ts
@ -0,0 +1,127 @@
+import { message } from 'antd';
+import { addParam } from '@/utils';
+import kbService from '@/services/kbService';
+
+const Model = {
+  namespace: 'kFModel',
+  state: {
+    isShowCEFwModal: false,
+    isShowTntModal: false,
+    isShowSegmentSetModal: false,
+    loading: false,
+    tenantIfo: {}
+  },
+  subscriptions: {
+    setup({ dispatch, history }) {
+      history.listen(location => {
+      });
+    }
+  },
+  effects: {
+    * createKf({ payload = {}, callback }, { call, put }) {
+      const { data, response } = yield call(kbService.createKb, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+
+        message.success('创建成功！');
+      }
+    },
+    * updateKf({ payload = {}, callback }, { call, put }) {
+      const { data, response } = yield call(kbService.updateKb, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+        message.success('修改成功！');
+
+      }
+    },
+    *getKfDetail({ payload = {}, callback }, { call, put }) {
+      const { data, response } = yield call(kbService.get_kb_detail, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+        // localStorage.setItem('userInfo',res.)
+        callback && callback(res)
+      }
+    },
+    *getKfList({ payload = {} }, { call, put }) {
+      yield put({
+        type: 'updateState',
+        payload: {
+          loading: true
+        }
+      });
+      const { data, response } = yield call(kbService.get_document_list, payload);
+      const { retcode, data: res, retmsg } = data
+      yield put({
+        type: 'updateState',
+        payload: {
+          loading: false
+        }
+      });
+      if (retcode === 0) {
+        yield put({
+          type: 'updateState',
+          payload: {
+            data: res
+          }
+        });
+      }
+    },
+    *updateDocumentStatus({ payload = {}, callback }, { call, put }) {
+      yield put({
+        type: 'updateState',
+        payload: {
+          loading: true
+        }
+      });
+      const { data, response } = yield call(kbService.document_change_status, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+        message.success('修改成功！');
+        yield put({
+          type: 'updateState',
+          payload: {
+            loading: false
+          }
+        });
+        callback && callback()
+      }
+
+    },
+    *document_rm({ payload = {}, callback }, { call, put }) {
+      const { data, response } = yield call(kbService.document_rm, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+        message.success('删除成功！');
+        callback && callback()
+      }
+
+    },
+    *document_create({ payload = {}, callback }, { call, put }) {
+      const { data, response } = yield call(kbService.document_create, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+        message.success('创建成功！');
+        callback && callback()
+      }
+
+    },
+    *document_change_parser({ payload = {}, callback }, { call, put }) {
+      const { data, response } = yield call(kbService.document_change_parser, payload);
+      const { retcode, data: res, retmsg } = data
+      if (retcode === 0) {
+        message.success('修改成功！');
+        callback && callback()
+      }
+
+    },
+  },
+  reducers: {
+    updateState(state, { payload }) {
+      return {
+        ...state,
+        ...payload
+      };
+    }
+  }
+};
+export default Model;
--- a/web/src/pages/add-knowledge/components/knowledge-file/segmentSetModal.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/segmentSetModal.tsx
@ -0,0 +1,84 @@
+import { connect } from 'umi';
+import i18n from 'i18next';
+import { useTranslation, Trans } from 'react-i18next'
+import { Input, Modal, Form, Tag, Space } from 'antd'
+import { rsaPsw } from '@/utils'
+import { useEffect, useState } from 'react';
+import styles from './index.less';
+const { CheckableTag } = Tag;
+type FieldType = {
+    name?: string;
+};
+const Index = ({ kFModel, settingModel, dispatch, getKfList, parser_id, doc_id }) => {
+    const [selectedTag, setSelectedTag] = useState('')
+    const { tenantIfo = {} } = settingModel
+    const { parser_ids = '' } = tenantIfo
+    useEffect(() => {
+        dispatch({
+            type: 'settingModel/getTenantInfo',
+            payload: {
+            }
+        });
+        setSelectedTag(parser_id)
+    }, [parser_id])
+    const { isShowSegmentSetModal } = kFModel
+    const { t } = useTranslation()
+    const handleCancel = () => {
+        dispatch({
+            type: 'kFModel/updateState',
+            payload: {
+                isShowSegmentSetModal: false
+            }
+        });
+    };
+    const handleOk = () => {
+        console.log(1111, selectedTag)
+        dispatch({
+            type: 'kFModel/document_change_parser',
+            payload: {
+                parser_id: selectedTag,
+                doc_id
+            },
+            callback: () => {
+                dispatch({
+                    type: 'kFModel/updateState',
+                    payload: {
+                        isShowSegmentSetModal: false
+                    }
+                });
+                getKfList && getKfList()
+            }
+        });
+    };
+
+    const handleChange = (tag: string, checked: boolean) => {
+        const nextSelectedTag = checked
+            ? tag
+            : selectedTag;
+        console.log('You are interested in: ', nextSelectedTag);
+        setSelectedTag(nextSelectedTag);
+    };
+
+    return (
+        <Modal title="Basic Modal" open={isShowSegmentSetModal} onOk={handleOk} onCancel={handleCancel}>
+            <Space size={[0, 8]} wrap>
+                <div className={styles.tags}>
+                    {
+                        parser_ids.split(',').map((tag: string) => {
+                            return (<CheckableTag
+                                key={tag}
+                                checked={selectedTag === tag}
+                                onChange={(checked) => handleChange(tag, checked)}
+                            >
+                                {tag}
+                            </CheckableTag>)
+                        })
+                    }
+                </div>
+            </Space>
+        </Modal >
+
+
+    );
+}
+export default connect(({ kFModel, settingModel, loading }) => ({ kFModel, settingModel, loading }))(Index);
--- a/web/src/pages/add-knowledge/components/knowledge-file/upload.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/upload.tsx
@ -0,0 +1,30 @@
+import React from 'react';
+import { connect } from 'umi'
+import { UploadOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
+import { Button, message, Upload } from 'antd';
+import uploadService from '@/services/uploadService'
+
+
+const Index = ({ kb_id, getKfList }) => {
+    console.log(kb_id)
+    const createRequest = async function ({ file, onSuccess, onError }) {
+        const { retcode, data } = await uploadService.uploadFile(file, kb_id);
+        if (retcode === 0) {
+            onSuccess(data, file);
+
+        } else {
+            onError(data);
+        }
+        getKfList && getKfList()
+    };
+    const uploadProps: UploadProps = {
+        customRequest: createRequest,
+        showUploadList: false,
+    };
+    return (<Upload {...uploadProps} >
+        <Button type="link">导入文件</Button>
+    </Upload>)
+}
+
+export default connect(({ kFModel, settingModel, loading }) => ({ kFModel, settingModel, loading }))(Index);