From b3b68edbb898a60ad9df581a8b382898d39ad190 Mon Sep 17 00:00:00 2001
From: Wells <ww.sun@outlook.com>
Date: Wed, 13 Mar 2024 10:46:36 +0800
Subject: [PATCH] fix: show code id first in designer view

---
 packages/designer/src/helpers/dom.ts                       | 1 +
 packages/designer/src/sidebar/outline-panel/state-tree.tsx | 2 +-
 packages/designer/src/simulator/selection.tsx              | 2 +-
 packages/helpers/src/types/advanced.ts                     | 7 +++++++
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/designer/src/helpers/dom.ts b/packages/designer/src/helpers/dom.ts
index b2d1545b..029a30c6 100644
--- a/packages/designer/src/helpers/dom.ts
+++ b/packages/designer/src/helpers/dom.ts
@@ -75,6 +75,7 @@ export function getElementData(
   const display = getElementCSSDisplay(element);
   return {
     id: dnd.id,
+    codeId: dnd.index,
     name: dnd.component || element.tagName.toLowerCase(),
     filename: dnd.filename,
     bounding,
diff --git a/packages/designer/src/sidebar/outline-panel/state-tree.tsx b/packages/designer/src/sidebar/outline-panel/state-tree.tsx
index 7e176568..408512d3 100644
--- a/packages/designer/src/sidebar/outline-panel/state-tree.tsx
+++ b/packages/designer/src/sidebar/outline-panel/state-tree.tsx
@@ -26,7 +26,7 @@ export const StateTree = observer(() => {
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
   const tangoContext = pick(sandboxQuery.window['tango'] || {}, [
     'stores',
-    'refs',
+    'page',
     'services',
     'config',
   ]);
diff --git a/packages/designer/src/simulator/selection.tsx b/packages/designer/src/simulator/selection.tsx
index d53801ef..17f9b975 100644
--- a/packages/designer/src/simulator/selection.tsx
+++ b/packages/designer/src/simulator/selection.tsx
@@ -159,7 +159,7 @@ function SelectionBox({ showActions, actions, data }: SelectionBoxProps) {
             label={
               <>
                 <NameSelector
-                  label={data.name}
+                  label={data.codeId || data.name}
                   parents={data.parents}
                   onSelect={(item) => {
                     workspace.selectSource.select(item);
diff --git a/packages/helpers/src/types/advanced.ts b/packages/helpers/src/types/advanced.ts
index d9a78894..569f4b22 100644
--- a/packages/helpers/src/types/advanced.ts
+++ b/packages/helpers/src/types/advanced.ts
@@ -104,7 +104,14 @@ export type ElementBoundingType = {
  * 选中项数据类型
  */
 export interface ISelectedItemData {
+  /**
+   * 节点的 data-dnd 值
+   */
   id?: string;
+  /**
+   * 节点的 codeId
+   */
+  codeId?: string;
   /**
    * 组件名
    */