Oak-Team
/
oak-general-business
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 38 Wiki Activity

debugpanel 调整

This commit is contained in:
Wang Kejun 2022-10-27 10:57:09 +08:00
parent f6cb02cb58
commit 70ceda9903
2 changed files with 117 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/func/debugPanel/web.module.less
View File

@ -1,9 +1,5 @@
.container { .container {
height: 100vh;
display: flex; display: flex;
flex-direction: column;
justify-content: 'center';
align-items: 'center';
} }

208
src/components/func/debugPanel/web.tsx
View File

@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { Button, Space, Drawer, DialogPlugin } from 'tdesign-react'; import { Button, Space, Drawer, Modal, Tooltip } from 'antd';
import { ChevronUpIcon } from 'tdesign-icons-react'; import { UpOutlined } from '@ant-design/icons';
// import { saveAs } from 'file-saver';
export default function render(this: any) { export default function render(this: any) {
const { placement = 'bottom', style = {} } = this.props; const { placement = 'bottom', style = {} } = this.props;
@ -9,14 +8,14 @@ export default function render(this: any) {
return ( return (
<React.Fragment> <React.Fragment>
<Button <Button
variant="text" type="text"
shape="circle" shape="circle"
theme="primary" icon={<UpOutlined style={{ fontSize: 16 }} />}
icon={<ChevronUpIcon />}
style={{ style={{
position: 'fixed', position: 'fixed',
bottom: 0, bottom: 0,
right: '45vw', right: '45vw',
zIndex: 999,
...style, ...style,
}} }}
onClick={() => { onClick={() => {
@ -30,110 +29,137 @@ export default function render(this: any) {
onClose={() => { onClose={() => {
this.setVisible(false); this.setVisible(false);
}} }}
header="Debug控制台" title="Debug控制台"
footer={<></>} footer={<></>}
> >
<input <input
type="file" type="file"
accept='application/json' accept="application/json"
hidden hidden
id="upload" id="upload"
onChange={()=>{ onChange={() => {
const that = this; const that = this;
const file = (document.getElementById('upload') as any).files[0]; const file = (document.getElementById('upload') as any)
.files[0];
if (typeof FileReader === undefined) { if (typeof FileReader === undefined) {
alert('浏览器版本太老了'); alert('浏览器版本太老了');
} } else {
else {
const reader = new FileReader(); const reader = new FileReader();
reader.readAsText(file); reader.readAsText(file);
reader.onload = function() { reader.onload = function () {
try { try {
const data = JSON.parse(this.result as string); const data = JSON.parse(
this.result as string
);
that.features.localStorage.resetAll(data); that.features.localStorage.resetAll(data);
window.location.reload(); window.location.reload();
} } catch (err) {
catch(err) {
console.error(err); console.error(err);
} }
} };
} }
}} }}
/> />
<Space breakLine={true} direction="horizontal" size="medium"> <Space wrap={true}>
<Button <Tooltip title="页面结构">
theme="primary" <Button
shape="circle" size="large"
onClick={() => this.printRunningTree()} type="primary"
> shape="circle"
R onClick={() => this.printRunningTree()}
</Button> >
<Button R
theme="primary" </Button>
shape="circle" </Tooltip>
onClick={() => this.printDebugStore()} <Tooltip title="Store数据">
> <Button
S size="large"
</Button> type="primary"
<Button shape="circle"
theme="primary" onClick={() => this.printDebugStore()}
shape="circle" >
onClick={() => this.printCachedStore()} S
> </Button>
C </Tooltip>
</Button>
<Button
theme="primary"
shape="circle"
onClick={() => {
const data = this.features.localStorage.loadAll();
const element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(data)));
element.setAttribute('download', 'data.json');
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}}
>
D
</Button>
<Button <Tooltip title="页面缓存">
theme="primary" <Button
shape="circle" size="large"
onClick={() => { type="primary"
const element = document.getElementById('upload'); shape="circle"
element!.click(); onClick={() => this.printCachedStore()}
}} >
> C
U </Button>
</Button> </Tooltip>
<Button <Tooltip title="下载Store">
theme="warning" <Button
shape="circle" size="large"
onClick={() => { type="primary"
const confirmDia = DialogPlugin.confirm!({ shape="circle"
header: '重置数据', onClick={() => {
body: '重置后，原来的数据不可恢复', const data =
confirmBtn: '确定', this.features.localStorage.loadAll();
cancelBtn: '取消', const element = document.createElement('a');
onConfirm: ({ e }) => { element.setAttribute(
this.resetInitialData(); 'href',
confirmDia.hide!(); 'data:text/plain;charset=utf-8,' +
window.location.reload(); encodeURIComponent(JSON.stringify(data))
}, );
onClose: ({ e, trigger }) => { element.setAttribute('download', 'data.json');
confirmDia.hide!();
}, element.style.display = 'none';
}); document.body.appendChild(element);
}}
> element.click();
Reset
</Button> document.body.removeChild(element);
}}
>
D
</Button>
</Tooltip>
<Tooltip title="上传Store">
<Button
size="large"
type="primary"
shape="circle"
onClick={() => {
const element =
document.getElementById('upload');
element!.click();
}}
>
U
</Button>
</Tooltip>
<Tooltip title="重置Store">
<Button
size="large"
type="primary"
danger
shape="circle"
onClick={() => {
const modal = Modal.confirm!({
title: '重置数据',
content: '重置后，原来的数据不可恢复',
okText: '确定',
cancelText: '取消',
onOk: (e) => {
this.resetInitialData();
modal.destroy!();
window.location.reload();
},
onCancel: (e) => {
modal.destroy!();
},
});
}}
>
Reset
</Button>
</Tooltip>
</Space> </Space>
</Drawer> </Drawer>
</React.Fragment> </React.Fragment>