Skip to content

Right click to view the sub application scope and link the console marked sub application scope #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Right click to view the sub application scope and link the console marked sub application scope #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 52 additions & 2 deletions src/pages/devtools/components/route/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,52 @@ class Route extends React.PureComponent<RouteProps, RouteState> {
lighting: {},
};

public componentDidMount(): void {
const {
selectInfo,
} = this.props;
if (selectInfo && selectInfo.lighting && selectInfo.lighting === '1') {
this.setState(prevState => ({
lighting: {
...prevState.lighting,
[selectInfo.name]: {
checked: true,
color: selectInfo.lightingColor as string,
},
},
}));
}
}

public componentDidUpdate(prevProps: Readonly<RouteProps>): void {
if (prevProps.selectInfo?.name !== this.props.selectInfo?.name && this.props.selectInfo && !this.state.lighting[this.props.selectInfo.name]) {
const checked = !!(this.props.selectInfo.lighting && this.props.selectInfo.lighting === '1');
this.setState(prevState => ({
lighting: {
...prevState.lighting,
[this.props.selectInfo?.name ?? 'defaultName']: {
checked,
color: this.props.selectInfo?.lightingColor as string,
},
},
}));
}
if (prevProps.selectInfo && !this.props.selectInfo) {
this.setState({
lighting: {},
});
const evalLabel = `JSON.stringify(function(){
if (window.originalStyles){
window.originalStyles = new Map();
window.setLightingStyle = [];
}
}())`;
chrome.devtools.inspectedWindow.eval(
evalLabel,
);
}
}

/**
* 修改高亮状态
* @param checked 是否高亮
Expand Down Expand Up @@ -106,7 +152,7 @@ class Route extends React.PureComponent<RouteProps, RouteState> {
}
var appDOM = document.getElementsByName('${selectInfo.name}')[0];
if (${lighting[selectInfo.name].checked}) {
const originalStyle = appDOM.getAttribute('style');
var originalStyle = appDOM.getAttribute('style');
if (window.setLightingStyle.indexOf('${selectInfo.name}') == -1 && !window.originalStyles.get('${selectInfo.name}')){
window.setLightingStyle.push('${selectInfo.name}');
window.originalStyles.set('${selectInfo.name}', originalStyle);
Expand All @@ -115,13 +161,17 @@ class Route extends React.PureComponent<RouteProps, RouteState> {
appDOM.style.display = 'block';
appDOM.style.transformOrigin = 'center';
appDOM.style.transform = 'rotate(360deg)';
appDOM.setAttribute('data-lighting', '1');
appDOM.setAttribute('data-lighting-color', '${color}');
} else {
const originalStyle = window.originalStyles.get('${selectInfo.name}');
var originalStyle = window.originalStyles.get('${selectInfo.name}');
if (originalStyle) {
appDOM.setAttribute('style', originalStyle);
} else {
appDOM.removeAttribute('style');
}
appDOM.removeAttribute('data-lighting');
appDOM.removeAttribute('data-lighting-color');
}
}())`;
chrome.devtools.inspectedWindow.eval(
Expand Down
12 changes: 11 additions & 1 deletion src/pages/devtools/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ class DevToolsPage extends React.PureComponent<DevToolsPageProps, DevToolsPageSt
fullPath: 'fullPath',
baseroute: 'baseroute',
tagName: 'tagName',
lightingColor: 'data-lighting-color',
lighting: 'data-lighting',
}).then((treeData) => {
console.log('microAppLevel返回', treeData);
this.setState({
Expand Down Expand Up @@ -148,6 +150,14 @@ class DevToolsPage extends React.PureComponent<DevToolsPageProps, DevToolsPageSt
});
};

private refresh = () => {
this.setState({
selectInfo: null,
}, () => {
this.getTree();
});
};

public render() {
const {
treeData,
Expand All @@ -158,7 +168,7 @@ class DevToolsPage extends React.PureComponent<DevToolsPageProps, DevToolsPageSt
<div className={styles.container}>
<Row gutter={10} style={{ display: 'flex', alignItems: 'stretch' }}>
<Col span={4} style={{ flex: 1 }}>
<Card style={{ height: '100%' }} size="small" title="选择子应用" extra={<Button type="link" icon={<RedoOutlined rev={null} />} onClick={this.getTree} />}>
<Card style={{ height: '100%' }} size="small" title="选择子应用" extra={<Button type="link" icon={<RedoOutlined rev={null} />} onClick={this.refresh} />}>
<Tree
defaultExpandAll
autoExpandParent
Expand Down
Loading