fix: parse tid in code

NetEase · Mar 5, 2024 · 91f0553 · 91f0553
1 parent 7470190
commit 91f0553
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 2,642 deletions.
diff --git a/apps/playground/src/helpers/mock-files.ts b/apps/playground/src/helpers/mock-files.ts
@@ -161,12 +161,12 @@ class App extends React.Component {
   render() {
     return (
       <Page title={tango.stores.app.title}>
-       <Section title="Section Title">
+       <Section tid="section1" title="Section Title">
        </Section>
-       <Section>
-       <Space>
+       <Section tid="section2">
+       <Space tid="space1">
           <LocalButton />
-          <Button>button</Button>
+          <Button tid="button1">button</Button>
           <Input />
           </Space>
         </Section>

diff --git a/packages/core/src/helpers/ast/traverse.ts b/packages/core/src/helpers/ast/traverse.ts
@@ -1279,9 +1279,11 @@ export function traverseViewFile(ast: t.File, idGenerator: IdGenerator) {
       const attributes = getJSXElementAttributes(path.node);
 
       // 获取组件的追踪属性
-      const trackId = attributes[SLOT.dnd];
+      const trackDnd = attributes[SLOT.dnd];
+      // 用户代码中的 id 标记
+      const codeId = attributes.tid;
 
-      let { component, id } = parseDndId(trackId);
+      let { component, id } = parseDndId(trackDnd);
       component = component || getJSXElementName(path.node);
       idGenerator.setItem(component);
 
@@ -1290,7 +1292,7 @@ export function traverseViewFile(ast: t.File, idGenerator: IdGenerator) {
       }
 
       // 如果没有 ID，生成组件的追踪 ID
-      if (!trackId) {
+      if (!trackDnd) {
         id = idGenerator.generateId(component);
       }
 
@@ -1301,16 +1303,20 @@ export function traverseViewFile(ast: t.File, idGenerator: IdGenerator) {
 
       // parentId 用于追溯上下游关系
       let parentId;
+      let parentCodeId;
       const parentNode = path.findParent((p) => p.isJSXElement());
 
       if (t.isJSXElement(parentNode?.node)) {
         const parentAttributes = getJSXElementAttributes(parentNode.node);
         parentId = parentAttributes[SLOT.dnd];
+        parentCodeId = parentAttributes.tid;
       }
 
       nodes.push({
         id,
+        codeId,
         parentId,
+        parentCodeId,
         component,
         rawNode: path.node,
       });

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -64,10 +64,18 @@ export interface ITangoViewNodeData<T = JSXElement> {
    * 节点 ID
    */
   id: string;
+  /**
+   * 代码中的 ID
+   */
+  codeId?: string;
   /**
    * 父亲节点的 ID
    */
   parentId: string;
+  /**
+   * 父节点中的 tid
+   */
+  parentCodeId?: string;
   /**
    * 组件名
    */

diff --git a/packages/designer/src/sidebar/outline-panel/components-tree.tsx b/packages/designer/src/sidebar/outline-panel/components-tree.tsx
@@ -80,10 +80,10 @@ const OutlineTreeNode: React.FC<{ node: ITangoViewNodeData } & ComponentsTreePro
     const workspace = useWorkspace();
     const sandboxQuery = useSandboxQuery();
     const [visible, setVisible] = useState(true);
-    const nodeLabel = useMemo(() => {
-      const { component, index } = parseDndId(node.id);
-      return `${component}:${index}`;
-    }, [node.id]);
+    const nodeLabel = (() => {
+      const { component } = parseDndId(node.id);
+      return `${component}${node.codeId ? `(${node.codeId})` : ''}`;
+    })();
     const componentPrototype = workspace.componentPrototypes.get(node.component);
     const icon = componentPrototype?.icon || 'icon-placeholder';
 

diff --git a/packages/helpers/src/helpers/constants.ts b/packages/helpers/src/helpers/constants.ts
@@ -1,6 +1,10 @@
 export const SLOT = {
   /**
-   * DND 追踪标记
+   * DND 追踪标记，通常值为 {{pagePath}}:{{componentName}}
    */
   dnd: 'data-dnd',
+  /**
+   * ID 追踪标记
+   */
+  id: 'data-id',
 };
diff --git a/packages/helpers/src/hoc/with-dnd.tsx b/packages/helpers/src/hoc/with-dnd.tsx
@@ -38,6 +38,13 @@ interface IWithDndOptions<T> {
   renderFooter?: (props: T) => React.ReactNode;
 }
 
+interface DraggableComponentProps {
+  /**
+   * 组件 ID
+   */
+  tid?: string;
+}
+
 const renderEmpty = (): React.ReactNode => null;
 
 export function withDnd(options: IWithDndOptions<any>) {
@@ -50,14 +57,17 @@ export function withDnd(options: IWithDndOptions<any>) {
     const override = options.overrideProps || {};
     const renderFooter = options.renderFooter || renderEmpty;
 
-    const Component = forwardRef<unknown, P>((props, refProp) => {
-      const dndId = props[SLOT.dnd];
+    const Component = forwardRef<unknown, P & DraggableComponentProps>((props, refProp) => {
       const dndProps = {
-        [SLOT.dnd]: dndId,
+        [SLOT.id]: props.tid, // id 作为唯一标记
+        [SLOT.dnd]: props[SLOT.dnd], // dnd 作为追踪标记
         draggable: draggable ? true : undefined,
       };
+
       const propsCopy = { ...props };
       delete propsCopy[SLOT.dnd];
+      delete propsCopy.tid;
+
       const ref = isFC ? undefined : refProp;
 
       if (!hasWrapper) {