+
{showList}
{/* 确保有足够的高度 */}
- )
+ );
}
export default VTree;
diff --git a/libs/extension/src/components/assets.less b/libs/extension/src/components/assets.less
index a00d8ade..7e74bacf 100644
--- a/libs/extension/src/components/assets.less
+++ b/libs/extension/src/components/assets.less
@@ -1,5 +1,5 @@
-@arrow-color:rgb(95, 99, 104);
-@divider-color:rgb(202, 205, 209);
+@arrow-color: rgb(95, 99, 104);
+@divider-color: rgb(202, 205, 209);
@attr-name-color: rgb(200, 0, 0);
@component-name-color: rgb(136, 18, 128);
@component-key-color: rgb(153, 69, 0);
@@ -11,4 +11,4 @@
@divider-width: 0.2px;
@common-font-size: 12px;
-@divider-style: @divider-color solid @divider-width;
\ No newline at end of file
+@divider-style: @divider-color solid @divider-width;
diff --git a/libs/extension/src/devtools/mock.ts b/libs/extension/src/devtools/mock.ts
index 0c40d06b..3a3eef88 100644
--- a/libs/extension/src/devtools/mock.ts
+++ b/libs/extension/src/devtools/mock.ts
@@ -1,3 +1,7 @@
+/**
+ * 用一个纯数据类型的对象 tree 去表示树的结构是非常清晰的，但是它不能准确的模拟 VNode 中存在的引用
+ * 关系，需要进行转换 getMockVNodeTree
+ */
import { parseAttr } from '../parser/parseAttr';
import parseTreeRoot from '../parser/parseVNode';
@@ -9,7 +13,7 @@ const mockComponentNames = ['Apple', 'Pear', 'Banana', 'Orange', 'Jenny', 'Kiwi'
function MockVNode(tag: string, props = {}, key = null, realNode = {}) {
const vNode = new VNode(tag, props, key, realNode);
const name = mockComponentNames.shift() || 'MockComponent';
- vNode.type = {name};
+ vNode.type = { name };
return vNode;
}
@@ -18,41 +22,49 @@ interface IMockTree {
children?: IMockTree[],
}
+// 模拟树
const tree: IMockTree = {
tag: ClassComponent,
children: [
- {tag: FunctionComponent},
- {tag: ClassComponent},
- {tag: FunctionComponent},
+ { tag: FunctionComponent },
+ { tag: ClassComponent },
+ { tag: FunctionComponent },
{
tag: FunctionComponent,
children: [
- {tag: ClassComponent}
+ { tag: ClassComponent }
]
}
]
-}
+};
function addOneThousandNode(node: IMockTree) {
const nodes = [];
- for(let i = 0; i < 1000; i++) {
- nodes.push({tag: FunctionComponent});
+ for (let i = 0; i < 1000; i++) {
+ nodes.push({ tag: FunctionComponent });
}
- node?.children.push({tag: ClassComponent,children: nodes});
-};
+ node?.children.push({ tag: ClassComponent, children: nodes });
+}
addOneThousandNode(tree);
-function getMockVNodeTree(tree: IMockTree, vNode: VNode) {
- const children = tree.children;
+/**
+ * 将mock数据转变为 VNode 树
+ *
+ * @param node 树节点
+ * @param vNode VNode节点
+ */
+function getMockVNodeTree(node: IMockTree, vNode: VNode) {
+ const children = node.children;
if (children && children.length !== 0) {
const childNode = children[0];
let childVNode = MockVNode(childNode.tag);
childVNode.key = '0';
getMockVNodeTree(childNode, childVNode);
+ // 需要建立双链
vNode.child = childVNode;
childVNode.parent = vNode;
- for(let i = 1; i < children.length; i++) {
+ for (let i = 1; i < children.length; i++) {
const nextNode = children[i];
const nextVNode = MockVNode(nextNode.tag);
nextVNode.key = String(i);
@@ -68,20 +80,19 @@ getMockVNodeTree(tree, rootVNode);
export const mockParsedVNodeData = parseTreeRoot(rootVNode);
-
const mockState = {
str: 'jenny',
num: 3,
boolean: true,
und: undefined,
- fun: () => {},
+ fun: () => ({}),
symbol: Symbol('sym'),
map: new Map([['a', 'a']]),
set: new Set(['a', 1, 2, Symbol('bambi')]),
- arr: [1,2,3,4],
+ arr: [1, 2, 3, 4],
obj: {
- niko: {jenny: 'jenny'}
+ niko: { jenny: 'jenny' }
}
};
-export const parsedMockState = parseAttr(mockState);
\ No newline at end of file
+export const parsedMockState = parseAttr(mockState);
diff --git a/libs/extension/src/panel/App.less b/libs/extension/src/panel/App.less
index 0186eec1..f48e225a 100644
--- a/libs/extension/src/panel/App.less
+++ b/libs/extension/src/panel/App.less
@@ -1,48 +1,53 @@
@import '../components/assets.less';
-.app{
+.app {
display: flex;
flex-direction: row;
height: 100%;
font-size: @common-font-size;
}
-.left{
+.left {
flex: 7;
display: flex;
flex-direction: column;
+
.left_top {
border-bottom: @divider-style;
flex: 0 0 @top-height;
display: flex;
align-items: center;
+
.select {
padding: 0 0.25rem 0 0.25rem;
flex: 0 0;
}
+
.divider {
flex: 0 0 1px;
margin: 0 0.25rem 0 0.25rem;
border-left: @divider-style;
height: calc(100% - 1rem);
}
+
.search {
flex: 1 1 0;
}
}
+
.left_bottom {
- flex: 1;
+ flex: 1;
height: 0;
}
}
-.right{
+.right {
flex: 3;
border-left: @divider-style;
}
-input{
+input {
outline: none;
border-width: 0;
padding: 0;
-}
\ No newline at end of file
+}
diff --git a/libs/extension/src/panel/App.tsx b/libs/extension/src/panel/App.tsx
index 871ad0ad..2b9ef6bc 100644
--- a/libs/extension/src/panel/App.tsx
+++ b/libs/extension/src/panel/App.tsx
@@ -1,4 +1,4 @@
-import {useState, useEffect} from 'horizon';
+import { useState, useEffect } from 'horizon';
import VTree, { IData } from '../components/VTree';
import Search from '../components/Search';
import ComponentInfo from '../components/ComponentInfo';
@@ -8,7 +8,7 @@ import { mockParsedVNodeData, parsedMockState } from '../devtools/mock';
function App() {
const [parsedVNodeData, setParsedVNodeData] = useState([]);
- const [componentInfo, setComponentInfo] = useState({name: null, attrs: {}});
+ const [componentInfo, setComponentInfo] = useState({ name: null, attrs: {} });
const [filterValue, setFilterValue] = useState('');
useEffect(() => {
if (isDev) {
@@ -19,7 +19,7 @@ function App() {
state: parsedMockState,
props: parsedMockState,
},
- })
+ });
}
}, []);
const idIndentationMap: {
@@ -27,7 +27,7 @@ function App() {
} = {};
const data: IData[] = [];
let i = 0;
- while(i < parsedVNodeData.length) {
+ while (i < parsedVNodeData.length) {
const id = parsedVNodeData[i] as string;
i++;
const name = parsedVNodeData[i] as string;
@@ -46,7 +46,7 @@ function App() {
const handleSearchChange = (str: string) => {
setFilterValue(str);
- }
+ };
return (
@@ -57,15 +57,15 @@ function App() {
-
+