[inula-dev-tools]<feat> Panel 组件合入
This commit is contained in:
13659257719
parent
b5e1a137d4
commit
587f61eec3
|
|
@ -0,0 +1,117 @@
|
||||||
|
/*
|
||||||
|
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
|
||||||
|
*
|
||||||
|
* openInula is licensed under Mulan PSL v2.
|
||||||
|
* You can use this software according to the terms and conditions of the Mulan PSL v2.
|
||||||
|
* You may obtain a copy of Mulan PSL v2 at:
|
||||||
|
*
|
||||||
|
* http://license.coscl.org.cn/MulanPSL2
|
||||||
|
*
|
||||||
|
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
|
||||||
|
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
|
||||||
|
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
|
||||||
|
* See the Mulan PSL v2 for more details.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import '../components/assets.less';
|
||||||
|
|
||||||
|
.app {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 100%;
|
||||||
|
font-size: @common-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
flex: 0 0 var(--horizontal-percentage);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.left-top {
|
||||||
|
border-bottom: @divider-style;
|
||||||
|
flex: 0 0 @top-height;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-right: 0.4rem;
|
||||||
|
|
||||||
|
.select {
|
||||||
|
padding: 0 0.5rem 0 0.8rem;
|
||||||
|
flex: 0 0;
|
||||||
|
|
||||||
|
.Picking {
|
||||||
|
color: #0088fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.StopPicking {
|
||||||
|
color: #5f6673;
|
||||||
|
}
|
||||||
|
|
||||||
|
.StopPicking :hover {
|
||||||
|
color: #23272f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
flex: 0 0 1px;
|
||||||
|
margin: 0 0.25rem 0 0.25rem;
|
||||||
|
border-left: @divider-style;
|
||||||
|
height: calc(100% - 1rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
display: flex;
|
||||||
|
flex: 1 1 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchResult {
|
||||||
|
flex: 0 0;
|
||||||
|
padding: 0 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchAction {
|
||||||
|
flex: 0 0 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
color: @arrow-color;
|
||||||
|
&:hover {
|
||||||
|
color: @hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-bottom {
|
||||||
|
flex: 1;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.resizeBar {
|
||||||
|
flex: 0 0 0;
|
||||||
|
position: relative;
|
||||||
|
resize: horizontal;
|
||||||
|
.resizeLine {
|
||||||
|
position: absolute;
|
||||||
|
left: -2px;
|
||||||
|
width: 5px;
|
||||||
|
height: 100%;
|
||||||
|
cursor: ew-resize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
flex: 3;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
border-left: @divider-style;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
outline: none;
|
||||||
|
border-width: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,448 @@
|
||||||
|
/*
|
||||||
|
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
|
||||||
|
*
|
||||||
|
* openInula is licensed under Mulan PSL v2.
|
||||||
|
* You can use this software according to the terms and conditions of the Mulan PSL v2.
|
||||||
|
* You may obtain a copy of Mulan PSL v2 at:
|
||||||
|
*
|
||||||
|
* http://license.coscl.org.cn/MulanPSL2
|
||||||
|
*
|
||||||
|
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
|
||||||
|
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
|
||||||
|
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
|
||||||
|
* See the Mulan PSL v2 for more details.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
useState,
|
||||||
|
useEffect,
|
||||||
|
useRef,
|
||||||
|
memo,
|
||||||
|
useMemo,
|
||||||
|
useCallback,
|
||||||
|
useReducer,
|
||||||
|
} from 'openinula';
|
||||||
|
import VTree, { IData } from '../components/VTree';
|
||||||
|
import Search from '../components/Search';
|
||||||
|
import ComponentInfo from '../components/ComponentInfo';
|
||||||
|
import styles from './Panel.less';
|
||||||
|
import Select from '../svgs/Select';
|
||||||
|
import { FilterTree } from '../hooks/FilterTree';
|
||||||
|
import Close from '../svgs/Close';
|
||||||
|
import Arrow from '../svgs/Arrow';
|
||||||
|
import {
|
||||||
|
AllVNodeTreeInfos,
|
||||||
|
RequestComponentAttrs,
|
||||||
|
ComponentAttrs,
|
||||||
|
PickElement,
|
||||||
|
StopPickElement,
|
||||||
|
} from '../utils/constants';
|
||||||
|
import {
|
||||||
|
addBackgroundMessageListener,
|
||||||
|
initBackgroundConnection,
|
||||||
|
postMessageToBackground,
|
||||||
|
removeBackgroundMessageListener,
|
||||||
|
} from '../panelConnection';
|
||||||
|
import { IAttr } from '../parser/parseAttr';
|
||||||
|
import { NameObj } from '../parser/parseVNode';
|
||||||
|
import { createLogger } from '../utils/logUtil';
|
||||||
|
import type { Source } from '../../../inula/src/renderer/Types';
|
||||||
|
import ViewSourceContext from '../utils/ViewSource';
|
||||||
|
import PickElementContext from '../utils/PickElement';
|
||||||
|
import Discover from '../svgs/Discover';
|
||||||
|
|
||||||
|
type ResizeActionType = 'START_RESIZE' | 'SET_HORIZONTAL_PERCENTAGE';
|
||||||
|
|
||||||
|
type ResizeAction = {
|
||||||
|
type: ResizeActionType;
|
||||||
|
payload: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
type ResizeState = {
|
||||||
|
horizontalPercentage: number;
|
||||||
|
isResizing: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const logger = createLogger('panelApp');
|
||||||
|
let maxDeep = 0;
|
||||||
|
const parseVNodeData = (rawData, idToTreeNodeMap, nextIdToTreeNodeMap) => {
|
||||||
|
const indentationMap: {
|
||||||
|
[id: string]: number;
|
||||||
|
} = {};
|
||||||
|
const data: IData[] = [];
|
||||||
|
let i = 0;
|
||||||
|
while (i < rawData.length) {
|
||||||
|
const id = rawData[i] as number;
|
||||||
|
i++;
|
||||||
|
const name = rawData[i] as NameObj;
|
||||||
|
i++;
|
||||||
|
const parentId = rawData[i] as string;
|
||||||
|
i++;
|
||||||
|
const userKey = rawData[i] as string;
|
||||||
|
i++;
|
||||||
|
const indentation = parentId === '' ? 0 : indentationMap[parentId] + 1;
|
||||||
|
maxDeep = maxDeep >= indentation ? maxDeep : indentation;
|
||||||
|
indentationMap[id] = indentation;
|
||||||
|
const lastItem = idToTreeNodeMap[id];
|
||||||
|
if (lastItem) {
|
||||||
|
// 由于 diff 算法限制，一个 vNode 的 name，userKey，indentation 属性不会发生变化
|
||||||
|
// 但是在跳转到新页面时， id 值重置，此时原有 id 对应的节点都发生了变化，需要更新
|
||||||
|
// 为了让架构尽可能简单，不区分是否是页面挑战，所以每次都需要重新赋值
|
||||||
|
nextIdToTreeNodeMap[id] = lastItem;
|
||||||
|
lastItem.name = name;
|
||||||
|
lastItem.indentation = indentation;
|
||||||
|
lastItem.userKey = userKey;
|
||||||
|
data.push(lastItem);
|
||||||
|
} else {
|
||||||
|
const item = {
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
indentation,
|
||||||
|
userKey,
|
||||||
|
};
|
||||||
|
nextIdToTreeNodeMap[id] = item;
|
||||||
|
data.push(item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getParents = (item: IData | null, parsedVNodeData: IData[]) => {
|
||||||
|
const parents: IData[] = [];
|
||||||
|
if (item) {
|
||||||
|
const index = parsedVNodeData.indexOf(item);
|
||||||
|
let indentation = item.indentation;
|
||||||
|
for (let i = index; i >= 0; i--) {
|
||||||
|
const last = parsedVNodeData[i];
|
||||||
|
const lastIndentation = last.indentation;
|
||||||
|
if (lastIndentation < indentation) {
|
||||||
|
parents.push(last);
|
||||||
|
indentation = lastIndentation;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return parents;
|
||||||
|
};
|
||||||
|
|
||||||
|
interface IIdToNodeMap {
|
||||||
|
[id: number]: IData;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置 dev tools 页面左树占比
|
||||||
|
*
|
||||||
|
* @param {null | HTMLElement} resizeElement 要改变宽度的页面元素
|
||||||
|
* @param {number} percentage 宽度占比
|
||||||
|
*/
|
||||||
|
const setResizePCTForElement = (
|
||||||
|
resizeElement: null | HTMLElement,
|
||||||
|
percentage: number
|
||||||
|
): void => {
|
||||||
|
if (resizeElement !== null) {
|
||||||
|
resizeElement.style.setProperty(
|
||||||
|
'--horizontal-percentage',
|
||||||
|
`${percentage}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function resizeReducer(state: ResizeState, action: ResizeAction): ResizeState {
|
||||||
|
switch (action.type) {
|
||||||
|
case "START_RESIZE":
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
isResizing: action.payload,
|
||||||
|
};
|
||||||
|
case "SET_HORIZONTAL_PERCENTAGE":
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
horizontalPercentage: action.payload,
|
||||||
|
};
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function initResizeState(): ResizeState {
|
||||||
|
const horizontalPercentage = 0.62;
|
||||||
|
|
||||||
|
return {
|
||||||
|
horizontalPercentage,
|
||||||
|
isResizing: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function Panel({ viewSource, inspectVNode }) {
|
||||||
|
const [parsedVNodeData, setParsedVNodeData] = useState([]);
|
||||||
|
const [componentAttrs, setComponentAttrs] = useState<{
|
||||||
|
parsedProps?: IAttr[];
|
||||||
|
parsedState?: IAttr[];
|
||||||
|
parsedHooks?: IAttr[];
|
||||||
|
}>({});
|
||||||
|
const [selectComp, setSelectComp] = useState<IData>(null);
|
||||||
|
const [isPicking, setPicking] = useState(false);
|
||||||
|
const [source, setSource] = useState<Source>(null);
|
||||||
|
const idToTreeNodeMapref = useRef<IIdToNodeMap>({});
|
||||||
|
const [state, dispatch] = useReducer(
|
||||||
|
resizeReducer,
|
||||||
|
null,
|
||||||
|
initResizeState
|
||||||
|
);
|
||||||
|
const pageRef = useRef<null | HTMLElement>(null);
|
||||||
|
const treeRef = useRef<null | HTMLElement>(null);
|
||||||
|
|
||||||
|
const { horizontalPercentage } = state;
|
||||||
|
const {
|
||||||
|
filterValue,
|
||||||
|
onChangeSearchValue: setFilterValue,
|
||||||
|
onClear,
|
||||||
|
currentItem,
|
||||||
|
matchItems,
|
||||||
|
onSelectNext,
|
||||||
|
onSelectLast,
|
||||||
|
setShowItems,
|
||||||
|
collapsedNodes,
|
||||||
|
setCollapsedNodes,
|
||||||
|
} = FilterTree({ data: parsedVNodeData });
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isDev) {
|
||||||
|
// const nextIdToTreeNodeMap: IIdToNodeMap = {};
|
||||||
|
} else {
|
||||||
|
const handleBackgroundMessage = message => {
|
||||||
|
const { payload } = message;
|
||||||
|
// 对象数据只是记录了引用，内容可能在后续被修改，打印字符串可以获取当前真正内容，不被后续修改影响
|
||||||
|
logger.info(JSON.stringify(payload));
|
||||||
|
if (payload) {
|
||||||
|
const {type, data} = payload;
|
||||||
|
if (type === AllVNodeTreeInfos) {
|
||||||
|
const idToTreeNodeMap = idToTreeNodeMapref.current;
|
||||||
|
const nextIdToTreeNodeMap: IIdToNodeMap = {};
|
||||||
|
const allTreeData = data.reduce((pre, current) => {
|
||||||
|
const parsedTreeData = parseVNodeData(
|
||||||
|
current,
|
||||||
|
idToTreeNodeMap,
|
||||||
|
nextIdToTreeNodeMap
|
||||||
|
);
|
||||||
|
return pre.concat(parsedTreeData);
|
||||||
|
}, []);
|
||||||
|
idToTreeNodeMapref.current = nextIdToTreeNodeMap;
|
||||||
|
setParsedVNodeData(allTreeData);
|
||||||
|
if (selectComp) {
|
||||||
|
postMessageToBackground(RequestComponentAttrs, selectComp.id);
|
||||||
|
}
|
||||||
|
} else if (type === ComponentAttrs) {
|
||||||
|
const { parsedProps, parsedState, parsedHooks, src } = data;
|
||||||
|
setComponentAttrs({
|
||||||
|
parsedProps,
|
||||||
|
parsedState,
|
||||||
|
parsedHooks,
|
||||||
|
});
|
||||||
|
setSource(src);
|
||||||
|
} else if (type === StopPickElement) {
|
||||||
|
setPicking(false);
|
||||||
|
} else if (type === PickElement) {
|
||||||
|
const target = Object.values(idToTreeNodeMapref.current).find(({ id }) => id == data);
|
||||||
|
setSelectComp(target);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 在页面渲染后初始化连接
|
||||||
|
initBackgroundConnection('panel');
|
||||||
|
// 监听 background 消息
|
||||||
|
addBackgroundMessageListener(handleBackgroundMessage);
|
||||||
|
return () => {
|
||||||
|
removeBackgroundMessageListener(handleBackgroundMessage);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [selectComp]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const treeElement = treeRef.current;
|
||||||
|
|
||||||
|
setResizePCTForElement(treeElement, horizontalPercentage * 100);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleSearchChange = (str: string) => {
|
||||||
|
setFilterValue(str);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectComp = (item: IData) => {
|
||||||
|
setSelectComp(item);
|
||||||
|
if (isDev) {
|
||||||
|
// setComponentAttrs({});
|
||||||
|
} else {
|
||||||
|
postMessageToBackground(RequestComponentAttrs, item.id);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClickParent = useCallback((item: IData) => {
|
||||||
|
setSelectComp(item);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onRendered = info => {
|
||||||
|
setShowItems(info.visibleItems);
|
||||||
|
};
|
||||||
|
|
||||||
|
const parents = useMemo(
|
||||||
|
() => getParents(selectComp, parsedVNodeData),
|
||||||
|
[selectComp, parsedVNodeData]
|
||||||
|
);
|
||||||
|
|
||||||
|
const viewSourceFunction = useMemo(
|
||||||
|
() => ({
|
||||||
|
viewSource: viewSource || null,
|
||||||
|
}),
|
||||||
|
[viewSource]
|
||||||
|
);
|
||||||
|
|
||||||
|
// 选择页面元素对应到 dev tools
|
||||||
|
const pickElementFunction = useMemo(
|
||||||
|
() => ({
|
||||||
|
inspectVNode: inspectVNode || null,
|
||||||
|
}),
|
||||||
|
[inspectVNode]
|
||||||
|
);
|
||||||
|
|
||||||
|
// 选择页面元素图标样式
|
||||||
|
let pickClassName;
|
||||||
|
if (isPicking) {
|
||||||
|
pickClassName = styles.Picking;
|
||||||
|
} else {
|
||||||
|
pickClassName = styles.StopPicking;
|
||||||
|
}
|
||||||
|
|
||||||
|
const MINIMUM_SIZE = 50;
|
||||||
|
const { isResizing } = state;
|
||||||
|
const doResize = () => dispatch({ type: 'START_RESIZE', payload: true });
|
||||||
|
let onResize;
|
||||||
|
let stopResize;
|
||||||
|
if (isResizing) {
|
||||||
|
stopResize = () => dispatch({ type: 'START_RESIZE', payload: false });
|
||||||
|
|
||||||
|
onResize = event => {
|
||||||
|
// 设置横向 resize 百分比区域（左树部分）
|
||||||
|
const treeElement = treeRef.current;
|
||||||
|
// 整个页面（左树部分加节点详情部分），要拿到页面宽度，防止 resize 时移出页面
|
||||||
|
const pageElement = pageRef.current;
|
||||||
|
|
||||||
|
if (isResizing || pageElement === null || treeElement === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 左移时防止左树移出页面
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const { width, left } = pageElement.getBoundingClientRect();
|
||||||
|
|
||||||
|
const mouseAbscissa = event.clientX - left;
|
||||||
|
|
||||||
|
const pageSizeMin = MINIMUM_SIZE;
|
||||||
|
const pageSizeMax = width-MINIMUM_SIZE;
|
||||||
|
|
||||||
|
const isMouseInPage = mouseAbscissa > pageSizeMin && mouseAbscissa < pageSizeMax;
|
||||||
|
|
||||||
|
if (isMouseInPage) {
|
||||||
|
const resizedElementWidth = width;
|
||||||
|
const actionType = 'SET_HORIZONTAL_PERCENTAGE';
|
||||||
|
const percentage = (mouseAbscissa / resizedElementWidth) * 100;
|
||||||
|
|
||||||
|
setResizePCTForElement(treeElement, percentage);
|
||||||
|
|
||||||
|
dispatch({
|
||||||
|
type: actionType,
|
||||||
|
payload: mouseAbscissa / resizedElementWidth,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ViewSourceContext.Provider value={{ viewSourceFunction }}>
|
||||||
|
<PickElementContext.Provider value={{ pickElementFunction }}>
|
||||||
|
<div
|
||||||
|
ref={pageRef}
|
||||||
|
onMouseMove={onResize}
|
||||||
|
onMouseLeave={stopResize}
|
||||||
|
onMouseUp={stopResize}
|
||||||
|
className={styles.app}
|
||||||
|
>
|
||||||
|
<div ref={treeRef} className={styles.left}>
|
||||||
|
<div className={styles.leftTop}>
|
||||||
|
<div className={styles.select}>
|
||||||
|
<button className={`${pickClassName}`}>
|
||||||
|
<span
|
||||||
|
className={styles.eye}
|
||||||
|
title={'Pick an element from the page'}
|
||||||
|
onClick={() => {
|
||||||
|
postMessageToBackground(!isPicking ? PickElement : StopPickElement);
|
||||||
|
setPicking(!isPicking);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Select />
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className={styles.divider} />
|
||||||
|
<div className={styles.search}>
|
||||||
|
<Discover />
|
||||||
|
<Search onKeyUp={onSelectNext} onChange={handleSearchChange} value={filterValue} />
|
||||||
|
</div>
|
||||||
|
{filterValue !== '' && (
|
||||||
|
<>
|
||||||
|
<span className={styles.searchResult}>
|
||||||
|
{`${matchItems.indexOf(currentItem) + 1}/${matchItems.length}`}
|
||||||
|
</span>
|
||||||
|
<div className={styles.divider} />
|
||||||
|
<button
|
||||||
|
className={styles.searchAction}
|
||||||
|
onClick={onSelectLast}
|
||||||
|
>
|
||||||
|
<Arrow direction={'up'} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={styles.searchAction}
|
||||||
|
onClick={onSelectNext}
|
||||||
|
>
|
||||||
|
<Arrow direction={'down'} />
|
||||||
|
</button>
|
||||||
|
<button className={styles.searchAction} onClick={onClear}>
|
||||||
|
<Close />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<VTree
|
||||||
|
data={parsedVNodeData}
|
||||||
|
maxDeep={maxDeep}
|
||||||
|
highlightValue={filterValue}
|
||||||
|
onRendered={onRendered}
|
||||||
|
collapsedNodes={collapsedNodes}
|
||||||
|
onCollapseNode={setCollapsedNodes}
|
||||||
|
scrollToItem={currentItem}
|
||||||
|
selectItem={selectComp}
|
||||||
|
onSelectItem={handleSelectComp}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div onMouseDown={doResize} className={styles.resizeLine} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<ComponentInfo
|
||||||
|
name={selectComp ? selectComp.name.itemName : null}
|
||||||
|
attrs={selectComp ? componentAttrs : {}}
|
||||||
|
parents={parents}
|
||||||
|
id={selectComp ? selectComp.id : null}
|
||||||
|
source={selectComp ? source : null}
|
||||||
|
onClickParent={handleClickParent}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PickElementContext.Provider>
|
||||||
|
</ViewSourceContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo(Panel);
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
/*
|
||||||
|
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
|
||||||
|
*
|
||||||
|
* openInula is licensed under Mulan PSL v2.
|
||||||
|
* You can use this software according to the terms and conditions of the Mulan PSL v2.
|
||||||
|
* You may obtain a copy of Mulan PSL v2 at:
|
||||||
|
*
|
||||||
|
* http://license.coscl.org.cn/MulanPSL2
|
||||||
|
*
|
||||||
|
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
|
||||||
|
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
|
||||||
|
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
|
||||||
|
* See the Mulan PSL v2 for more details.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import Panel from './Panel';
|
||||||
|
|
||||||
|
// 这里导出 Panel 为了加载 Panel.less
|
||||||
|
export default Panel;
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf8">
|
||||||
|
<meta http-equiv="Content-Security-Policy"
|
||||||
|
content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' ">
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="inula.development.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script src="panel.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue