From 2d7fc647a4cddd6e283a07faa440fd89380e54c2 Mon Sep 17 00:00:00 2001
From: * <8>
Date: Fri, 15 Apr 2022 17:58:40 +0800
Subject: [PATCH] Match-id-527aac42c8125a83b35e3ab8d4307eacc69da99a

---
 libs/extension/src/components/ComponentInfo.tsx   | 2 +-
 libs/extension/src/components/ComponentsInfo.less | 5 -----
 libs/extension/src/components/ResizeEvent.ts      | 2 +-
 libs/extension/src/components/SizeObserver.tsx    | 4 ++--
 libs/extension/src/components/VList.tsx           | 4 +++-
 libs/extension/src/components/VTree.tsx           | 4 ++--
 libs/extension/src/hooks/FilterTree.ts            | 2 +-
 libs/extension/src/parser/parseAttr.ts            | 8 ++------
 8 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/libs/extension/src/components/ComponentInfo.tsx b/libs/extension/src/components/ComponentInfo.tsx
index 10a1f637..7d78c814 100644
--- a/libs/extension/src/components/ComponentInfo.tsx
+++ b/libs/extension/src/components/ComponentInfo.tsx
@@ -18,7 +18,7 @@ type IComponentInfo = {
   onClickParent: (item: IData) => void;
 };
 
-type IAttr = {
+export type IAttr = {
   name: string;
   type: string;
   value: string | boolean;
diff --git a/libs/extension/src/components/ComponentsInfo.less b/libs/extension/src/components/ComponentsInfo.less
index 9a52e2fb..853d4209 100644
--- a/libs/extension/src/components/ComponentsInfo.less
+++ b/libs/extension/src/components/ComponentsInfo.less
@@ -36,13 +36,8 @@
       border-bottom: unset;
     }
 
-    >:first-child {
-      padding: unset;
-    }
-
     >div {
       border-bottom: @divider-style;
-      padding: 0.5rem
     }
 
     .attrContainer {
diff --git a/libs/extension/src/components/ResizeEvent.ts b/libs/extension/src/components/ResizeEvent.ts
index 0150d0ad..69f6c1aa 100644
--- a/libs/extension/src/components/ResizeEvent.ts
+++ b/libs/extension/src/components/ResizeEvent.ts
@@ -60,7 +60,7 @@ export function addResizeListener(element: any, fn: any) {
     observer.data = 'about:blank';
     observer.onload = loadObserver;
     observer.type = 'text/html';
-    observer.__observeElement__ = element;
+    observer['__observeElement__'] = element;
     element.__observer__ = observer;
     element.appendChild(observer);
   } else {
diff --git a/libs/extension/src/components/SizeObserver.tsx b/libs/extension/src/components/SizeObserver.tsx
index 3d430093..47348bb6 100644
--- a/libs/extension/src/components/SizeObserver.tsx
+++ b/libs/extension/src/components/SizeObserver.tsx
@@ -4,8 +4,8 @@ import { addResizeListener, removeResizeListener } from './ResizeEvent';
 
 export function SizeObserver(props) {
   const { children, ...rest } = props;
-  const containerRef = useRef();
-  const [size, setSize] = useState();
+  const containerRef = useRef<HTMLDivElement>();
+  const [size, setSize] = useState<{width: number, height: number}>();
   const notifyChild = (element) => {
     setSize({
       width: element.offsetWidth,
diff --git a/libs/extension/src/components/VList.tsx b/libs/extension/src/components/VList.tsx
index c932a492..aeee688a 100644
--- a/libs/extension/src/components/VList.tsx
+++ b/libs/extension/src/components/VList.tsx
@@ -1,3 +1,5 @@
+// TODO:当前的 item 渲染效果较差，每次滚动所有项在数组中的位置都会发生变更。
+// 建议修改成选项增加减少时，未变更项在原数组中位置不变更
 
 import { useState, useRef, useEffect } from 'horizon';
 import styles from './VList.less';
@@ -30,7 +32,7 @@ export function VList<T extends { id: string }>(props: IProps<T>) {
   } = props;
   const [scrollTop, setScrollTop] = useState(data.indexOf(scrollToItem) * itemHeight);
   const renderInfoRef: { current: renderInfoType<T> } = useRef({ visibleItems: [], skipItemCountBeforeScrollItem: 0 });
-  const containerRef = useRef();
+  const containerRef = useRef<HTMLDivElement>();
   useEffect(() => {
     onRendered(renderInfoRef.current);
   });
diff --git a/libs/extension/src/components/VTree.tsx b/libs/extension/src/components/VTree.tsx
index a286e411..6b990dc1 100644
--- a/libs/extension/src/components/VTree.tsx
+++ b/libs/extension/src/components/VTree.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'horizon';
 import styles from './VTree.less';
 import Triangle from '../svgs/Triangle';
-import { createRegExp } from './../utils';
+import { createRegExp } from '../utils/regExpUtils';
 import { SizeObserver } from './SizeObserver';
 import { renderInfoType, VList } from './VList';
 
@@ -102,7 +102,7 @@ function VTree(props: {
   onRendered: (renderInfo: renderInfoType<IData>) => void,
   collapsedNodes?: IData[],
   onCollapseNode?: (item: IData[]) => void,
-  selectItem: IData[],
+  selectItem: IData,
   onSelectItem: (item: IData) => void,
 }) {
   const { data, highlightValue, scrollToItem, onRendered, onCollapseNode, onSelectItem } = props;
diff --git a/libs/extension/src/hooks/FilterTree.ts b/libs/extension/src/hooks/FilterTree.ts
index 178b9155..faa789f0 100644
--- a/libs/extension/src/hooks/FilterTree.ts
+++ b/libs/extension/src/hooks/FilterTree.ts
@@ -13,7 +13,7 @@
 // 找到该节点的缩进值，和index值，在data中向上遍历，通过缩进值判断父节点
 
 import { useState, useRef } from 'horizon';
-import { createRegExp } from '../utils';
+import { createRegExp } from '../utils/regExpUtils';
 
 /**
  * 把节点的父节点从收起节点数组中删除，并返回新的收起节点数组
diff --git a/libs/extension/src/parser/parseAttr.ts b/libs/extension/src/parser/parseAttr.ts
index c52b1891..f710141e 100644
--- a/libs/extension/src/parser/parseAttr.ts
+++ b/libs/extension/src/parser/parseAttr.ts
@@ -1,12 +1,8 @@
+import { IAttr } from "../components/ComponentInfo";
 
 // 将状态的值解析成固定格式
 export function parseAttr(rootAttr: any) {
-  const result: {
-    name: string,
-    type: string,
-    value: string,
-    indentation: number
-  }[] = [];
+  const result: IAttr[] = [];
   const indentation = 0;
   const parseSubAttr = (attr: any, parentIndentation: number, attrName: string) => {
     const stateType = typeof attr;