File size: 4,035 Bytes
fad2ec7 f3dd131 6b8fc2c fad2ec7 6b8fc2c fad2ec7 6b8fc2c fad2ec7 6b8fc2c fad2ec7 6b8fc2c fad2ec7 6b8fc2c fad2ec7 6b8fc2c fad2ec7 6b8fc2c f3dd131 6b8fc2c f3dd131 6b8fc2c f3dd131 6b8fc2c f3dd131 6b8fc2c fad2ec7 f3dd131 fad2ec7 6b8fc2c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
import { connect, useNavigate, useLocation, Dispatch } from 'umi'
import React, { useState, useEffect, useMemo } from 'react';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import {
ToolOutlined,
BarsOutlined,
SearchOutlined
} from '@ant-design/icons';
import File from './components/knowledge-file'
import Setting from './components/knowledge-setting'
import Search from './components/knowledge-search'
import Chunk from './components/knowledge-chunk'
import styles from './index.less'
import { getWidth } from '@/utils'
import { kAModelState } from './model'
interface kAProps {
dispatch: Dispatch;
kAModel: kAModelState;
}
const Index: React.FC<kAProps> = ({ kAModel, dispatch }) => {
const [collapsed, setCollapsed] = useState(false);
const { id, activeKey, doc_id } = kAModel
const [windowWidth, setWindowWidth] = useState(getWidth());
let navigate = useNavigate();
const location = useLocation();
// 标记一下
console.log(doc_id, '>>>>>>>>>>>>>doc_id')
useEffect(() => {
const widthSize = () => {
const width = getWidth()
console.log(width)
setWindowWidth(width);
};
window.addEventListener("resize", widthSize);
return () => {
window.removeEventListener("resize", widthSize);
};
}, []);
useEffect(() => {
console.log(location)
const search = location.search.slice(1)
const map = search.split('&').reduce((obj, cur) => {
const [key, value] = cur.split('=')
obj[key] = value
return obj
}, {})
dispatch({
type: 'kAModel/updateState',
payload: {
doc_id: undefined,
...map,
}
});
}, [location])
useEffect(() => {
if (windowWidth.width > 957) {
setCollapsed(false)
} else {
setCollapsed(true)
}
}, [windowWidth.width])
type MenuItem = Required<MenuProps>['items'][number];
function getItem(
label: React.ReactNode,
key: React.Key,
icon?: React.ReactNode,
disabled?: boolean,
children?: MenuItem[],
type?: 'group',
): MenuItem {
return {
key,
icon,
children,
label,
type,
disabled
} as MenuItem;
}
const items: MenuItem[] = useMemo(() => {
const disabled = !id
return [
getItem('配置', 'setting', <ToolOutlined />),
getItem('知识库', 'file', <BarsOutlined />, disabled),
getItem('搜索测试', 'search', <SearchOutlined />, disabled),
]
}, [id]);
const handleSelect: MenuProps['onSelect'] = (e) => {
navigate(`/knowledge/add/setting?activeKey=${e.key}&id=${id}`);
}
return (
<>
<div className={styles.container}>
<div className={styles.menu}>
<Menu
selectedKeys={[activeKey]}
mode="inline"
className={windowWidth.width > 957 ? styles.defaultWidth : styles.minWidth}
inlineCollapsed={collapsed}
items={items}
onSelect={handleSelect}
/>
</div>
<div className={styles.content}>
{activeKey === 'file' && !doc_id && <File kb_id={id} />}
{activeKey === 'setting' && <Setting kb_id={id} />}
{activeKey === 'search' && <Search kb_id={id} />}
{activeKey === 'file' && !!doc_id && <Chunk doc_id={doc_id} />}
</div>
</div>
</>
);
};
export default connect(({ kAModel, loading }) => ({ kAModel, loading }))(Index); |