112 lines
3.1 KiB
JavaScript
112 lines
3.1 KiB
JavaScript
import React, {useRef, useState } from 'react';
|
|
import {
|
|
MenuFoldOutlined,
|
|
MenuUnfoldOutlined,
|
|
UploadOutlined,
|
|
UserOutlined,
|
|
VideoCameraOutlined,
|
|
} from '@ant-design/icons';
|
|
import { Layout, Menu, Button, theme, Avatar,Tabs } from 'antd';
|
|
import Hlexical from './Hlexical';
|
|
import ItemTree from "../../components/ItemTree";
|
|
import './index.less'
|
|
const { Header, Sider, Content } = Layout;
|
|
|
|
|
|
const initialItems = [
|
|
{
|
|
label: 'Tab 1',
|
|
children: <div className="HlexicalName"><Hlexical/></div>,
|
|
key: '1',
|
|
},
|
|
{
|
|
label: 'Tab 2',
|
|
children: 'Content of Tab 2',
|
|
key: '2',
|
|
},
|
|
{
|
|
label: 'Tab 3',
|
|
children: 'Content of Tab 3',
|
|
key: '3',
|
|
closable: false,
|
|
},
|
|
];
|
|
|
|
const Note = () => {
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
// const {
|
|
// token: { colorBgContainer },
|
|
// } = theme.useToken();
|
|
const colorBgContainer = '#800080'
|
|
|
|
|
|
const [activeKey, setActiveKey] = useState(initialItems[0].key);
|
|
const [items, setItems] = useState(initialItems);
|
|
const newTabIndex = useRef(0);
|
|
const onChange = (newActiveKey) => {
|
|
setActiveKey(newActiveKey);
|
|
};
|
|
const add = () => {
|
|
const newActiveKey = `newTab${newTabIndex.current++}`;
|
|
const newPanes = [...items];
|
|
newPanes.push({
|
|
label: 'New Tab',
|
|
children: 'Content of new Tab',
|
|
key: newActiveKey,
|
|
});
|
|
setItems(newPanes);
|
|
setActiveKey(newActiveKey);
|
|
};
|
|
const remove = (targetKey) => {
|
|
let newActiveKey = activeKey;
|
|
let lastIndex = -1;
|
|
items.forEach((item, i) => {
|
|
if (item.key === targetKey) {
|
|
lastIndex = i - 1;
|
|
}
|
|
});
|
|
const newPanes = items.filter((item) => item.key !== targetKey);
|
|
if (newPanes.length && newActiveKey === targetKey) {
|
|
if (lastIndex >= 0) {
|
|
newActiveKey = newPanes[lastIndex].key;
|
|
} else {
|
|
newActiveKey = newPanes[0].key;
|
|
}
|
|
}
|
|
setItems(newPanes);
|
|
setActiveKey(newActiveKey);
|
|
};
|
|
const onEdit = (targetKey, action) => {
|
|
if (action === 'add') {
|
|
add();
|
|
} else {
|
|
remove(targetKey);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Layout>
|
|
<Sider margin='5' collapsed='true'>
|
|
<div>
|
|
<Avatar size={60} src='http://localhost/20231114150555.jpg' icon={<UserOutlined />} />
|
|
</div>
|
|
<div>
|
|
<p style={{ color: colorBgContainer, 'fontSize': 60 }}>上善若水</p>
|
|
</div>
|
|
</Sider>
|
|
<Sider trigger={null} collapsedWidth={0} collapsible collapsed={collapsed}>
|
|
<ItemTree></ItemTree>
|
|
</Sider>
|
|
<Layout>
|
|
<Tabs
|
|
type="editable-card"
|
|
onChange={onChange}
|
|
activeKey={activeKey}
|
|
onEdit={onEdit}
|
|
items={items}
|
|
/>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
export default Note; |