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