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';
} }

94
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,65 +29,83 @@ 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}>
<Tooltip title="页面结构">
<Button <Button
theme="primary" size="large"
type="primary"
shape="circle" shape="circle"
onClick={() => this.printRunningTree()} onClick={() => this.printRunningTree()}
> >
R R
</Button> </Button>
</Tooltip>
<Tooltip title="Store数据">
<Button <Button
theme="primary" size="large"
type="primary"
shape="circle" shape="circle"
onClick={() => this.printDebugStore()} onClick={() => this.printDebugStore()}
> >
S S
</Button> </Button>
</Tooltip>
<Tooltip title="页面缓存">
<Button <Button
theme="primary" size="large"
type="primary"
shape="circle" shape="circle"
onClick={() => this.printCachedStore()} onClick={() => this.printCachedStore()}
> >
C C
</Button> </Button>
</Tooltip>
<Tooltip title="下载Store">
<Button <Button
theme="primary" size="large"
type="primary"
shape="circle" shape="circle"
onClick={() => { onClick={() => {
const data = this.features.localStorage.loadAll(); const data =
this.features.localStorage.loadAll();
const element = document.createElement('a'); const element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(data))); element.setAttribute(
'href',
'data:text/plain;charset=utf-8,' +
encodeURIComponent(JSON.stringify(data))
);
element.setAttribute('download', 'data.json'); element.setAttribute('download', 'data.json');
element.style.display = 'none'; element.style.display = 'none';
@ -101,39 +118,48 @@ export default function render(this: any) {
> >
D D
</Button> </Button>
</Tooltip>
<Tooltip title="上传Store">
<Button <Button
theme="primary" size="large"
type="primary"
shape="circle" shape="circle"
onClick={() => { onClick={() => {
const element = document.getElementById('upload'); const element =
document.getElementById('upload');
element!.click(); element!.click();
}} }}
> >
U U
</Button> </Button>
</Tooltip>
<Tooltip title="重置Store">
<Button <Button
theme="warning" size="large"
type="primary"
danger
shape="circle" shape="circle"
onClick={() => { onClick={() => {
const confirmDia = DialogPlugin.confirm!({ const modal = Modal.confirm!({
header: '重置数据', title: '重置数据',
body: '重置后，原来的数据不可恢复', content: '重置后，原来的数据不可恢复',
confirmBtn: '确定', okText: '确定',
cancelBtn: '取消', cancelText: '取消',
onConfirm: ({ e }) => { onOk: (e) => {
this.resetInitialData(); this.resetInitialData();
confirmDia.hide!(); modal.destroy!();
window.location.reload(); window.location.reload();
}, },
onClose: ({ e, trigger }) => { onCancel: (e) => {
confirmDia.hide!(); modal.destroy!();
}, },
}); });
}} }}
> >
Reset Reset
</Button> </Button>
</Tooltip>
</Space> </Space>
</Drawer> </Drawer>
</React.Fragment> </React.Fragment>