From 1337802a4168147c4e9c0bc8acfb8ef0c2f044ef Mon Sep 17 00:00:00 2001
From: rdmclin2 <rdmclin2@gmail.com>
Date: Thu, 7 Sep 2023 15:53:40 +0800
Subject: [PATCH 01/10] :boom: feat: add keyManager list

---
 src/SortableList/container/StoreUpdater.tsx | 29 +++++++++++++++++++--
 src/SortableList/demos/Basic.tsx            |  2 +-
 src/SortableList/store/initialState.ts      |  1 +
 src/SortableList/store/store.ts             |  9 +++++--
 src/SortableList/type/store.ts              |  4 +++
 5 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/SortableList/container/StoreUpdater.tsx b/src/SortableList/container/StoreUpdater.tsx
index d1e060d0..04a4de9e 100644
--- a/src/SortableList/container/StoreUpdater.tsx
+++ b/src/SortableList/container/StoreUpdater.tsx
@@ -1,3 +1,4 @@
+import { produce } from 'immer';
 import { forwardRef, useImperativeHandle } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 import { useSortableList } from '..';
@@ -24,8 +25,32 @@ const StoreUpdater = forwardRef(
     const storeApi = useStoreApi();
     const useStoreUpdater = createStoreUpdater<StoreUpdaterProps>(storeApi);
 
-    useStoreUpdater('value', initialValues, []);
-    useStoreUpdater('value', value);
+    // KeyManager 和 value & initialValues 同步。
+    const KeyManagerUpdater = (state, key) => {
+      const { keyManager } = storeApi.getState();
+      // value 为空处理
+      const value = state[key] || [];
+      const manager = produce(keyManager, (draft) => {
+        value.forEach((__, index) => {
+          const key = draft[index];
+          if (key === undefined) {
+            draft[index] = crypto.randomUUID();
+          }
+        });
+        return draft;
+      });
+
+      storeApi.setState({ keyManager: manager, [key]: value });
+    };
+
+    useStoreUpdater('value', initialValues, [], (state) => {
+      KeyManagerUpdater(state, 'initialValues');
+    });
+
+    useStoreUpdater('value', value, [value], (state) => {
+      KeyManagerUpdater(state, 'value');
+    });
+
     useStoreUpdater('actions', actions);
     useStoreUpdater('getId', getId);
     useStoreUpdater('onChange', onChange);
diff --git a/src/SortableList/demos/Basic.tsx b/src/SortableList/demos/Basic.tsx
index b845ce74..f87727f4 100644
--- a/src/SortableList/demos/Basic.tsx
+++ b/src/SortableList/demos/Basic.tsx
@@ -13,7 +13,7 @@ const Demo = () => {
   const token = useTheme();
   return (
     <Flexbox padding={24} style={{ background: token.colorBgLayout }}>
-      <SortableList value={list} />
+      <SortableList initialValues={list} />
     </Flexbox>
   );
 };
diff --git a/src/SortableList/store/initialState.ts b/src/SortableList/store/initialState.ts
index 7f8b516e..d7609c97 100644
--- a/src/SortableList/store/initialState.ts
+++ b/src/SortableList/store/initialState.ts
@@ -4,6 +4,7 @@ import { SortableItem, SortableListState } from '../type';
 export const initialState: SortableListState = {
   activeId: null,
   value: [],
+  keyManager: [],
   hideRemove: false,
   onChange: undefined,
   renderItem: undefined,
diff --git a/src/SortableList/store/store.ts b/src/SortableList/store/store.ts
index e24b3f6c..3f37bbd5 100644
--- a/src/SortableList/store/store.ts
+++ b/src/SortableList/store/store.ts
@@ -44,11 +44,16 @@ const vanillaStore: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
   },
   // ===== 更新 listData 方法 ======= //
   dispatchListData: (payload) => {
-    const { value, onChange } = get();
+    const { value, keyManager, onChange } = get();
     const data = listDataReducer(value, payload);
+    // value 值变化的时候，keyManager 也需要变化
+    const keys = listDataReducer(keyManager, payload);
+
+    console.log('keys', keys);
+
     if (data) {
       if (isEqual(value, data)) return;
-      set({ value: data });
+      set({ value: data, keyManager: keys });
       if (onChange) onChange(data, payload);
     }
   },
diff --git a/src/SortableList/type/store.ts b/src/SortableList/type/store.ts
index 65c664e9..795b3529 100644
--- a/src/SortableList/type/store.ts
+++ b/src/SortableList/type/store.ts
@@ -34,6 +34,10 @@ export interface SortableListState {
    * 值
    */
   value?: SortableItemList;
+  /**
+   * 和 Value 值对应的 id 管理器
+   */
+  keyManager?: UniqueIdentifier[];
   /**
    * 渲染额外区域
    */

From b957f65cef491204041dcf7ac3850ad4c8656478 Mon Sep 17 00:00:00 2001
From: rdmclin2 <rdmclin2@gmail.com>
Date: Thu, 7 Sep 2023 16:13:09 +0800
Subject: [PATCH 02/10] :recycle: chore: remove SortableItem type

---
 package.json                                  |  1 -
 src/SortableList/container/StoreUpdater.tsx   | 19 ++++-----
 src/SortableList/container/index.tsx          |  6 +--
 src/SortableList/demos/Basic.tsx              |  2 +-
 src/SortableList/demos/controlled.tsx         |  6 +--
 src/SortableList/demos/creatorButtonProps.tsx |  2 +-
 src/SortableList/demos/data.ts                |  6 +--
 src/SortableList/demos/getId.tsx              | 40 -------------------
 src/SortableList/demos/getItemStyles.tsx      |  9 +----
 src/SortableList/hooks/useSortableList.ts     | 16 ++++----
 src/SortableList/index.ts                     |  7 +---
 src/SortableList/store/initialState.ts        |  7 +---
 src/SortableList/type/action.ts               |  6 +--
 src/SortableList/type/component.ts            | 20 +++-------
 src/SortableList/type/store.ts                | 13 ++----
 src/SortableList/utils/index.tsx              |  7 ++--
 16 files changed, 46 insertions(+), 121 deletions(-)
 delete mode 100644 src/SortableList/demos/getId.tsx

diff --git a/package.json b/package.json
index 8d1d65b6..c344eb30 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,6 @@
     "lodash.unionby": "^4.8.0",
     "lodash.uniq": "^4.5.0",
     "mockjs": "^1.1.0",
-    "object-hash": "^3.0.0",
     "polished": "^4.2.2",
     "prettier": "^2.8.8",
     "rc-util": "^5.37.0",
diff --git a/src/SortableList/container/StoreUpdater.tsx b/src/SortableList/container/StoreUpdater.tsx
index 04a4de9e..822d9b9d 100644
--- a/src/SortableList/container/StoreUpdater.tsx
+++ b/src/SortableList/container/StoreUpdater.tsx
@@ -40,17 +40,11 @@ const StoreUpdater = forwardRef(
         return draft;
       });
 
-      storeApi.setState({ keyManager: manager, [key]: value });
+      storeApi.setState({ keyManager: manager });
     };
 
-    useStoreUpdater('value', initialValues, [], (state) => {
-      KeyManagerUpdater(state, 'initialValues');
-    });
-
-    useStoreUpdater('value', value, [value], (state) => {
-      KeyManagerUpdater(state, 'value');
-    });
-
+    useStoreUpdater('value', initialValues, []);
+    useStoreUpdater('value', value);
     useStoreUpdater('actions', actions);
     useStoreUpdater('getId', getId);
     useStoreUpdater('onChange', onChange);
@@ -61,6 +55,13 @@ const StoreUpdater = forwardRef(
     useStoreUpdater('creatorButtonProps', creatorButtonProps);
     useStoreUpdater('hideRemove', hideRemove);
 
+    // KeyManager 状态受控
+    useStoreUpdater('initialValues', initialValues, [], (state) => {
+      KeyManagerUpdater(state, 'initialValues');
+    });
+
+    useStoreUpdater('value', value, null, (state) => KeyManagerUpdater(state, 'value'));
+
     // 将 store 传递到外部
     const instance = useSortableList();
     useImperativeHandle(ref, () => instance);
diff --git a/src/SortableList/container/index.tsx b/src/SortableList/container/index.tsx
index 0d6f2b43..22566345 100644
--- a/src/SortableList/container/index.tsx
+++ b/src/SortableList/container/index.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, memo, ReactNode } from 'react';
 import { ConfigProvider } from '../../ConfigProvider';
-import type { SortableItem, StoreUpdaterProps } from '../type';
+import type { StoreUpdaterProps } from '../type';
 import type { AppProps } from './App';
 import App from './App';
 import { SortableListProvider } from './Provider';
@@ -10,9 +10,7 @@ export { SortableListProvider } from './Provider';
 
 export interface SortableListProps<T> extends StoreUpdaterProps<T>, AppProps {}
 
-export const SortableList: <T extends SortableItem = SortableItem>(
-  props: SortableListProps<T>,
-) => ReactNode = memo(
+export const SortableList: <T>(props: SortableListProps<T>) => ReactNode = memo(
   forwardRef((props, ref) => {
     const { SHOW_STORE_IN_DEVTOOLS, className, style, ...res } = props;
     return (
diff --git a/src/SortableList/demos/Basic.tsx b/src/SortableList/demos/Basic.tsx
index f87727f4..18ee24eb 100644
--- a/src/SortableList/demos/Basic.tsx
+++ b/src/SortableList/demos/Basic.tsx
@@ -7,7 +7,7 @@ import { SortableList } from '@ant-design/pro-editor';
 import { useTheme } from 'antd-style';
 import { Flexbox } from 'react-layout-kit';
 
-const list = [{ id: 'hello' }, { id: 'world' }];
+const list = ['hello', 'world'];
 
 const Demo = () => {
   const token = useTheme();
diff --git a/src/SortableList/demos/controlled.tsx b/src/SortableList/demos/controlled.tsx
index b62f90ae..05def598 100644
--- a/src/SortableList/demos/controlled.tsx
+++ b/src/SortableList/demos/controlled.tsx
@@ -3,14 +3,14 @@
  * description: onChange 会返回变更数据
  * compact: true
  */
-import { SortableItem, SortableList } from '@ant-design/pro-editor';
+import { SortableList } from '@ant-design/pro-editor';
 import { Button } from 'antd';
 import { useTheme } from 'antd-style';
 import { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 const Demo = () => {
-  const [list, setList] = useState<SortableItem[]>([{ id: 'hello' }, { id: 'world' }]);
+  const [list, setList] = useState(['hello', 'world']);
 
   const token = useTheme();
   return (
@@ -25,7 +25,7 @@ const Demo = () => {
       <Button
         type="primary"
         onClick={() => {
-          setList([{ id: 'foo' }, { id: 'bar' }]);
+          setList(['foo', 'bar', 'yes']);
         }}
         style={{ marginTop: 8 }}
       >
diff --git a/src/SortableList/demos/creatorButtonProps.tsx b/src/SortableList/demos/creatorButtonProps.tsx
index c5a994c1..264d5320 100644
--- a/src/SortableList/demos/creatorButtonProps.tsx
+++ b/src/SortableList/demos/creatorButtonProps.tsx
@@ -7,7 +7,7 @@ import { SortableList } from '@ant-design/pro-editor';
 import { useTheme } from 'antd-style';
 import { Flexbox } from 'react-layout-kit';
 
-const list = [{ id: 'hello' }, { id: 'world' }];
+const list = ['hello', 'world'];
 
 const Demo = () => {
   const token = useTheme();
diff --git a/src/SortableList/demos/data.ts b/src/SortableList/demos/data.ts
index a086a566..0e5b5748 100644
--- a/src/SortableList/demos/data.ts
+++ b/src/SortableList/demos/data.ts
@@ -1,9 +1,7 @@
-import { SortableItem } from '@ant-design/pro-editor';
-
-export type SchemaItem = SortableItem<{
+export type SchemaItem = {
   title?: string;
   dataIndex?: string;
-}>;
+};
 
 export interface ItemRenderProps {
   item: SchemaItem;
diff --git a/src/SortableList/demos/getId.tsx b/src/SortableList/demos/getId.tsx
deleted file mode 100644
index fde2cbce..00000000
--- a/src/SortableList/demos/getId.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * title: 自定义 Id 生成规则
- * description: 如果传入的数据中没有 `id` 字段，可以通过 `getId` 指定获取唯一值的方法
- * compact: true
- */
-import { SortableList } from '@ant-design/pro-editor';
-import { Divider } from 'antd';
-import { useTheme } from 'antd-style';
-import { Flexbox } from 'react-layout-kit';
-
-const Demo = () => {
-  const token = useTheme();
-  return (
-    <Flexbox padding={24} style={{ background: token.colorBgLayout }}>
-      <SortableList
-        value={[
-          { text: 'hello', dataIndex: 'foo' },
-          { text: 'world', dataIndex: 'bar' },
-        ]}
-        getId={(item) => item.dataIndex}
-        onChange={(value) => {
-          console.log('value', value);
-        }}
-      />
-      <Divider plain>当值相同且未指定 id 时无法正常排序</Divider>
-      <SortableList
-        value={[
-          { text: 'hello', dataIndex: 'world' },
-          { text: 'hello', dataIndex: 'world' },
-        ]}
-        renderContent={(item) => item.text}
-        onChange={(value) => {
-          console.log('value', value);
-        }}
-      />
-    </Flexbox>
-  );
-};
-
-export default Demo;
diff --git a/src/SortableList/demos/getItemStyles.tsx b/src/SortableList/demos/getItemStyles.tsx
index e97e7bc5..56a373e6 100644
--- a/src/SortableList/demos/getItemStyles.tsx
+++ b/src/SortableList/demos/getItemStyles.tsx
@@ -2,16 +2,11 @@
  * title: 自定义样式
  * description: 通过 `getItemStyles` 可以自定义每个 item 的样式。
  */
-import { SortableItem, SortableList } from '@ant-design/pro-editor';
+import { SortableList } from '@ant-design/pro-editor';
 import { useState } from 'react';
 
 const Demo = () => {
-  const [list, setList] = useState<SortableItem[]>([
-    { id: '关关雎鸠' },
-    { id: '在河之洲' },
-    { id: '窈窕淑女' },
-    { id: '君子好逑' },
-  ]);
+  const [list, setList] = useState(['关关雎鸠', '在河之洲', '窈窕淑女', '君子好逑']);
 
   return (
     <SortableList
diff --git a/src/SortableList/hooks/useSortableList.ts b/src/SortableList/hooks/useSortableList.ts
index 98bc2355..4e16567e 100644
--- a/src/SortableList/hooks/useSortableList.ts
+++ b/src/SortableList/hooks/useSortableList.ts
@@ -1,6 +1,6 @@
 import { useMemoizedFn } from 'ahooks';
 import { useStoreApi } from '../store';
-import { SortableItem, UniqueIdentifier } from '../type';
+import { UniqueIdentifier } from '../type';
 /**
  * SortableList 实例对象
  * @template T 节点数据类型
@@ -18,17 +18,17 @@ export interface SortableListInstance {
    */
   getIdByIndex: (index: number) => UniqueIdentifier;
   /**
-   * 获取当前树的数据
-   * @returns 当前树的数据
+   * 获取当前列表的数据
+   * @returns 当前列表的数据
    */
-  getValue: () => SortableItem[];
+  getValue: () => any[];
   /**
    * 添加项
    * @param item 数据
    * @param index 列表索引
    * @returns
    */
-  addItem: (item?: SortableItem, index?: number) => void;
+  addItem: (item?: any, index?: number) => void;
   /**
    * 删除项
    * @param index 列表索引
@@ -41,7 +41,7 @@ export interface SortableListInstance {
    * @param index 列表索引
    * @returns
    */
-  updateItem: (item: Partial<SortableItem>, index: number) => void;
+  updateItem: (item: any, index: number) => void;
 }
 
 export const useSortableList = (): SortableListInstance => {
@@ -54,11 +54,11 @@ export const useSortableList = (): SortableListInstance => {
     return indexId;
   });
   const getValue = useMemoizedFn(() => storeApi.getState().value);
-  const addItem = (item?: SortableItem, index?: number) =>
+  const addItem = (item?: any, index?: number) =>
     storeApi.getState().dispatchListData({ type: 'addItem', item, index });
   const removeItem = (index: number) =>
     storeApi.getState().dispatchListData({ type: 'removeItem', index });
-  const updateItem = (item: Partial<SortableItem>, index: number) =>
+  const updateItem = (item: Partial<any>, index: number) =>
     storeApi.getState().dispatchListData({ type: 'updateItem', item, index });
 
   return {
diff --git a/src/SortableList/index.ts b/src/SortableList/index.ts
index dea51a1f..25539dfa 100644
--- a/src/SortableList/index.ts
+++ b/src/SortableList/index.ts
@@ -3,9 +3,4 @@ export * from './container';
 // hooks 和相关类型定义
 export { useSortableList } from './hooks/useSortableList';
 export type { SortableListInstance } from './hooks/useSortableList';
-export type {
-  SortableItem,
-  SortableItemList,
-  SortableListDispatchPayload,
-  SortableListRef,
-} from './type';
+export type { SortableListDispatchPayload, SortableListRef } from './type';
diff --git a/src/SortableList/store/initialState.ts b/src/SortableList/store/initialState.ts
index d7609c97..576a0a90 100644
--- a/src/SortableList/store/initialState.ts
+++ b/src/SortableList/store/initialState.ts
@@ -1,5 +1,4 @@
-import hash from 'object-hash';
-import { SortableItem, SortableListState } from '../type';
+import { SortableListState } from '../type';
 
 export const initialState: SortableListState = {
   activeId: null,
@@ -9,9 +8,5 @@ export const initialState: SortableListState = {
   onChange: undefined,
   renderItem: undefined,
   actions: [],
-  // 默认从 id 中取，如果没有 id 则使用 hash 生成，无法保证唯一性
-  getId: (item: SortableItem, index: number) => {
-    return item?.id || `${hash(item)}-${index}`;
-  },
   getItemStyles: () => ({}),
 };
diff --git a/src/SortableList/type/action.ts b/src/SortableList/type/action.ts
index 156b2613..90a4d3b1 100644
--- a/src/SortableList/type/action.ts
+++ b/src/SortableList/type/action.ts
@@ -1,5 +1,3 @@
-import { SortableItem } from '../type';
-
 // 新增节点
 export interface AddItemAction {
   /**
@@ -9,7 +7,7 @@ export interface AddItemAction {
   /**
    * 新增的节点
    */
-  item: SortableItem;
+  item: any;
   /**
    * 新增节点的位置
    * @default undefined
@@ -58,7 +56,7 @@ export interface UpdateItemAction {
   /**
    * 修改后的节点内容
    */
-  item: Partial<SortableItem>;
+  item: any;
 }
 
 /**
diff --git a/src/SortableList/type/component.ts b/src/SortableList/type/component.ts
index 209c6fca..a2b0112e 100644
--- a/src/SortableList/type/component.ts
+++ b/src/SortableList/type/component.ts
@@ -3,15 +3,7 @@ import type { Transform } from '@dnd-kit/utilities';
 import type { CSSProperties, ReactElement, Ref } from 'react';
 import { StoreUpdaterProps } from '../type/store';
 
-export interface SortableBaseItem {
-  id?: UniqueIdentifier;
-}
-
-export type SortableItem<T = Record<string, any>> = SortableBaseItem & T;
-
-export type SortableItemList<T = Record<string, any>> = SortableItem<T>[];
-
-export interface BaseItemProps<T = SortableItem>
+export interface BaseItemProps<T = any>
   extends Pick<StoreUpdaterProps<T>, 'renderItem' | 'renderContent' | 'actions' | 'hideRemove'> {
   dragOverlay?: boolean;
   color?: string;
@@ -33,11 +25,11 @@ export interface BaseItemProps<T = SortableItem>
   prefixCls?: string;
 }
 
-export type RenderActionProps<T = SortableItem> =
+export type RenderActionProps<T = any> =
   | ((item: T, index: number) => React.ReactNode[])
   | React.ReactNode[];
 
-export interface SortableItemProps<T = SortableItem>
+export interface SortableItemProps<T = any>
   extends Pick<
     StoreUpdaterProps<T>,
     'renderItem' | 'renderContent' | 'actions' | 'getItemStyles' | 'hideRemove'
@@ -51,7 +43,7 @@ export interface SortableItemProps<T = SortableItem>
   prefixCls?: string;
 }
 
-export type RenderContent<T = SortableItem> = (item: T, index: number) => React.ReactNode;
+export type RenderContent<T = any> = (item: T, index: number) => React.ReactNode;
 
 export type RenderEmpty = () => React.ReactNode;
 
@@ -63,14 +55,14 @@ export interface CreatorButtonProps {
   /**
    * 生成初始值逻辑
    */
-  record: (index: number) => SortableItem<Record<string, any>>;
+  record: (index: number) => any;
   /**
    * 新增一行按钮文案
    */
   creatorButtonText?: string;
 }
 
-export type RenderItem<T = SortableItem> = (
+export type RenderItem<T = any> = (
   item: T,
   options: {
     /**
diff --git a/src/SortableList/type/store.ts b/src/SortableList/type/store.ts
index 795b3529..712301b1 100644
--- a/src/SortableList/type/store.ts
+++ b/src/SortableList/type/store.ts
@@ -6,16 +6,11 @@ import type {
   RenderContent,
   RenderEmpty,
   RenderItem,
-  SortableItem,
-  SortableItemList,
   SortableListDispatchPayload,
   UniqueIdentifier,
 } from '../type';
 
-export type OnChange<T = SortableItem> = (
-  items: SortableItemList<T>,
-  event: SortableListDispatchPayload,
-) => void;
+export type OnChange<T = any> = (items: T[], event: SortableListDispatchPayload) => void;
 
 export interface SortableListState {
   /*
@@ -33,7 +28,7 @@ export interface SortableListState {
   /**
    * 值
    */
-  value?: SortableItemList;
+  value?: any[];
   /**
    * 和 Value 值对应的 id 管理器
    */
@@ -75,13 +70,13 @@ export interface SortableListState {
 /**
  * 供外部使用的 ref 方法
  */
-export interface SortableListRef<T = SortableItem> {
+export interface SortableListRef<T = any> {
   addItem: (item?: T, index?: number) => void;
   removeItem: (index: number) => void;
   updateItem: (item: T, index: number) => void;
 }
 
-export interface StoreUpdaterProps<T = SortableItem> {
+export interface StoreUpdaterProps<T = any> {
   /**
    * 值
    */
diff --git a/src/SortableList/utils/index.tsx b/src/SortableList/utils/index.tsx
index 2bf7597a..fec616d5 100644
--- a/src/SortableList/utils/index.tsx
+++ b/src/SortableList/utils/index.tsx
@@ -1,7 +1,6 @@
 import type { UniqueIdentifier } from '@dnd-kit/core';
 import isEqual from 'lodash.isequal';
 import { useEffect, useState } from 'react';
-import type { SortableItem } from '../type';
 
 const defaultInitializer = (index: number) => index;
 
@@ -62,9 +61,9 @@ export const useLatest = (props: any) => {
   return [state, setState];
 };
 
-export const getIndexOfActiveItem = <T extends SortableItem>(
-  list: T[],
-  getId: (item: T, index: number) => UniqueIdentifier,
+export const getIndexOfActiveItem = (
+  list: any[],
+  getId: (item: any, index: number) => UniqueIdentifier,
   id?: UniqueIdentifier,
 ) => {
   return id ? list.findIndex((item, index) => getId(item, index) === id) : -1;

From c45be46e3679fefc13356ecfcfaad121eb7b85fc Mon Sep 17 00:00:00 2001
From: rdmclin2 <rdmclin2@gmail.com>
Date: Thu, 7 Sep 2023 16:22:24 +0800
Subject: [PATCH 03/10] :recycle: chore: remove getId

---
 src/SortableList/container/App.tsx          | 18 +++++---------
 src/SortableList/container/StoreUpdater.tsx |  2 --
 src/SortableList/features/DragOverlay.tsx   |  6 ++---
 src/SortableList/features/SortList.tsx      |  9 ++++---
 src/SortableList/hooks/useSortableList.ts   |  4 ++--
 src/SortableList/index.md                   | 26 ++++++++++-----------
 src/SortableList/store/store.ts             |  6 ++---
 src/SortableList/type/store.ts              |  8 -------
 src/SortableList/utils/index.tsx            |  8 ++-----
 9 files changed, 32 insertions(+), 55 deletions(-)

diff --git a/src/SortableList/container/App.tsx b/src/SortableList/container/App.tsx
index 7905ef69..fd610352 100644
--- a/src/SortableList/container/App.tsx
+++ b/src/SortableList/container/App.tsx
@@ -8,7 +8,6 @@ import {
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
-import isEqual from 'lodash.isequal';
 import { createPortal } from 'react-dom';
 
 import { restrictToVerticalAxis, restrictToWindowEdges } from '@dnd-kit/modifiers';
@@ -35,7 +34,7 @@ const selector = (s: Store) => ({
   handleDragStart: s.handleDragStart,
   handleDragCancel: s.handleDragCancel,
   handleDragEnd: s.handleDragEnd,
-  getId: s.getId,
+  keyManager: s.keyManager,
 });
 
 export interface AppProps {
@@ -54,9 +53,10 @@ export interface AppProps {
 }
 
 const App: FC<AppProps> = ({ className, style, prefixCls: customPrefixCls }) => {
-  const { handleDragStart, handleDragCancel, handleDragEnd, getId } = useStore(selector, shallow);
-
-  const items = useStore((s) => s.value, isEqual);
+  const { handleDragStart, handleDragCancel, handleDragEnd, keyManager } = useStore(
+    selector,
+    shallow,
+  );
 
   const prefixCls = getPrefixCls('sortable-list', customPrefixCls);
 
@@ -84,13 +84,7 @@ const App: FC<AppProps> = ({ className, style, prefixCls: customPrefixCls }) =>
         onDragCancel={handleDragCancel}
         modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}
       >
-        <SortableContext
-          items={items.map((item, index) => ({
-            ...item,
-            id: getId(item, index),
-          }))}
-          strategy={verticalListSortingStrategy}
-        >
+        <SortableContext items={keyManager} strategy={verticalListSortingStrategy}>
           <SortList prefixCls={prefixCls} />
           {overlay}
         </SortableContext>
diff --git a/src/SortableList/container/StoreUpdater.tsx b/src/SortableList/container/StoreUpdater.tsx
index 822d9b9d..cb800f1c 100644
--- a/src/SortableList/container/StoreUpdater.tsx
+++ b/src/SortableList/container/StoreUpdater.tsx
@@ -16,7 +16,6 @@ const StoreUpdater = forwardRef(
       renderContent,
       renderEmpty,
       getItemStyles,
-      getId,
       creatorButtonProps,
       hideRemove,
     }: StoreUpdaterProps,
@@ -46,7 +45,6 @@ const StoreUpdater = forwardRef(
     useStoreUpdater('value', initialValues, []);
     useStoreUpdater('value', value);
     useStoreUpdater('actions', actions);
-    useStoreUpdater('getId', getId);
     useStoreUpdater('onChange', onChange);
     useStoreUpdater('renderItem', renderItem);
     useStoreUpdater('renderContent', renderContent);
diff --git a/src/SortableList/features/DragOverlay.tsx b/src/SortableList/features/DragOverlay.tsx
index 51d1d978..fab0ea6d 100644
--- a/src/SortableList/features/DragOverlay.tsx
+++ b/src/SortableList/features/DragOverlay.tsx
@@ -14,7 +14,6 @@ import { getIndexOfActiveItem } from '../utils';
 const selector = (s: Store) => ({
   activeId: s.activeId,
   hideRemove: s.hideRemove,
-  getId: s.getId,
   renderItem: s.renderItem,
   renderContent: s.renderContent,
   getItemStyles: s.getItemStyles,
@@ -25,12 +24,13 @@ interface OverlayProps {
 }
 
 const Overlay: FC<OverlayProps> = ({ prefixCls }) => {
-  const { activeId, getId, renderItem, hideRemove, getItemStyles, renderContent } = useStore(
+  const { activeId, renderItem, hideRemove, getItemStyles, renderContent } = useStore(
     selector,
     shallow,
   );
   const items = useStore((s) => s.value, isEqual);
-  const activeIndex = getIndexOfActiveItem(items, getId, activeId);
+  const keyManager = useStore((s) => s.keyManager, isEqual);
+  const activeIndex = getIndexOfActiveItem(keyManager, activeId);
 
   return (
     <DragOverlay
diff --git a/src/SortableList/features/SortList.tsx b/src/SortableList/features/SortList.tsx
index 60a839ec..31912e6f 100644
--- a/src/SortableList/features/SortList.tsx
+++ b/src/SortableList/features/SortList.tsx
@@ -17,7 +17,7 @@ const selector = (s: Store) => ({
   renderContent: s.renderContent,
   renderEmpty: s.renderEmpty,
   getItemStyles: s.getItemStyles,
-  getId: s.getId,
+  keyManager: s.keyManager,
   actions: s.actions,
   hideRemove: s.hideRemove,
   creatorButtonProps: s.creatorButtonProps,
@@ -36,9 +36,9 @@ const SortableList: FC<SortableListProps> = ({ prefixCls }) => {
     renderEmpty,
     creatorButtonProps = false,
     hideRemove,
+    keyManager,
     getItemStyles,
     actions,
-    getId,
   } = useStore(selector, shallow);
 
   const { styles } = useStyle(prefixCls);
@@ -79,11 +79,10 @@ const SortableList: FC<SortableListProps> = ({ prefixCls }) => {
       {creatorButtonProps !== false && position === 'top' ? <CreateButton /> : null}
       <List prefixCls={prefixCls}>
         {items.map((item, index) => {
-          const id = getId(item, index);
           return (
             <SortableItem
-              key={id}
-              id={id}
+              key={keyManager[index]}
+              id={keyManager[index]}
               item={item}
               index={index}
               actions={actions}
diff --git a/src/SortableList/hooks/useSortableList.ts b/src/SortableList/hooks/useSortableList.ts
index 4e16567e..e72100f4 100644
--- a/src/SortableList/hooks/useSortableList.ts
+++ b/src/SortableList/hooks/useSortableList.ts
@@ -49,8 +49,8 @@ export const useSortableList = (): SortableListInstance => {
 
   const getActiveId = useMemoizedFn(() => storeApi.getState().activeId);
   const getIdByIndex = useMemoizedFn((index?: number) => {
-    const { getId, value } = storeApi.getState();
-    const indexId = getId(value?.[index], index) || null;
+    const { keyManager } = storeApi.getState();
+    const indexId = keyManager[index] || null;
     return indexId;
   });
   const getValue = useMemoizedFn(() => storeApi.getState().value);
diff --git a/src/SortableList/index.md b/src/SortableList/index.md
index ecb0c507..39be9d35 100644
--- a/src/SortableList/index.md
+++ b/src/SortableList/index.md
@@ -25,26 +25,24 @@ demo:
 <code src="./demos/ref.tsx" ></code>
 <code src="./demos/useSortableList.tsx" ></code>
 <code src="./demos/provider.tsx" ></code>
-<code src="./demos/getId.tsx" ></code>
 <code src="./demos/empty.tsx" ></code>
 
 ## API
 
 ### Basic 组件属性
 
-| 属性名             | 类型                                                             | 描述                                                                              |
-| ------------------ | ---------------------------------------------------------------- | --------------------------------------------------------------------------------- |
-| value              | `T[]`                                                            | 值                                                                                |
-| initialValues      | `T[]`                                                            | 初始值                                                                            |
-| onChange           | `(value: T[], event: ListDataDispatchPayload) => void`           | 值变化                                                                            |
-| renderContent      | `(item: T, index: number) => ReactNode`                          | 自定义可排序列表项内容                                                            |
-| getId              | `(item: T, index: number) => string\|number`                     | 自定义获取 `id` 规则，默认获取数据中的 `id` 值或计算 item `sha1` 但无法保证唯一性 |
-| renderItem         | `(item: T, options) => ReactNode`                                | 自定义可排序列表项                                                                |
-| getItemStyle       | `(status: GetItemStylesArgs) => ReactNode`                       | 自定义容器样式                                                                    |
-| ref                | `ForwardedRef<SortableListRef<T>>`                               | 对外部暴露方法                                                                    |
-| hideRemove         | `boolean`                                                        | 是否隐藏删除按钮，默认为 false                                                    |
-| creatorButtonProps | `CreatorButtonProps\|false`                                      | 新建对象相关属性                                                                  |
-| actions            | `(item: T, index: number) => ReactNode[]` \| `React.ReactNode[]` | 除列表自带操作之外的其他操作自渲染                                                |
+| 属性名             | 类型                                                             | 描述                               |
+| ------------------ | ---------------------------------------------------------------- | ---------------------------------- |
+| value              | `T[]`                                                            | 值                                 |
+| initialValues      | `T[]`                                                            | 初始值                             |
+| onChange           | `(value: T[], event: ListDataDispatchPayload) => void`           | 值变化                             |
+| renderContent      | `(item: T, index: number) => ReactNode`                          | 自定义可排序列表项内容             |
+| renderItem         | `(item: T, options) => ReactNode`                                | 自定义可排序列表项                 |
+| getItemStyle       | `(status: GetItemStylesArgs) => ReactNode`                       | 自定义容器样式                     |
+| ref                | `ForwardedRef<SortableListRef<T>>`                               | 对外部暴露方法                     |
+| hideRemove         | `boolean`                                                        | 是否隐藏删除按钮，默认为 false     |
+| creatorButtonProps | `CreatorButtonProps\|false`                                      | 新建对象相关属性                   |
+| actions            | `(item: T, index: number) => ReactNode[]` \| `React.ReactNode[]` | 除列表自带操作之外的其他操作自渲染 |
 
 ### CreatorButtonProps 创建按钮属性
 
diff --git a/src/SortableList/store/store.ts b/src/SortableList/store/store.ts
index 3f37bbd5..4ba9d52c 100644
--- a/src/SortableList/store/store.ts
+++ b/src/SortableList/store/store.ts
@@ -26,10 +26,10 @@ const vanillaStore: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
     set({ activeId });
   },
   handleDragEnd: ({ over, active }) => {
-    const { dispatchListData, value, getId } = get();
+    const { dispatchListData, keyManager } = get();
     if (over) {
-      const activeIndex = getIndexOfActiveItem(value, getId, active.id);
-      const overIndex = getIndexOfActiveItem(value, getId, over.id);
+      const activeIndex = getIndexOfActiveItem(keyManager, active.id);
+      const overIndex = getIndexOfActiveItem(keyManager, over.id);
 
       dispatchListData({
         type: 'moveItem',
diff --git a/src/SortableList/type/store.ts b/src/SortableList/type/store.ts
index 712301b1..c3c8400a 100644
--- a/src/SortableList/type/store.ts
+++ b/src/SortableList/type/store.ts
@@ -37,10 +37,6 @@ export interface SortableListState {
    * 渲染额外区域
    */
   actions?: RenderActionProps;
-  /**
-   * 获取唯一标识
-   */
-  getId?: (item: any, index: number) => UniqueIdentifier;
   /**
    * 渲染可排序项
    */
@@ -93,10 +89,6 @@ export interface StoreUpdaterProps<T = any> {
    * 渲染可排序项
    */
   renderItem?: RenderItem<T>;
-  /**
-   * 获取唯一标识
-   */
-  getId?: (item: T, index: number) => UniqueIdentifier;
   /**
    * 渲染内容区域
    */
diff --git a/src/SortableList/utils/index.tsx b/src/SortableList/utils/index.tsx
index fec616d5..c2d4a0bd 100644
--- a/src/SortableList/utils/index.tsx
+++ b/src/SortableList/utils/index.tsx
@@ -61,10 +61,6 @@ export const useLatest = (props: any) => {
   return [state, setState];
 };
 
-export const getIndexOfActiveItem = (
-  list: any[],
-  getId: (item: any, index: number) => UniqueIdentifier,
-  id?: UniqueIdentifier,
-) => {
-  return id ? list.findIndex((item, index) => getId(item, index) === id) : -1;
+export const getIndexOfActiveItem = (list: any[], id?: UniqueIdentifier) => {
+  return id ? list.findIndex((item) => item === id) : -1;
 };

From 1f87b03aea4aa046f91bb7d5fa082a9971c746e2 Mon Sep 17 00:00:00 2001
From: rdmclin2 <rdmclin2@gmail.com>
Date: Thu, 7 Sep 2023 16:44:11 +0800
Subject: [PATCH 04/10] =?UTF-8?q?:sparkles:=20feat:=20=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=20string=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/SortableList/components/Item/index.tsx    |  6 ++-
 src/SortableList/demos/creatorButtonProps.tsx |  5 +-
 src/SortableList/index.md                     | 23 ++-------
 src/SortableList/store/keyManagerReducer.ts   | 49 +++++++++++++++++++
 src/SortableList/store/store.ts               |  5 +-
 5 files changed, 64 insertions(+), 24 deletions(-)
 create mode 100644 src/SortableList/store/keyManagerReducer.ts

diff --git a/src/SortableList/components/Item/index.tsx b/src/SortableList/components/Item/index.tsx
index 6a41d8e5..fc9f33e6 100644
--- a/src/SortableList/components/Item/index.tsx
+++ b/src/SortableList/components/Item/index.tsx
@@ -118,7 +118,11 @@ const Item = memo(
                   />
                 ) : null}
                 <Flexbox flex={1} style={{ paddingLeft: 4 }}>
-                  {renderContent ? renderContent(item, index) : id}
+                  {renderContent ? (
+                    renderContent(item, index)
+                  ) : (
+                    <div>{typeof item === 'string' ? item : index}</div>
+                  )}
                 </Flexbox>
                 <Flexbox
                   className={classNames(styles.actions)}
diff --git a/src/SortableList/demos/creatorButtonProps.tsx b/src/SortableList/demos/creatorButtonProps.tsx
index 264d5320..d0a05205 100644
--- a/src/SortableList/demos/creatorButtonProps.tsx
+++ b/src/SortableList/demos/creatorButtonProps.tsx
@@ -7,7 +7,7 @@ import { SortableList } from '@ant-design/pro-editor';
 import { useTheme } from 'antd-style';
 import { Flexbox } from 'react-layout-kit';
 
-const list = ['hello', 'world'];
+const list = [{ text: 'hello' }, { text: 'world' }];
 
 const Demo = () => {
   const token = useTheme();
@@ -15,10 +15,11 @@ const Demo = () => {
     <Flexbox padding={24} style={{ background: token.colorBgLayout }}>
       <SortableList
         value={list}
+        renderContent={(item) => item.text}
         creatorButtonProps={{
           creatorButtonText: '自定义添加',
           record: () => ({
-            id: Math.ceil(Math.random() * 100000).toString(16),
+            text: Math.ceil(Math.random() * 100000).toString(16),
           }),
         }}
       />
diff --git a/src/SortableList/index.md b/src/SortableList/index.md
index 39be9d35..ef93a586 100644
--- a/src/SortableList/index.md
+++ b/src/SortableList/index.md
@@ -46,24 +46,11 @@ demo:
 
 ### CreatorButtonProps 创建按钮属性
 
-新增一行的时候要保证 `creatorButtonProps.record` key 值唯一，不然会导致组件逻辑出错。
-
-```tsx | pure
-<SortableList
-  rowKey="id"
-  creatorButtonProps={{
-    position: position as 'top',
-    // 每次新增的时候需要Key
-    record: () => ({ id: getNewId() }),
-  }}
-/>
-```
-
-| 属性名            | 类型                                           | 描述                 |
-| ----------------- | ---------------------------------------------- | -------------------- |
-| position          | `'bottom'\|'top'`                              | 按钮位置，默认在下方 |
-| record            | `(index: number) => {id: string\|number, ...}` | 生成初始值逻辑       |
-| creatorButtonText | `string`                                       | 新增一行按钮文案     |
+| 属性名            | 类型                   | 描述                 |
+| ----------------- | ---------------------- | -------------------- |
+| position          | `'bottom'\|'top'`      | 按钮位置，默认在下方 |
+| record            | `(index: number) => T` | 生成初始值逻辑       |
+| creatorButtonText | `string`               | 新增一行按钮文案     |
 
 ### GetItemStylesArgs
 
diff --git a/src/SortableList/store/keyManagerReducer.ts b/src/SortableList/store/keyManagerReducer.ts
new file mode 100644
index 00000000..ad733e98
--- /dev/null
+++ b/src/SortableList/store/keyManagerReducer.ts
@@ -0,0 +1,49 @@
+import { arrayMove } from '@dnd-kit/sortable';
+import { produce } from 'immer';
+import { SortableListDispatchPayload } from '../type';
+
+export const keyManagerReducer = (value: any[], payload: SortableListDispatchPayload) => {
+  switch (payload.type) {
+    case 'moveItem':
+      const { activeIndex, overIndex } = payload;
+
+      if (activeIndex === overIndex) return;
+
+      if (
+        activeIndex < 0 ||
+        activeIndex >= value.length ||
+        overIndex < 0 ||
+        overIndex >= value.length
+      ) {
+        return;
+      }
+
+      return produce(value, (draft) => {
+        const sortedItems = arrayMove(draft, activeIndex, overIndex);
+        return sortedItems;
+      });
+
+    case 'removeItem':
+      const indexSet = new Set(Array.isArray(payload.index) ? payload.index : [payload.index]);
+      if (indexSet.size <= 0) {
+        return;
+      }
+
+      return produce(value, (draft) => {
+        const sortedItems = draft.filter((_, valueIndex) => !indexSet.has(valueIndex));
+        return sortedItems;
+      });
+
+    case 'addItem':
+      const { index = value.length } = payload;
+      return produce(value, (draft) => {
+        draft.splice(index, 0, crypto.randomUUID());
+        return draft;
+      });
+
+    case 'updateItem':
+      return produce(value, (draft) => {
+        return draft;
+      });
+  }
+};
diff --git a/src/SortableList/store/store.ts b/src/SortableList/store/store.ts
index 4ba9d52c..7d1852a5 100644
--- a/src/SortableList/store/store.ts
+++ b/src/SortableList/store/store.ts
@@ -5,6 +5,7 @@ import type { SortableListState } from '../type';
 import { SortableListDispatchPayload } from '../type';
 import { getIndexOfActiveItem } from '../utils';
 import { initialState } from './initialState';
+import { keyManagerReducer } from './keyManagerReducer';
 import { listDataReducer } from './listDataReducer';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -47,9 +48,7 @@ const vanillaStore: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
     const { value, keyManager, onChange } = get();
     const data = listDataReducer(value, payload);
     // value 值变化的时候，keyManager 也需要变化
-    const keys = listDataReducer(keyManager, payload);
-
-    console.log('keys', keys);
+    const keys = keyManagerReducer(keyManager, payload);
 
     if (data) {
       if (isEqual(value, data)) return;

From 2565b5a963941dead8024468ee68aa95502c1cfb Mon Sep 17 00:00:00 2001
From: rdmclin2 <rdmclin2@gmail.com>
Date: Thu, 7 Sep 2023 16:55:51 +0800
Subject: [PATCH 05/10] :recycle: chore: remove id

---
 src/ColumnList/demos/actions.tsx              | 10 ++--
 src/ColumnList/demos/column.tsx               | 44 +--------------
 src/ColumnList/demos/controlled.tsx           |  9 ++--
 src/ColumnList/demos/creatorButtonProps.tsx   | 53 +------------------
 src/ColumnList/demos/customCreate.tsx         |  1 -
 src/ColumnList/demos/empty.tsx                |  4 +-
 src/ColumnList/demos/normal.tsx               | 10 ++--
 src/ColumnList/renderItem/Input.tsx           |  4 +-
 src/SortableList/demos/ref.tsx                |  2 +-
 .../store/listDataReducer.test.ts             | 27 ++--------
 10 files changed, 24 insertions(+), 140 deletions(-)

diff --git a/src/ColumnList/demos/actions.tsx b/src/ColumnList/demos/actions.tsx
index 7f2ded8f..b2fff37f 100644
--- a/src/ColumnList/demos/actions.tsx
+++ b/src/ColumnList/demos/actions.tsx
@@ -3,7 +3,7 @@
  * description: 可以通过 `actions` 属性自定义操作列
  */
 import { EditFilled } from '@ant-design/icons';
-import type { ColumnItemList, SortableItem } from '@ant-design/pro-editor';
+import type { ColumnItemList } from '@ant-design/pro-editor';
 import { ActionIcon, ColumnList } from '@ant-design/pro-editor';
 import { message } from 'antd';
 import { tableColumnValueOptions } from './mock_data/options';
@@ -12,17 +12,16 @@ type SchemaItem = {
   title: string;
   valueType: string;
   dataIndex: string;
-} & SortableItem;
+};
 
 const initialValues: SchemaItem[] = [
-  { id: 'index', title: '序号', valueType: 'indexBorder', dataIndex: 'index' },
+  { title: '序号', valueType: 'indexBorder', dataIndex: 'index' },
   {
-    id: 'name',
     title: '授权企业名称',
     valueType: 'text',
     dataIndex: 'name',
   },
-  { id: 'authCompany', title: '被授权企业', valueType: 'text', dataIndex: 'authCompany' },
+  { title: '被授权企业', valueType: 'text', dataIndex: 'authCompany' },
 ];
 
 const columns: ColumnItemList<SchemaItem> = [
@@ -63,7 +62,6 @@ export default () => (
     ]}
     creatorButtonProps={{
       record: () => ({
-        id: randomIndex(),
         valueType: 'text',
         title: '示例标题',
       }),
diff --git a/src/ColumnList/demos/column.tsx b/src/ColumnList/demos/column.tsx
index 57e3068f..2070924d 100644
--- a/src/ColumnList/demos/column.tsx
+++ b/src/ColumnList/demos/column.tsx
@@ -2,7 +2,7 @@
  * title: 自定义表单
  * description: 目前支持 `input` 和 `select`, `custom` 三种表单类型.
  */
-import type { ColumnItemList, SortableItem } from '@ant-design/pro-editor';
+import type { ColumnItemList } from '@ant-design/pro-editor';
 import { ColorPicker, ColumnList } from '@ant-design/pro-editor';
 import { tableColumnValueOptions } from './mock_data/options';
 
@@ -10,68 +10,28 @@ type SchemaItem = {
   title: string;
   valueType: string;
   dataIndex: string;
-} & SortableItem;
+};
 
 const initialValues = [
-  { id: 'orderId', dataIndex: 'orderId', valueType: 'text', title: '订单id', color: undefined },
   {
-    id: 'orderNumber',
-    dataIndex: 'orderNumber',
-    valueType: 'text',
-    title: '订单号',
-    color: undefined,
-  },
-  {
-    id: 'orderMoney',
-    dataIndex: 'orderMoney',
-    valueType: 'text',
-    title: '订单金额',
-    color: undefined,
-  },
-  {
-    id: 'productName',
-    dataIndex: 'productName',
-    valueType: 'text',
-    title: '产品名称',
-    color: undefined,
-  },
-  {
-    id: 'productComment',
-    dataIndex: 'productComment',
-    valueType: 'text',
-    title: '产品介绍',
-    color: undefined,
-  },
-  {
-    id: 'orderStatus',
-    dataIndex: 'orderStatus',
-    valueType: 'text',
-    title: '订单状态',
-    color: undefined,
-  },
-  {
-    id: 'orderCreated',
     dataIndex: 'orderCreated',
     valueType: 'date',
     title: '订单创建时间',
     color: undefined,
   },
   {
-    id: 'detailPic',
     dataIndex: 'detailPic',
     valueType: 'text',
     title: '产品详情图',
     color: undefined,
   },
   {
-    id: 'closeReason',
     dataIndex: 'closeReason',
     valueType: 'text',
     title: '订单关闭原因',
     color: undefined,
   },
   {
-    id: 'closeType',
     dataIndex: 'closeType',
     valueType: 'text',
     title: '订单关闭类型',
diff --git a/src/ColumnList/demos/controlled.tsx b/src/ColumnList/demos/controlled.tsx
index 2e935147..970f28e7 100644
--- a/src/ColumnList/demos/controlled.tsx
+++ b/src/ColumnList/demos/controlled.tsx
@@ -2,7 +2,7 @@
  * title: 受控模式
  * description: 表单可通过 `value` 受控
  */
-import type { ColumnItemList, SortableItem } from '@ant-design/pro-editor';
+import type { ColumnItemList } from '@ant-design/pro-editor';
 import { ColumnList } from '@ant-design/pro-editor';
 import { useState } from 'react';
 
@@ -12,17 +12,16 @@ type SchemaItem = {
   title: string;
   valueType: string;
   dataIndex: string;
-} & SortableItem;
+};
 
 const INIT_VALUES: SchemaItem[] = [
-  { id: 'index', title: '序号', valueType: 'indexBorder', dataIndex: 'index' },
+  { title: '序号', valueType: 'indexBorder', dataIndex: 'index' },
   {
-    id: 'name',
     title: '授权企业名称',
     valueType: 'text',
     dataIndex: 'name',
   },
-  { id: 'authCompany', title: '被授权企业', valueType: 'text', dataIndex: 'authCompany' },
+  { title: '被授权企业', valueType: 'text', dataIndex: 'authCompany' },
 ];
 
 const columns: ColumnItemList<SchemaItem> = [
diff --git a/src/ColumnList/demos/creatorButtonProps.tsx b/src/ColumnList/demos/creatorButtonProps.tsx
index 537cee6f..977bcd49 100644
--- a/src/ColumnList/demos/creatorButtonProps.tsx
+++ b/src/ColumnList/demos/creatorButtonProps.tsx
@@ -2,81 +2,33 @@
  * title: 自定义初始化
  * description: 可通过 `creatorButtonProps` 来自定义初始化逻辑，id 的生成逻辑是必须的。
  */
-import type { ColumnItemList, SortableItem } from '@ant-design/pro-editor';
+import type { ColumnItemList } from '@ant-design/pro-editor';
 import { ColumnList } from '@ant-design/pro-editor';
-
 import { tableColumnValueOptions } from './mock_data/options';
 
 type SchemaItem = {
   title: string;
   valueType?: string;
   dataIndex: string;
-} & SortableItem;
+};
 
 const INIT_VALUES = [
-  { id: 'orderId', dataIndex: 'orderId', valueType: 'text', title: '订单id', color: undefined },
   {
-    id: 'orderNumber',
-    dataIndex: 'orderNumber',
-    valueType: 'text',
-    title: '订单号',
-    color: undefined,
-  },
-  {
-    id: 'orderMoney',
-    dataIndex: 'orderMoney',
-    valueType: 'text',
-    title: '订单金额',
-    color: undefined,
-  },
-  {
-    id: 'productName',
     dataIndex: 'productName',
     valueType: 'text',
     title: '产品名称',
     color: undefined,
   },
   {
-    id: 'productComment',
     dataIndex: 'productComment',
     valueType: 'text',
     title: '产品介绍',
     color: undefined,
   },
   {
-    id: 'orderStatus',
     dataIndex: 'orderStatus',
     valueType: 'text',
     title: '订单状态',
-    color: undefined,
-  },
-  {
-    id: 'orderCreated',
-    dataIndex: 'orderCreated',
-    valueType: 'date',
-    title: '订单创建时间',
-    color: undefined,
-  },
-  {
-    id: 'detailPic',
-    dataIndex: 'detailPic',
-    valueType: 'text',
-    title: '产品详情图',
-    color: undefined,
-  },
-  {
-    id: 'closeReason',
-    dataIndex: 'closeReason',
-    valueType: 'text',
-    title: '订单关闭原因',
-    color: undefined,
-  },
-  {
-    id: 'closeType',
-    dataIndex: 'closeType',
-    valueType: 'text',
-    title: '订单关闭类型',
-    color: undefined,
   },
 ];
 
@@ -114,7 +66,6 @@ export default () => (
     creatorButtonProps={{
       position: 'top',
       record: (index) => ({
-        id: randomIndex(),
         dataIndex: `${index}-${randomIndex()}`,
       }),
     }}
diff --git a/src/ColumnList/demos/customCreate.tsx b/src/ColumnList/demos/customCreate.tsx
index 54169981..23703592 100644
--- a/src/ColumnList/demos/customCreate.tsx
+++ b/src/ColumnList/demos/customCreate.tsx
@@ -82,7 +82,6 @@ export default () => {
       <ColumnList<SchemaItem>
         ref={ref}
         columns={columns}
-        getId={(item) => item.dataIndex}
         renderEmpty={() => (
           <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据">
             <Button type="primary" onClick={handleCreate}>
diff --git a/src/ColumnList/demos/empty.tsx b/src/ColumnList/demos/empty.tsx
index e407aa08..1291d80b 100644
--- a/src/ColumnList/demos/empty.tsx
+++ b/src/ColumnList/demos/empty.tsx
@@ -3,7 +3,7 @@
  * description: 当表单值为空时，会渲染空状态
  */
 import { EditFilled } from '@ant-design/icons';
-import type { ColumnItemList, SortableItem } from '@ant-design/pro-editor';
+import type { ColumnItemList } from '@ant-design/pro-editor';
 import { ActionIcon, ColumnList } from '@ant-design/pro-editor';
 import { message } from 'antd';
 import { useState } from 'react';
@@ -13,7 +13,7 @@ type SchemaItem = {
   title: string;
   valueType: string;
   dataIndex: string;
-} & SortableItem;
+};
 
 const columns: ColumnItemList<SchemaItem> = [
   {
diff --git a/src/ColumnList/demos/normal.tsx b/src/ColumnList/demos/normal.tsx
index de4ebe70..0e7dc4d4 100644
--- a/src/ColumnList/demos/normal.tsx
+++ b/src/ColumnList/demos/normal.tsx
@@ -2,23 +2,22 @@
  * title: 基础使用
  * description: 通过配置 `columns` 渲染排序表单
  */
-import type { ColumnItemList, SortableItem } from '@ant-design/pro-editor';
+import type { ColumnItemList } from '@ant-design/pro-editor';
 import { ColumnList } from '@ant-design/pro-editor';
 
 type SchemaItem = {
   title: string;
   dataIndex: string;
-} & SortableItem;
+};
 
 const initialValues = [
-  { id: 'index', title: '序号', valueType: 'indexBorder', dataIndex: 'index' },
+  { title: '序号', valueType: 'indexBorder', dataIndex: 'index' },
   {
-    id: 'name',
     title: '授权企业名称',
     valueType: 'text',
     dataIndex: 'name',
   },
-  { id: 'authCompany', title: '被授权企业', valueType: 'text', dataIndex: 'authCompany' },
+  { title: '被授权企业', valueType: 'text', dataIndex: 'authCompany' },
 ];
 
 const columns: ColumnItemList<SchemaItem> = [
@@ -48,7 +47,6 @@ export default () => (
     }}
     creatorButtonProps={{
       record: () => ({
-        id: randomIndex(),
         valueType: 'text',
         title: '示例标题',
       }),
diff --git a/src/ColumnList/renderItem/Input.tsx b/src/ColumnList/renderItem/Input.tsx
index 3c5853f8..d48e010f 100644
--- a/src/ColumnList/renderItem/Input.tsx
+++ b/src/ColumnList/renderItem/Input.tsx
@@ -1,4 +1,4 @@
-import { genUniqueId, useSortableList } from '@ant-design/pro-editor';
+import { useSortableList } from '@ant-design/pro-editor';
 import { Input } from 'antd';
 import { createStyles } from 'antd-style';
 import { CSSProperties, memo, useRef, useState } from 'react';
@@ -47,7 +47,7 @@ const ControlInput = memo<ItemRenderProps>(
       const value = instance.getValue() || [];
       // 如果是最后一个节点，按下回车后，会自动添加一个新的节点
       if (index + 1 === value.length) {
-        instance.addItem({ id: genUniqueId(value.length.toString()), [dataIndex]: '' });
+        instance.addItem({ [dataIndex]: '' });
       }
 
       setTimeout(() => {
diff --git a/src/SortableList/demos/ref.tsx b/src/SortableList/demos/ref.tsx
index ccdfb865..8c5e388e 100644
--- a/src/SortableList/demos/ref.tsx
+++ b/src/SortableList/demos/ref.tsx
@@ -31,7 +31,7 @@ export default () => {
           tabIndex={-1}
           onClick={() => {
             const id = `id-${listData.length}-${randomIndex()}`;
-            ref.current.addItem({ id, title: `new-${id}` });
+            ref.current.addItem({ title: `new-${id}` });
           }}
         />
       </Flexbox>
diff --git a/src/SortableList/store/listDataReducer.test.ts b/src/SortableList/store/listDataReducer.test.ts
index 6bb1ff5d..fb64e027 100644
--- a/src/SortableList/store/listDataReducer.test.ts
+++ b/src/SortableList/store/listDataReducer.test.ts
@@ -1,16 +1,15 @@
 import { listDataReducer } from './listDataReducer';
 
 const listData = [
-  { id: 1, title: '序号', dataIndex: 'indexBorder' },
+  { title: '序号', dataIndex: 'indexBorder' },
   {
-    id: 2,
     title: '授权企业名称',
     dataIndex: 'text',
   },
-  { id: 3, title: '被授权企业', dataIndex: 'select' },
+  { title: '被授权企业', dataIndex: 'select' },
 ];
 
-const newItem = { id: 4, title: '邮箱', dataIndex: 'text' };
+const newItem = { title: '邮箱', dataIndex: 'text' };
 
 describe('listDataReducer', () => {
   describe('moveItem', () => {
@@ -26,16 +25,6 @@ describe('listDataReducer', () => {
 
   describe('addItem', () => {
     it('添加一项到末尾', () => {
-      const listData = [
-        { id: 1, title: '序号', dataIndex: 'indexBorder' },
-        {
-          id: 2,
-          title: '授权企业名称',
-          dataIndex: 'text',
-        },
-        { id: 3, title: '被授权企业', dataIndex: 'select' },
-      ];
-
       const data = listDataReducer(listData, {
         type: 'addItem',
         item: newItem,
@@ -45,16 +34,6 @@ describe('listDataReducer', () => {
     });
 
     it('添加一项到任意位置', () => {
-      const listData = [
-        { id: 1, title: '序号', dataIndex: 'indexBorder' },
-        {
-          id: 2,
-          title: '授权企业名称',
-          dataIndex: 'text',
-        },
-        { id: 3, title: '被授权企业', dataIndex: 'select' },
-      ];
-
       const data = listDataReducer(listData, {
         type: 'addItem',
         item: newItem,

From 353134f48bd6b229cfe317cf922c15642310b5cc Mon Sep 17 00:00:00 2001
From: rdmclin2 <rdmclin2@gmail.com>
Date: Thu, 7 Sep 2023 17:27:31 +0800
Subject: [PATCH 06/10] :bug: fix: columnlist blur not change

---
 src/ColumnList/ColumnItem.tsx       |  7 ++++---
 src/ColumnList/ColumnList.tsx       |  9 ++++-----
 src/ColumnList/index.md             |  8 ++++----
 src/ColumnList/renderItem/Input.tsx | 16 ++++++++++++----
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/ColumnList/ColumnItem.tsx b/src/ColumnList/ColumnItem.tsx
index 2685935d..0d3a1897 100644
--- a/src/ColumnList/ColumnItem.tsx
+++ b/src/ColumnList/ColumnItem.tsx
@@ -2,7 +2,6 @@ import {
   ColumnItemList,
   DeleteAction,
   HandleAction,
-  SortableItem,
   useSortableList,
 } from '@ant-design/pro-editor';
 import { createStyles } from 'antd-style';
@@ -69,9 +68,10 @@ const useStyle = createStyles(({ css, cx }, prefixCls) => {
   };
 });
 
-interface ItemRenderProps<T extends SortableItem = SortableItem> {
+interface ItemRenderProps<T = any> {
   columns: ColumnItemList<T>;
   item: T;
+  dragging: boolean;
   index: number;
   prefixCls: string;
   listeners: any;
@@ -80,7 +80,7 @@ interface ItemRenderProps<T extends SortableItem = SortableItem> {
 }
 
 const ColumnItem = memo<ItemRenderProps>(
-  ({ item, index, prefixCls, columns, listeners, actions, hideRemove }) => {
+  ({ item, index, prefixCls, columns, listeners, actions, hideRemove, dragging }) => {
     const { styles } = useStyle(prefixCls);
     const instance = useSortableList();
     return (
@@ -101,6 +101,7 @@ const ColumnItem = memo<ItemRenderProps>(
               value: item[col.dataIndex],
               id: item.id,
               index,
+              dragging,
               prefixCls,
               style,
               placeholder: col.placeholder,
diff --git a/src/ColumnList/ColumnList.tsx b/src/ColumnList/ColumnList.tsx
index 1a02447c..68315bef 100644
--- a/src/ColumnList/ColumnList.tsx
+++ b/src/ColumnList/ColumnList.tsx
@@ -1,5 +1,4 @@
 import {
-  SortableItem,
   SortableList,
   SortableListProps,
   SortableListRef,
@@ -11,12 +10,11 @@ import { Header } from './Header';
 import { useStyle } from './style';
 import { ColumnItemList } from './types';
 
-export interface ColumnListProps<T extends SortableItem = SortableItem>
-  extends SortableListProps<T> {
+export interface ColumnListProps<T = any> extends SortableListProps<T> {
   columns: ColumnItemList<T>;
 }
 
-const ColumnList: <T extends SortableItem>(props: ColumnListProps<T>) => ReactNode = forwardRef<
+const ColumnList: <T>(props: ColumnListProps<T>) => ReactNode = forwardRef<
   SortableListRef,
   ColumnListProps
 >(({ prefixCls: customPrefixCls, className, columns, actions, hideRemove, ...props }, ref) => {
@@ -24,10 +22,11 @@ const ColumnList: <T extends SortableItem>(props: ColumnListProps<T>) => ReactNo
   const { cx } = useStyle(prefixCls);
 
   const renderItem = useCallback(
-    (item, { index, listeners }) => (
+    (item, { index, listeners, dragging }) => (
       <ColumnItem
         columns={columns}
         item={item}
+        dragging={dragging}
         listeners={listeners}
         index={index}
         prefixCls={prefixCls}
diff --git a/src/ColumnList/index.md b/src/ColumnList/index.md
index f9e46fdc..f9de3f76 100644
--- a/src/ColumnList/index.md
+++ b/src/ColumnList/index.md
@@ -27,9 +27,9 @@ demo:
 
 提供封装的 `columns` 配置，其他属性参考 `SortableList`
 
-| 属性名  | 类型                         | 描述     |
-| ------- | ---------------------------- | -------- |
-| columns | `ColumnItem<SortableItem>[]` | 列配置项 |
+| 属性名  | 类型           | 描述     |
+| ------- | -------------- | -------- |
+| columns | `ColumnItem[]` | 列配置项 |
 
 ### ColumnItem
 
@@ -63,7 +63,7 @@ demo:
 
 | 属性名   | 类型                   | 描述           |
 | -------- | ---------------------- | -------------- |
-| item     | `SortableItem`         | 当前项数据     |
+| item     | `any`                  | 当前项数据     |
 | value    | `any`                  | 当前值         |
 | onChange | `(value: any) => void` | 值变化回调函数 |
 | column   | `ColumnItem<T>`        | 对应列信息     |
diff --git a/src/ColumnList/renderItem/Input.tsx b/src/ColumnList/renderItem/Input.tsx
index d48e010f..1ab2c724 100644
--- a/src/ColumnList/renderItem/Input.tsx
+++ b/src/ColumnList/renderItem/Input.tsx
@@ -1,7 +1,7 @@
 import { useSortableList } from '@ant-design/pro-editor';
-import { Input } from 'antd';
+import { Input, InputRef } from 'antd';
 import { createStyles } from 'antd-style';
-import { CSSProperties, memo, useRef, useState } from 'react';
+import { CSSProperties, memo, useEffect, useRef, useState } from 'react';
 
 const useStyle = createStyles(({ css, cx }, prefixCls) => {
   const prefix = `${prefixCls}-content`;
@@ -19,15 +19,16 @@ interface ItemRenderProps {
   dataIndex: string;
   value: string;
   index: number;
+  dragging: boolean;
   prefixCls: string;
   style: CSSProperties;
   placeholder?: string;
 }
 
 const ControlInput = memo<ItemRenderProps>(
-  ({ dataIndex, placeholder, value, index, prefixCls, style }) => {
+  ({ dataIndex, placeholder, value, index, prefixCls, style, dragging }) => {
     const instance = useSortableList();
-
+    const inputRef = useRef<InputRef>(null);
     const [innerValue, setInnerValue] = useState(value);
     const [changed, setChanged] = useState(false);
     const shouldChange = useRef(true);
@@ -38,6 +39,12 @@ const ControlInput = memo<ItemRenderProps>(
       setChanged(false);
     };
 
+    useEffect(() => {
+      if (dragging) {
+        inputRef.current.blur();
+      }
+    }, [dragging]);
+
     const customListId = (index) => {
       const id = instance.getIdByIndex(index);
       return `column-list-${index}-${id}`;
@@ -59,6 +66,7 @@ const ControlInput = memo<ItemRenderProps>(
     return (
       <Input
         size={'small'}
+        ref={inputRef}
         value={innerValue}
         style={style}
         id={customListId(index)}

From da35b123c992e7eee6258bf698abce8c0a6d47ae Mon Sep 17 00:00:00 2001
From: rdmclin2 <rdmclin2@gmail.com>
Date: Thu, 7 Sep 2023 17:48:08 +0800
Subject: [PATCH 07/10] :camera_flash: chore: update snapshot

---
 tests/__snapshots__/demo.test.tsx.snap | 27845 ++++++++++-------------
 1 file changed, 12187 insertions(+), 15658 deletions(-)

diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap
index c132fd7c..5bea678f 100644
--- a/tests/__snapshots__/demo.test.tsx.snap
+++ b/tests/__snapshots__/demo.test.tsx.snap
@@ -2648,7 +2648,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="index"
+          data-id="d4f7789b-6345-4850-aa99-8aa271766e59"
           data-index="0"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -2682,7 +2682,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-0-index"
+                id="column-list-0-d4f7789b-6345-4850-aa99-8aa271766e59"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -2890,7 +2890,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="name"
+          data-id="af3d7eec-c7f9-4517-b978-874debf99401"
           data-index="1"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -2924,7 +2924,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-1-name"
+                id="column-list-1-af3d7eec-c7f9-4517-b978-874debf99401"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -3132,7 +3132,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="authCompany"
+          data-id="7726b796-213b-483b-9053-9bfeee3c4836"
           data-index="2"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -3166,7 +3166,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-2-authCompany"
+                id="column-list-2-7726b796-213b-483b-9053-9bfeee3c4836"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -3720,7 +3720,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="orderId"
+          data-id="4c936799-c16d-4fe8-8a85-267dced72ba8"
           data-index="0"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -3754,11 +3754,11 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-0-orderId"
+                id="column-list-0-4c936799-c16d-4fe8-8a85-267dced72ba8"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
-                value="订单id"
+                value="订单创建时间"
               />
               <div
                 class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
@@ -3790,9 +3790,9 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
                   </span>
                   <span
                     class="studio-select-selection-item"
-                    title="文本"
+                    title="日期"
                   >
-                    文本
+                    日期
                   </span>
                 </div>
                 <span
@@ -3852,9 +3852,9 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
                   </span>
                   <span
                     class="studio-select-selection-item"
-                    title="orderId"
+                    title="orderCreated"
                   >
-                    orderId
+                    orderCreated
                   </span>
                 </div>
                 <span
@@ -3950,7 +3950,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="orderNumber"
+          data-id="02c394d4-4eb2-48ed-9f30-e686a0579d96"
           data-index="1"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -3984,11 +3984,11 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-1-orderNumber"
+                id="column-list-1-02c394d4-4eb2-48ed-9f30-e686a0579d96"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
-                value="订单号"
+                value="产品详情图"
               />
               <div
                 class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
@@ -4082,9 +4082,9 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
                   </span>
                   <span
                     class="studio-select-selection-item"
-                    title="orderNumber"
+                    title="detailPic"
                   >
-                    orderNumber
+                    detailPic
                   </span>
                 </div>
                 <span
@@ -4180,7 +4180,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="orderMoney"
+          data-id="ac5cf1ee-8327-473a-9b30-9165e672d2b2"
           data-index="2"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -4214,11 +4214,11 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-2-orderMoney"
+                id="column-list-2-ac5cf1ee-8327-473a-9b30-9165e672d2b2"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
-                value="订单金额"
+                value="订单关闭原因"
               />
               <div
                 class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
@@ -4312,9 +4312,9 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
                   </span>
                   <span
                     class="studio-select-selection-item"
-                    title="orderMoney"
+                    title="closeReason"
                   >
-                    orderMoney
+                    closeReason
                   </span>
                 </div>
                 <span
@@ -4410,7 +4410,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="productName"
+          data-id="d24c2ecd-abfe-4de4-bf9e-bcdaaf296a52"
           data-index="3"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -4444,241 +4444,11 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-3-productName"
-                placeholder="请输入"
-                style="flex: 1; max-width: 25%;"
-                type="text"
-                value="产品名称"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 25%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 25%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="productName"
-                  >
-                    productName
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="ant-color-picker-trigger ant-color-picker-sm"
-              >
-                <div
-                  class="ant-color-picker-color-block"
-                >
-                  <div
-                    class="ant-color-picker-color-block-inner"
-                    style="background: rgb(22, 119, 255);"
-                  />
-                </div>
-                <div
-                  class="ant-color-picker-trigger-text"
-                >
-                  #1677FF
-                </div>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 4;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-5"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="productComment"
-          data-index="4"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-4-productComment"
+                id="column-list-3-d24c2ecd-abfe-4de4-bf9e-bcdaaf296a52"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
-                value="产品介绍"
+                value="订单关闭类型"
               />
               <div
                 class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
@@ -4772,9 +4542,9 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
                   </span>
                   <span
                     class="studio-select-selection-item"
-                    title="productComment"
+                    title="closeType"
                   >
-                    productComment
+                    closeType
                   </span>
                 </div>
                 <span
@@ -4859,5737 +4629,9 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
           </div>
         </div>
       </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 5;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-5"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="orderStatus"
-          data-index="5"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-5-orderStatus"
-                placeholder="请输入"
-                style="flex: 1; max-width: 25%;"
-                type="text"
-                value="订单状态"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 25%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 25%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="orderStatus"
-                  >
-                    orderStatus
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="ant-color-picker-trigger ant-color-picker-sm"
-              >
-                <div
-                  class="ant-color-picker-color-block"
-                >
-                  <div
-                    class="ant-color-picker-color-block-inner"
-                    style="background: rgb(22, 119, 255);"
-                  />
-                </div>
-                <div
-                  class="ant-color-picker-trigger-text"
-                >
-                  #1677FF
-                </div>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 6;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-5"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="orderCreated"
-          data-index="6"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-6-orderCreated"
-                placeholder="请输入"
-                style="flex: 1; max-width: 25%;"
-                type="text"
-                value="订单创建时间"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 25%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="日期"
-                  >
-                    日期
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 25%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="orderCreated"
-                  >
-                    orderCreated
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="ant-color-picker-trigger ant-color-picker-sm"
-              >
-                <div
-                  class="ant-color-picker-color-block"
-                >
-                  <div
-                    class="ant-color-picker-color-block-inner"
-                    style="background: rgb(22, 119, 255);"
-                  />
-                </div>
-                <div
-                  class="ant-color-picker-trigger-text"
-                >
-                  #1677FF
-                </div>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 7;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-5"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="detailPic"
-          data-index="7"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-7-detailPic"
-                placeholder="请输入"
-                style="flex: 1; max-width: 25%;"
-                type="text"
-                value="产品详情图"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 25%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 25%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="detailPic"
-                  >
-                    detailPic
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="ant-color-picker-trigger ant-color-picker-sm"
-              >
-                <div
-                  class="ant-color-picker-color-block"
-                >
-                  <div
-                    class="ant-color-picker-color-block-inner"
-                    style="background: rgb(22, 119, 255);"
-                  />
-                </div>
-                <div
-                  class="ant-color-picker-trigger-text"
-                >
-                  #1677FF
-                </div>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 8;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-5"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="closeReason"
-          data-index="8"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-8-closeReason"
-                placeholder="请输入"
-                style="flex: 1; max-width: 25%;"
-                type="text"
-                value="订单关闭原因"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 25%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 25%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="closeReason"
-                  >
-                    closeReason
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="ant-color-picker-trigger ant-color-picker-sm"
-              >
-                <div
-                  class="ant-color-picker-color-block"
-                >
-                  <div
-                    class="ant-color-picker-color-block-inner"
-                    style="background: rgb(22, 119, 255);"
-                  />
-                </div>
-                <div
-                  class="ant-color-picker-trigger-text"
-                >
-                  #1677FF
-                </div>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 9;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-5"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="closeType"
-          data-index="9"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-9-closeType"
-                placeholder="请输入"
-                style="flex: 1; max-width: 25%;"
-                type="text"
-                value="订单关闭类型"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 25%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 25%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="closeType"
-                  >
-                    closeType
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="ant-color-picker-trigger ant-color-picker-sm"
-              >
-                <div
-                  class="ant-color-picker-color-block"
-                >
-                  <div
-                    class="ant-color-picker-color-block-inner"
-                    style="background: rgb(22, 119, 255);"
-                  />
-                </div>
-                <div
-                  class="ant-color-picker-trigger-text"
-                >
-                  #1677FF
-                </div>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-    </ul>
-    <div
-      id="DndDescribedBy-5"
-      style="display: none;"
-    >
-      
-    To pick up a draggable item, press the space bar.
-    While dragging, use the arrow keys to move the item.
-    Press space again to drop the item in its new position, or press escape to cancel.
-  
-    </div>
-    <div
-      aria-atomic="true"
-      aria-live="assertive"
-      id="DndLiveRegion-5"
-      role="status"
-      style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
-    />
-  </div>
-</div>
-`;
-
-exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 4px;
-}
-
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  width: 100%;
-  height: 24px;
-  font-size: 12px;
-  border-radius: 2px;
-  min-width: 48px;
-  color: rgba(0, 0, 0, 0.45);
-  padding-left: 8px;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.emotion-5 {
-  list-style: none;
-  display: grid;
-  grid-auto-rows: max-content;
-  grid-gap: 2px;
-  grid-template-columns: repeat(var(--columns, 1), 1fr);
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  border-radius: 4px;
-  -webkit-transition: background-color 350ms ease;
-  transition: background-color 350ms ease;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  -webkit-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  -moz-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  -ms-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  transform-origin: 0 0;
-  touch-action: manipulation;
-}
-
-.emotion-6:not(:last-child) {
-  margin-bottom: 2px;
-}
-
-.emotion-7 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding: 1px 0;
-  color: rgba(0, 0, 0, 0.65);
-  font-size: 12px;
-  white-space: nowrap;
-  list-style: none;
-  border-radius: 4px;
-  outline: none;
-  -webkit-transform: scale(var(--scale, 1));
-  -moz-transform: scale(var(--scale, 1));
-  -ms-transform: scale(var(--scale, 1));
-  transform: scale(var(--scale, 1));
-  transform-origin: 50% 50%;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.emotion-7:focus-visible {
-  box-shadow: 0 0 4px 1px #4c9ffe,0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
-}
-
-.emotion-7:not(.studio-sortable-list-item-withHandle) {
-  cursor: -webkit-grab;
-  cursor: grab;
-  -webkit-user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: none;
-}
-
-.emotion-7-dragging:not(.studio-sortable-list-item-dragOverlay) {
-  z-index: 0;
-  opacity: var(--dragging-opacity, 0.5);
-}
-
-.emotion-7-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
-  box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-9 {
-  position: relative;
-  width: 100%;
-}
-
-.emotion-9:hover .studio-column-list-item-actions {
-  opacity: 1;
-}
-
-.emotion-10 {
-  z-index: 10;
-  color: hsla(0, 0, 0, 0.45);
-  opacity: 0;
-  position: absolute;
-  left: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-10:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-10:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  width: 100%;
-  gap: 4px;
-}
-
-.emotion-12 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  font-size: 12px;
-  border-radius: 2px;
-  min-width: 48px;
-}
-
-.emotion-13 {
-  padding-left: 13px;
-}
-
-.emotion-14 .studio-select-selector {
-  padding-left: 13px;
-}
-
-.emotion-17 {
-  z-index: 10;
-  color: hsla(0, 0, 0, 0.45);
-  opacity: 0;
-}
-
-.emotion-18 {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  -webkit-align-self: flex-end;
-  -ms-flex-item-align: flex-end;
-  align-self: flex-end;
-  overflow: hidden;
-  border-radius: 1px;
-  -webkit-backdrop-filter: blur(5px);
-  backdrop-filter: blur(5px);
-}
-
-.emotion-19 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-19:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-19:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-<div>
-  <div
-    class="layoutkit-flexbox emotion-0"
-  >
-    <div
-      class="studio-column-list-content studio-column-list-header emotion-1"
-    >
-      列标题
-    </div>
-    <div
-      class="studio-column-list-content studio-column-list-header emotion-1"
-    >
-      值类型
-    </div>
-    <div
-      class="studio-column-list-content studio-column-list-header emotion-1"
-    >
-      字段
-    </div>
-  </div>
-  <div
-    class="layoutkit-flexbox emotion-4 studio-column-list studio-sortable-list"
-  >
-    <ul
-      class="studio-sortable-list-container emotion-5"
-      style="--columns: 1;"
-    >
-      <li
-        class="studio-sortable-list-item-wrapper emotion-6"
-        data-testid="list-item"
-        style="--index: 0;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-4"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="index"
-          data-index="0"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-8 studio-column-list-item emotion-9"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-10"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-11 studio-column-list-item-content emotion-12"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-0-index"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="序号"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-14 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="圆形序号"
-                  >
-                    圆形序号
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-14 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="index"
-                  >
-                    index
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-8 studio-column-list-item-actions emotion-17 studio-column-list-item-actions-right emotion-18"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-19"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-6"
-        data-testid="list-item"
-        style="--index: 1;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-4"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="name"
-          data-index="1"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-8 studio-column-list-item emotion-9"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-10"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-11 studio-column-list-item-content emotion-12"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-1-name"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="授权企业名称"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-14 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-14 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="name"
-                  >
-                    name
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-8 studio-column-list-item-actions emotion-17 studio-column-list-item-actions-right emotion-18"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-19"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-6"
-        data-testid="list-item"
-        style="--index: 2;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-4"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="authCompany"
-          data-index="2"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-8 studio-column-list-item emotion-9"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-10"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-11 studio-column-list-item-content emotion-12"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-2-authCompany"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="被授权企业"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-14 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-14 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="authCompany"
-                  >
-                    authCompany
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-8 studio-column-list-item-actions emotion-17 studio-column-list-item-actions-right emotion-18"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-19"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-    </ul>
-    <div
-      id="DndDescribedBy-4"
-      style="display: none;"
-    >
-      
-    To pick up a draggable item, press the space bar.
-    While dragging, use the arrow keys to move the item.
-    Press space again to drop the item in its new position, or press escape to cancel.
-  
-    </div>
-    <div
-      aria-atomic="true"
-      aria-live="assertive"
-      id="DndLiveRegion-4"
-      role="status"
-      style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
-    />
-  </div>
-</div>
-`;
-
-exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 4px;
-}
-
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  width: 100%;
-  height: 24px;
-  font-size: 12px;
-  border-radius: 2px;
-  min-width: 48px;
-  color: rgba(0, 0, 0, 0.45);
-  padding-left: 8px;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.emotion-5 {
-  height: 24px;
-  padding-block: 2px;
-  margin-top: 4px;
-  margin-bottom: 4px;
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-}
-
-.emotion-5:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background: rgba(0, 0, 0, 0.06)!important;
-  border-color: transparent!important;
-}
-
-.emotion-5:focus {
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-  border-color: #1677ff!important;
-}
-
-.emotion-6 {
-  list-style: none;
-  display: grid;
-  grid-auto-rows: max-content;
-  grid-gap: 2px;
-  grid-template-columns: repeat(var(--columns, 1), 1fr);
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  border-radius: 4px;
-  -webkit-transition: background-color 350ms ease;
-  transition: background-color 350ms ease;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  -webkit-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  -moz-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  -ms-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  transform-origin: 0 0;
-  touch-action: manipulation;
-}
-
-.emotion-7:not(:last-child) {
-  margin-bottom: 2px;
-}
-
-.emotion-8 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding: 1px 0;
-  color: rgba(0, 0, 0, 0.65);
-  font-size: 12px;
-  white-space: nowrap;
-  list-style: none;
-  border-radius: 4px;
-  outline: none;
-  -webkit-transform: scale(var(--scale, 1));
-  -moz-transform: scale(var(--scale, 1));
-  -ms-transform: scale(var(--scale, 1));
-  transform: scale(var(--scale, 1));
-  transform-origin: 50% 50%;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.emotion-8:focus-visible {
-  box-shadow: 0 0 4px 1px #4c9ffe,0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
-}
-
-.emotion-8:not(.studio-sortable-list-item-withHandle) {
-  cursor: -webkit-grab;
-  cursor: grab;
-  -webkit-user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: none;
-}
-
-.emotion-8-dragging:not(.studio-sortable-list-item-dragOverlay) {
-  z-index: 0;
-  opacity: var(--dragging-opacity, 0.5);
-}
-
-.emotion-8-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
-  box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-10 {
-  position: relative;
-  width: 100%;
-}
-
-.emotion-10:hover .studio-column-list-item-actions {
-  opacity: 1;
-}
-
-.emotion-11 {
-  z-index: 10;
-  color: hsla(0, 0, 0, 0.45);
-  opacity: 0;
-  position: absolute;
-  left: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-11:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-11:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  width: 100%;
-  gap: 4px;
-}
-
-.emotion-13 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  font-size: 12px;
-  border-radius: 2px;
-  min-width: 48px;
-}
-
-.emotion-14 {
-  padding-left: 13px;
-}
-
-.emotion-15 .studio-select-selector {
-  padding-left: 13px;
-}
-
-.emotion-18 {
-  z-index: 10;
-  color: hsla(0, 0, 0, 0.45);
-  opacity: 0;
-}
-
-.emotion-19 {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  -webkit-align-self: flex-end;
-  -ms-flex-item-align: flex-end;
-  align-self: flex-end;
-  overflow: hidden;
-  border-radius: 1px;
-  -webkit-backdrop-filter: blur(5px);
-  backdrop-filter: blur(5px);
-}
-
-.emotion-20 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-20:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-20:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-<div>
-  <div
-    class="layoutkit-flexbox emotion-0"
-  >
-    <div
-      class="studio-column-list-content studio-column-list-header emotion-1"
-    >
-      列标题
-    </div>
-    <div
-      class="studio-column-list-content studio-column-list-header emotion-1"
-    >
-      值类型
-    </div>
-    <div
-      class="studio-column-list-content studio-column-list-header emotion-1"
-    >
-      字段
-    </div>
-  </div>
-  <div
-    class="layoutkit-flexbox emotion-4 studio-column-list studio-sortable-list"
-  >
-    <button
-      class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-sortable-list-btn-add emotion-5"
-      type="button"
-    >
-      <span
-        class="studio-btn-icon"
-      >
-        <span
-          aria-label="plus"
-          class="anticon anticon-plus"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="plus"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-            />
-            <path
-              d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span>
-        添加一列
-      </span>
-    </button>
-    <ul
-      class="studio-sortable-list-container emotion-6"
-      style="--columns: 1;"
-    >
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 0;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-3"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="orderId"
-          data-index="0"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-0-orderId"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="订单id"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="orderId"
-                  >
-                    orderId
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 1;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-3"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="orderNumber"
-          data-index="1"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-1-orderNumber"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="订单号"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="orderNumber"
-                  >
-                    orderNumber
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 2;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-3"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="orderMoney"
-          data-index="2"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-2-orderMoney"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="订单金额"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="orderMoney"
-                  >
-                    orderMoney
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 3;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-3"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="productName"
-          data-index="3"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-3-productName"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="产品名称"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="productName"
-                  >
-                    productName
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 4;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-3"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="productComment"
-          data-index="4"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-4-productComment"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="产品介绍"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="productComment"
-                  >
-                    productComment
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 5;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-3"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="orderStatus"
-          data-index="5"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-5-orderStatus"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="订单状态"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="orderStatus"
-                  >
-                    orderStatus
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 6;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-3"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="orderCreated"
-          data-index="6"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-6-orderCreated"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="订单创建时间"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="日期"
-                  >
-                    日期
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="orderCreated"
-                  >
-                    orderCreated
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 7;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-3"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="detailPic"
-          data-index="7"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-7-detailPic"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="产品详情图"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="detailPic"
-                  >
-                    detailPic
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 8;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-3"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="closeReason"
-          data-index="8"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-8-closeReason"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="订单关闭原因"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="closeReason"
-                  >
-                    closeReason
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-7"
-        data-testid="list-item"
-        style="--index: 9;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-3"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="closeType"
-          data-index="9"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-9-closeType"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="订单关闭类型"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="closeType"
-                  >
-                    closeType
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-    </ul>
-    <div
-      id="DndDescribedBy-3"
-      style="display: none;"
-    >
-      
-    To pick up a draggable item, press the space bar.
-    While dragging, use the arrow keys to move the item.
-    Press space again to drop the item in its new position, or press escape to cancel.
-  
-    </div>
-    <div
-      aria-atomic="true"
-      aria-live="assertive"
-      id="DndLiveRegion-3"
-      role="status"
-      style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
-    />
-  </div>
-</div>
-`;
-
-exports[`<ColumnList /> > renders customCreate.tsx correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  width: 100%;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-1:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-1:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 4px;
-}
-
-.emotion-3 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  width: 100%;
-  height: 24px;
-  font-size: 12px;
-  border-radius: 2px;
-  min-width: 48px;
-  color: rgba(0, 0, 0, 0.45);
-  padding-left: 8px;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.emotion-7 {
-  list-style: none;
-  display: grid;
-  grid-auto-rows: max-content;
-  grid-gap: 2px;
-  grid-template-columns: repeat(var(--columns, 1), 1fr);
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  border-radius: 4px;
-  -webkit-transition: background-color 350ms ease;
-  transition: background-color 350ms ease;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  -webkit-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  -moz-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  -ms-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  transform-origin: 0 0;
-  touch-action: manipulation;
-}
-
-.emotion-8:not(:last-child) {
-  margin-bottom: 2px;
-}
-
-.emotion-9 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding: 1px 0;
-  color: rgba(0, 0, 0, 0.65);
-  font-size: 12px;
-  white-space: nowrap;
-  list-style: none;
-  border-radius: 4px;
-  outline: none;
-  -webkit-transform: scale(var(--scale, 1));
-  -moz-transform: scale(var(--scale, 1));
-  -ms-transform: scale(var(--scale, 1));
-  transform: scale(var(--scale, 1));
-  transform-origin: 50% 50%;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.emotion-9:focus-visible {
-  box-shadow: 0 0 4px 1px #4c9ffe,0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
-}
-
-.emotion-9:not(.studio-sortable-list-item-withHandle) {
-  cursor: -webkit-grab;
-  cursor: grab;
-  -webkit-user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: none;
-}
-
-.emotion-9-dragging:not(.studio-sortable-list-item-dragOverlay) {
-  z-index: 0;
-  opacity: var(--dragging-opacity, 0.5);
-}
-
-.emotion-9-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
-  box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
-}
-
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-11 {
-  position: relative;
-  width: 100%;
-}
-
-.emotion-11:hover .studio-column-list-item-actions {
-  opacity: 1;
-}
-
-.emotion-12 {
-  z-index: 10;
-  color: hsla(0, 0, 0, 0.45);
-  opacity: 0;
-  position: absolute;
-  left: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-12:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-12:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-13 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  width: 100%;
-  gap: 4px;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  font-size: 12px;
-  border-radius: 2px;
-  min-width: 48px;
-}
-
-.emotion-15 {
-  padding-left: 13px;
-}
-
-.emotion-16 .studio-select-selector {
-  padding-left: 13px;
-}
-
-.emotion-19 {
-  z-index: 10;
-  color: hsla(0, 0, 0, 0.45);
-  opacity: 0;
-}
-
-.emotion-20 {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  -webkit-align-self: flex-end;
-  -ms-flex-item-align: flex-end;
-  align-self: flex-end;
-  overflow: hidden;
-  border-radius: 1px;
-  -webkit-backdrop-filter: blur(5px);
-  backdrop-filter: blur(5px);
-}
-
-<div>
-  <div
-    class="layoutkit-flexbox emotion-0"
-    style="margin-bottom: 16px;"
-  >
-    <div>
-      列配置项
-    </div>
-    <button
-      class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-1"
-      tabindex="-1"
-      type="button"
-    >
-      <span
-        class="studio-btn-icon"
-      >
-        <span
-          aria-label="plus-circle"
-          class="anticon anticon-plus-circle"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="plus-circle"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-              fill="#1677ff"
-            />
-            <path
-              d="M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zm192 396c0 4.4-3.6 8-8 8H544v152c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V544H328c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h152V328c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v152h152c4.4 0 8 3.6 8 8v48z"
-              fill="#e6f4ff"
-            />
-            <path
-              d="M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"
-              fill="#1677ff"
-            />
-          </svg>
-        </span>
-      </span>
-    </button>
-  </div>
-  <div
-    class="layoutkit-flexbox emotion-2"
-  >
-    <div
-      class="studio-column-list-content studio-column-list-header emotion-3"
-    >
-      列标题
-    </div>
-    <div
-      class="studio-column-list-content studio-column-list-header emotion-3"
-    >
-      值类型
-    </div>
-    <div
-      class="studio-column-list-content studio-column-list-header emotion-3"
-    >
-      字段
-    </div>
-  </div>
-  <div
-    class="layoutkit-flexbox emotion-6 studio-column-list studio-sortable-list"
-  >
-    <ul
-      class="studio-sortable-list-container emotion-7"
-      style="--columns: 1;"
-    >
-      <li
-        class="studio-sortable-list-item-wrapper emotion-8"
-        data-testid="list-item"
-        style="--index: 0;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-2"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-9 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="orderId"
-          data-index="0"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-10 studio-column-list-item emotion-11"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-12"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-13 studio-column-list-item-content emotion-14"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-15"
-                id="column-list-0-orderId"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="订单id"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-16 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-16 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="orderId"
-                  >
-                    orderId
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-10 studio-column-list-item-actions emotion-19 studio-column-list-item-actions-right emotion-20"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-1"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-8"
-        data-testid="list-item"
-        style="--index: 1;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-2"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-9 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="orderNumber"
-          data-index="1"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-10 studio-column-list-item emotion-11"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-12"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-13 studio-column-list-item-content emotion-14"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-15"
-                id="column-list-1-orderNumber"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="订单号"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-16 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-16 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="orderNumber"
-                  >
-                    orderNumber
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-10 studio-column-list-item-actions emotion-19 studio-column-list-item-actions-right emotion-20"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-1"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-list-item-wrapper emotion-8"
-        data-testid="list-item"
-        style="--index: 2;"
-      >
-        <div
-          aria-describedby="DndDescribedBy-2"
-          aria-disabled="false"
-          aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-9 studio-sortable-list-item-withHandle"
-          data-cypress="draggable-item"
-          data-id="orderMoney"
-          data-index="2"
-          role="button"
-          style="background-color: rgb(255, 255, 255);"
-        >
-          <div
-            class="layoutkit-flexbox emotion-10 studio-column-list-item emotion-11"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-12"
-              data-cypress="draggable-handle"
-              style="width: 14px; height: 24px;"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
-                >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-13 studio-column-list-item-content emotion-14"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-15"
-                id="column-list-2-orderMoney"
-                placeholder="请输入"
-                style="flex: 1; max-width: 33.333333333333336%;"
-                type="text"
-                value="订单金额"
-              />
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-16 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="文本"
-                  >
-                    文本
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="studio-select studio-select-sm studio-column-list-content-tem emotion-16 studio-select-single studio-select-show-arrow"
-                style="flex: 1; max-width: 33.333333333333336%;"
-              >
-                <div
-                  class="studio-select-selector"
-                >
-                  <span
-                    class="studio-select-selection-search"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Search"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="studio-select-selection-search-input"
-                      id="rc_select_TEST_OR_SSR"
-                      readonly=""
-                      role="combobox"
-                      style="opacity: 0;"
-                      type="search"
-                      unselectable="on"
-                      value=""
-                    />
-                  </span>
-                  <span
-                    class="studio-select-selection-item"
-                    title="orderMoney"
-                  >
-                    orderMoney
-                  </span>
-                </div>
-                <span
-                  aria-hidden="true"
-                  class="studio-select-arrow"
-                  style="user-select: none;"
-                  unselectable="on"
-                >
-                  <span
-                    aria-label="down"
-                    class="anticon anticon-down studio-select-suffix"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="down"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="layoutkit-flexbox emotion-10 studio-column-list-item-actions emotion-19 studio-column-list-item-actions-right emotion-20"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-1"
-                style="height: 22px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="delete"
-                    class="anticon anticon-delete"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="delete"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </li>
-    </ul>
-    <div
-      id="DndDescribedBy-2"
-      style="display: none;"
-    >
-      
-    To pick up a draggable item, press the space bar.
-    While dragging, use the arrow keys to move the item.
-    Press space again to drop the item in its new position, or press escape to cancel.
-  
-    </div>
-    <div
-      aria-atomic="true"
-      aria-live="assertive"
-      id="DndLiveRegion-2"
-      role="status"
-      style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
-    />
-  </div>
-</div>
-`;
-
-exports[`<ColumnList /> > renders empty.tsx correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 4px;
-}
-
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  width: 100%;
-  height: 24px;
-  font-size: 12px;
-  border-radius: 2px;
-  min-width: 48px;
-  color: rgba(0, 0, 0, 0.45);
-  padding-left: 8px;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-<div>
-  <div
-    class="layoutkit-flexbox emotion-0"
-  >
-    <div
-      class="studio-column-list-content studio-column-list-header emotion-1"
-    >
-      列标题
-    </div>
-    <div
-      class="studio-column-list-content studio-column-list-header emotion-1"
-    >
-      值类型
-    </div>
-    <div
-      class="studio-column-list-content studio-column-list-header emotion-1"
-    >
-      字段
-    </div>
-  </div>
-  <div
-    class="layoutkit-flexbox emotion-4 studio-column-list studio-sortable-list"
-  >
-    <div
-      class="studio-empty studio-empty-normal"
-    >
-      <div
-        class="studio-empty-image"
-      >
-        <svg
-          height="41"
-          viewBox="0 0 64 41"
-          width="64"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g
-            fill="none"
-            fill-rule="evenodd"
-            transform="translate(0 1)"
-          >
-            <ellipse
-              cx="32"
-              cy="33"
-              fill="#f5f5f5"
-              rx="32"
-              ry="7"
-            />
-            <g
-              fill-rule="nonzero"
-              stroke="#d9d9d9"
-            >
-              <path
-                d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-              />
-              <path
-                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                fill="#fafafa"
-              />
-            </g>
-          </g>
-        </svg>
-      </div>
-      <div
-        class="studio-empty-description"
-      >
-        暂无数据
-      </div>
-    </div>
+    </ul>
     <div
-      id="DndDescribedBy-1"
+      id="DndDescribedBy-5"
       style="display: none;"
     >
       
@@ -10601,7 +4643,7 @@ exports[`<ColumnList /> > renders empty.tsx correctly 1`] = `
     <div
       aria-atomic="true"
       aria-live="assertive"
-      id="DndLiveRegion-1"
+      id="DndLiveRegion-5"
       role="status"
       style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
     />
@@ -10609,7 +4651,7 @@ exports[`<ColumnList /> > renders empty.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
+exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -10638,7 +4680,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
   padding-left: 8px;
 }
 
-.emotion-3 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10648,7 +4690,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
   flex-direction: column;
 }
 
-.emotion-4 {
+.emotion-5 {
   list-style: none;
   display: grid;
   grid-auto-rows: max-content;
@@ -10662,7 +4704,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
   transition: background-color 350ms ease;
 }
 
-.emotion-5 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10676,11 +4718,11 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
   touch-action: manipulation;
 }
 
-.emotion-5:not(:last-child) {
+.emotion-6:not(:last-child) {
   margin-bottom: 2px;
 }
 
-.emotion-6 {
+.emotion-7 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -10715,11 +4757,11 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
   -webkit-tap-highlight-color: transparent;
 }
 
-.emotion-6:focus-visible {
+.emotion-7:focus-visible {
   box-shadow: 0 0 4px 1px #4c9ffe,0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
 }
 
-.emotion-6:not(.studio-sortable-list-item-withHandle) {
+.emotion-7:not(.studio-sortable-list-item-withHandle) {
   cursor: -webkit-grab;
   cursor: grab;
   -webkit-user-select: none;
@@ -10730,16 +4772,16 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
   touch-action: none;
 }
 
-.emotion-6-dragging:not(.studio-sortable-list-item-dragOverlay) {
+.emotion-7-dragging:not(.studio-sortable-list-item-dragOverlay) {
   z-index: 0;
   opacity: var(--dragging-opacity, 0.5);
 }
 
-.emotion-6-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
+.emotion-7-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
   box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
 }
 
-.emotion-7 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10753,16 +4795,16 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
   align-items: center;
 }
 
-.emotion-8 {
+.emotion-9 {
   position: relative;
   width: 100%;
 }
 
-.emotion-8:hover .studio-column-list-item-actions {
+.emotion-9:hover .studio-column-list-item-actions {
   opacity: 1;
 }
 
-.emotion-9 {
+.emotion-10 {
   z-index: 10;
   color: hsla(0, 0, 0, 0.45);
   opacity: 0;
@@ -10784,16 +4826,16 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
   transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-9:hover {
+.emotion-10:hover {
   color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-9:active {
+.emotion-10:active {
   scale: 0.8;
   color: rgba(0, 0, 0, 0.88);
 }
 
-.emotion-10 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10805,7 +4847,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
   gap: 4px;
 }
 
-.emotion-11 {
+.emotion-12 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -10814,17 +4856,21 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
   min-width: 48px;
 }
 
-.emotion-12 {
+.emotion-13 {
   padding-left: 13px;
 }
 
-.emotion-15 {
+.emotion-14 .studio-select-selector {
+  padding-left: 13px;
+}
+
+.emotion-17 {
   z-index: 10;
   color: hsla(0, 0, 0, 0.45);
   opacity: 0;
 }
 
-.emotion-16 {
+.emotion-18 {
   position: absolute;
   top: 1px;
   right: 1px;
@@ -10837,7 +4883,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
   backdrop-filter: blur(5px);
 }
 
-.emotion-17 {
+.emotion-19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10854,38 +4900,15 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
   transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-17:hover {
+.emotion-19:hover {
   color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-17:active {
+.emotion-19:active {
   scale: 0.8;
   color: rgba(0, 0, 0, 0.88);
 }
 
-.emotion-44 {
-  height: 24px;
-  padding-block: 2px;
-  margin-top: 4px;
-  margin-bottom: 4px;
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-}
-
-.emotion-44:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background: rgba(0, 0, 0, 0.06)!important;
-  border-color: transparent!important;
-}
-
-.emotion-44:focus {
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-  border-color: #1677ff!important;
-}
-
 <div>
   <div
     class="layoutkit-flexbox emotion-0"
@@ -10893,42 +4916,47 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
     <div
       class="studio-column-list-content studio-column-list-header emotion-1"
     >
-      配置项一
+      列标题
     </div>
     <div
       class="studio-column-list-content studio-column-list-header emotion-1"
     >
-      配置项二
+      值类型
+    </div>
+    <div
+      class="studio-column-list-content studio-column-list-header emotion-1"
+    >
+      字段
     </div>
   </div>
   <div
-    class="layoutkit-flexbox emotion-3 studio-column-list studio-sortable-list"
+    class="layoutkit-flexbox emotion-4 studio-column-list studio-sortable-list"
   >
     <ul
-      class="studio-sortable-list-container emotion-4"
+      class="studio-sortable-list-container emotion-5"
       style="--columns: 1;"
     >
       <li
-        class="studio-sortable-list-item-wrapper emotion-5"
+        class="studio-sortable-list-item-wrapper emotion-6"
         data-testid="list-item"
         style="--index: 0;"
       >
         <div
-          aria-describedby="DndDescribedBy-0"
+          aria-describedby="DndDescribedBy-4"
           aria-disabled="false"
           aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
+          class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="index"
+          data-id="615bfd5f-8265-4819-9b87-4582085a8211"
           data-index="0"
           role="button"
           style="background-color: rgb(255, 255, 255);"
         >
           <div
-            class="layoutkit-flexbox emotion-7 studio-column-list-item emotion-8"
+            class="layoutkit-flexbox emotion-8 studio-column-list-item emotion-9"
           >
             <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-9"
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-10"
               data-cypress="draggable-handle"
               style="width: 14px; height: 24px;"
               tabindex="-1"
@@ -10937,42 +4965,158 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
               <span
                 class="studio-btn-icon"
               >
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  width="16"
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  width="16"
+                >
+                  <path
+                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                  />
+                </svg>
+              </span>
+            </button>
+            <div
+              class="layoutkit-flexbox emotion-11 studio-column-list-item-content emotion-12"
+            >
+              <input
+                class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
+                id="column-list-0-615bfd5f-8265-4819-9b87-4582085a8211"
+                placeholder="请输入"
+                style="flex: 1; max-width: 33.333333333333336%;"
+                type="text"
+                value="序号"
+              />
+              <div
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-14 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
+              >
+                <div
+                  class="studio-select-selector"
+                >
+                  <span
+                    class="studio-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="studio-select-selection-item"
+                    title="圆形序号"
+                  >
+                    圆形序号
+                  </span>
+                </div>
+                <span
+                  aria-hidden="true"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
+                >
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-14 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
+              >
+                <div
+                  class="studio-select-selector"
                 >
-                  <path
-                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <div
-              class="layoutkit-flexbox emotion-10 studio-column-list-item-content emotion-11"
-            >
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-0-index"
-                placeholder="请输入"
-                style="flex: 1; max-width: 50%;"
-                type="text"
-                value="序号"
-              />
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-0-index"
-                placeholder="请输入"
-                style="flex: 1; max-width: 50%;"
-                type="text"
-                value="index"
-              />
+                  <span
+                    class="studio-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="studio-select-selection-item"
+                    title="index"
+                  >
+                    index
+                  </span>
+                </div>
+                <span
+                  aria-hidden="true"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
+                >
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </div>
             </div>
             <div
-              class="layoutkit-flexbox emotion-7 studio-column-list-item-actions emotion-15 studio-column-list-item-actions-right emotion-16"
+              class="layoutkit-flexbox emotion-8 studio-column-list-item-actions emotion-17 studio-column-list-item-actions-right emotion-18"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-17"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-19"
                 style="height: 22px;"
                 tabindex="-1"
                 type="button"
@@ -11006,26 +5150,26 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
         </div>
       </li>
       <li
-        class="studio-sortable-list-item-wrapper emotion-5"
+        class="studio-sortable-list-item-wrapper emotion-6"
         data-testid="list-item"
         style="--index: 1;"
       >
         <div
-          aria-describedby="DndDescribedBy-0"
+          aria-describedby="DndDescribedBy-4"
           aria-disabled="false"
           aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
+          class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="name"
+          data-id="7997d7d7-d268-4997-8fd6-2bca80c8e3c0"
           data-index="1"
           role="button"
           style="background-color: rgb(255, 255, 255);"
         >
           <div
-            class="layoutkit-flexbox emotion-7 studio-column-list-item emotion-8"
+            class="layoutkit-flexbox emotion-8 studio-column-list-item emotion-9"
           >
             <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-9"
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-10"
               data-cypress="draggable-handle"
               style="width: 14px; height: 24px;"
               tabindex="-1"
@@ -11046,30 +5190,146 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
               </span>
             </button>
             <div
-              class="layoutkit-flexbox emotion-10 studio-column-list-item-content emotion-11"
+              class="layoutkit-flexbox emotion-11 studio-column-list-item-content emotion-12"
             >
               <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-1-name"
+                class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
+                id="column-list-1-7997d7d7-d268-4997-8fd6-2bca80c8e3c0"
                 placeholder="请输入"
-                style="flex: 1; max-width: 50%;"
+                style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
                 value="授权企业名称"
               />
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-1-name"
-                placeholder="请输入"
-                style="flex: 1; max-width: 50%;"
-                type="text"
-                value="name"
-              />
+              <div
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-14 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
+              >
+                <div
+                  class="studio-select-selector"
+                >
+                  <span
+                    class="studio-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="studio-select-selection-item"
+                    title="文本"
+                  >
+                    文本
+                  </span>
+                </div>
+                <span
+                  aria-hidden="true"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
+                >
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-14 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
+              >
+                <div
+                  class="studio-select-selector"
+                >
+                  <span
+                    class="studio-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="studio-select-selection-item"
+                    title="name"
+                  >
+                    name
+                  </span>
+                </div>
+                <span
+                  aria-hidden="true"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
+                >
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </div>
             </div>
             <div
-              class="layoutkit-flexbox emotion-7 studio-column-list-item-actions emotion-15 studio-column-list-item-actions-right emotion-16"
+              class="layoutkit-flexbox emotion-8 studio-column-list-item-actions emotion-17 studio-column-list-item-actions-right emotion-18"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-17"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-19"
                 style="height: 22px;"
                 tabindex="-1"
                 type="button"
@@ -11103,26 +5363,26 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
         </div>
       </li>
       <li
-        class="studio-sortable-list-item-wrapper emotion-5"
+        class="studio-sortable-list-item-wrapper emotion-6"
         data-testid="list-item"
         style="--index: 2;"
       >
         <div
-          aria-describedby="DndDescribedBy-0"
+          aria-describedby="DndDescribedBy-4"
           aria-disabled="false"
           aria-roledescription="sortable"
-          class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
+          class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="authCompany"
+          data-id="e28321d5-8112-4859-a135-c77331bf4056"
           data-index="2"
           role="button"
           style="background-color: rgb(255, 255, 255);"
         >
           <div
-            class="layoutkit-flexbox emotion-7 studio-column-list-item emotion-8"
+            class="layoutkit-flexbox emotion-8 studio-column-list-item emotion-9"
           >
             <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-9"
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-10"
               data-cypress="draggable-handle"
               style="width: 14px; height: 24px;"
               tabindex="-1"
@@ -11143,30 +5403,146 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
               </span>
             </button>
             <div
-              class="layoutkit-flexbox emotion-10 studio-column-list-item-content emotion-11"
+              class="layoutkit-flexbox emotion-11 studio-column-list-item-content emotion-12"
             >
               <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-2-authCompany"
+                class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
+                id="column-list-2-e28321d5-8112-4859-a135-c77331bf4056"
                 placeholder="请输入"
-                style="flex: 1; max-width: 50%;"
+                style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
                 value="被授权企业"
               />
-              <input
-                class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-2-authCompany"
-                placeholder="请输入"
-                style="flex: 1; max-width: 50%;"
-                type="text"
-                value="authCompany"
-              />
+              <div
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-14 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
+              >
+                <div
+                  class="studio-select-selector"
+                >
+                  <span
+                    class="studio-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="studio-select-selection-item"
+                    title="文本"
+                  >
+                    文本
+                  </span>
+                </div>
+                <span
+                  aria-hidden="true"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
+                >
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-14 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
+              >
+                <div
+                  class="studio-select-selector"
+                >
+                  <span
+                    class="studio-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="studio-select-selection-item"
+                    title="authCompany"
+                  >
+                    authCompany
+                  </span>
+                </div>
+                <span
+                  aria-hidden="true"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
+                >
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </div>
             </div>
             <div
-              class="layoutkit-flexbox emotion-7 studio-column-list-item-actions emotion-15 studio-column-list-item-actions-right emotion-16"
+              class="layoutkit-flexbox emotion-8 studio-column-list-item-actions emotion-17 studio-column-list-item-actions-right emotion-18"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-17"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-19"
                 style="height: 22px;"
                 tabindex="-1"
                 type="button"
@@ -11200,42 +5576,8 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
         </div>
       </li>
     </ul>
-    <button
-      class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-sortable-list-btn-add emotion-44"
-      type="button"
-    >
-      <span
-        class="studio-btn-icon"
-      >
-        <span
-          aria-label="plus"
-          class="anticon anticon-plus"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="plus"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-            />
-            <path
-              d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
-            />
-          </svg>
-        </span>
-      </span>
-      <span>
-        添加一列
-      </span>
-    </button>
     <div
-      id="DndDescribedBy-0"
+      id="DndDescribedBy-4"
       style="display: none;"
     >
       
@@ -11247,7 +5589,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
     <div
       aria-atomic="true"
       aria-live="assertive"
-      id="DndLiveRegion-0"
+      id="DndLiveRegion-4"
       role="status"
       style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
     />
@@ -11255,16 +5597,36 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`<ContextMenu /> > renders index.tsx correctly 1`] = `
-<div>
-  <div>
-    RightClick
-  </div>
-</div>
-`;
-
-exports[`<DataFill /> > renders basic.tsx correctly 1`] = `
+exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 4px;
+}
+
+.emotion-1 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  width: 100%;
+  height: 24px;
+  font-size: 12px;
+  border-radius: 2px;
+  min-width: 48px;
+  color: rgba(0, 0, 0, 0.45);
+  padding-left: 8px;
+}
+
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11274,93 +5636,175 @@ exports[`<DataFill /> > renders basic.tsx correctly 1`] = `
   flex-direction: column;
 }
 
-.emotion-1 .studio-tree-directory .studio-tree-switcher,
-.emotion-1 .studio-tree-directory .studio-tree-iconEle {
-  line-height: 32px!important;
-}
-
-.emotion-1 .studio-tree-directory .studio-tree-node-content-wrapper {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  padding-left: 0;
-  line-height: 32px!important;
+.emotion-5 {
+  height: 24px;
+  padding-block: 2px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
 }
 
-.emotion-1 .studio-tree-directory .studio-tree-title {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+.emotion-5:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background: rgba(0, 0, 0, 0.06)!important;
+  border-color: transparent!important;
 }
 
-.emotion-1 .studio-tree-directory .studio-tree-treenode {
-  cursor: pointer;
+.emotion-5:focus {
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+  border-color: #1677ff!important;
 }
 
-.emotion-1 .studio-tree-directory .studio-tree-treenode::before {
-  border: 1px solid rgba(5, 5, 5, 0.06);
+.emotion-6 {
+  list-style: none;
+  display: grid;
+  grid-auto-rows: max-content;
+  grid-gap: 2px;
+  grid-template-columns: repeat(var(--columns, 1), 1fr);
+  width: 100%;
+  margin: 0;
+  padding: 0;
   border-radius: 4px;
+  -webkit-transition: background-color 350ms ease;
+  transition: background-color 350ms ease;
 }
 
-.emotion-1 .studio-tree-directory .studio-tree-treenode:hover .studio-tree-switcher {
-  color: rgba(0, 0, 0, 0.88);
+.emotion-7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  -webkit-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  -moz-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  -ms-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  transform-origin: 0 0;
+  touch-action: manipulation;
 }
 
-.emotion-1 .studio-tree-directory .studio-tree-treenode:hover .studio-tree-node-content-wrapper {
-  color: rgba(0, 0, 0, 0.88);
+.emotion-7:not(:last-child) {
+  margin-bottom: 2px;
 }
 
-.emotion-1 .studio-tree-directory .studio-tree-treenode:hover::before {
-  background: rgba(0, 0, 0, 0.02);
-  border-color: #1677ff;
-  box-shadow: 0 0 3px 0 #1677ff;
+.emotion-8 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 1px 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 12px;
+  white-space: nowrap;
+  list-style: none;
+  border-radius: 4px;
+  outline: none;
+  -webkit-transform: scale(var(--scale, 1));
+  -moz-transform: scale(var(--scale, 1));
+  -ms-transform: scale(var(--scale, 1));
+  transform: scale(var(--scale, 1));
+  transform-origin: 50% 50%;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+  -webkit-tap-highlight-color: transparent;
 }
 
-.emotion-1 .studio-tree-directory .studio-tree-treenode .studio-tree-switcher-noop {
-  cursor: pointer;
+.emotion-8:focus-visible {
+  box-shadow: 0 0 4px 1px #4c9ffe,0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
 }
 
-.emotion-1 .studio-tree-directory .studio-tree-treenode .studio-tree-switcher {
-  color: rgba(0, 0, 0, 0.88);
+.emotion-8:not(.studio-sortable-list-item-withHandle) {
+  cursor: -webkit-grab;
+  cursor: grab;
+  -webkit-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  touch-action: none;
 }
 
-.emotion-1 .studio-tree-directory .studio-tree-treenode .studio-tree-node-content-wrapper {
-  color: rgba(0, 0, 0, 0.88);
+.emotion-8-dragging:not(.studio-sortable-list-item-dragOverlay) {
+  z-index: 0;
+  opacity: var(--dragging-opacity, 0.5);
 }
 
-.emotion-1 .studio-tree-directory .studio-tree-treenode-selected::before {
-  background: #ffffff;
-  border: 2 solid #1677ff;
+.emotion-8-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
+  box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
 }
 
-.emotion-1 .studio-tree-directory .studio-tree-treenode-selected .studio-tree-switcher {
-  color: rgba(0, 0, 0, 0.88);
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
-.emotion-1 .studio-tree-directory .studio-tree-treenode-selected .studio-tree-node-content-wrapper {
-  color: rgba(0, 0, 0, 0.88);
+.emotion-10 {
+  position: relative;
+  width: 100%;
 }
 
-.emotion-1 .studio-tree-directory .studio-tree-indent-unit {
-  width: 12px;
+.emotion-10:hover .studio-column-list-item-actions {
+  opacity: 1;
 }
 
-.emotion-2 {
+.emotion-11 {
+  z-index: 10;
+  color: hsla(0, 0, 0, 0.45);
+  opacity: 0;
+  position: absolute;
+  left: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-3 {
+.emotion-11:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-11:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11368,706 +5812,796 @@ exports[`<DataFill /> > renders basic.tsx correctly 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  gap: 8px;
+  width: 100%;
+  gap: 4px;
 }
 
-.emotion-5 {
-  max-width: 120px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: rgba(0, 0, 0, 0.25);
-  font-size: 10px;
+.emotion-13 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  font-size: 12px;
+  border-radius: 2px;
+  min-width: 48px;
 }
 
-.emotion-6 {
-  padding: 4px;
+.emotion-14 {
+  padding-left: 13px;
 }
 
-.emotion-6 .studio-segmented-item {
-  margin-right: 4px;
-  color: rgba(0, 0, 0, 0.45);
-  border-radius: 2px;
+.emotion-15 .studio-select-selector {
+  padding-left: 13px;
 }
 
-.emotion-6 .studio-segmented-item:hover {
-  color: rgba(0, 0, 0, 0.65);
+.emotion-18 {
+  z-index: 10;
+  color: hsla(0, 0, 0, 0.45);
+  opacity: 0;
 }
 
-.emotion-6 .studio-segmented-item:last-child {
-  margin-right: 0;
+.emotion-19 {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  -webkit-align-self: flex-end;
+  -ms-flex-item-align: flex-end;
+  align-self: flex-end;
+  overflow: hidden;
+  border-radius: 1px;
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
 }
 
-.emotion-6 .studio-segmented-item-selected {
-  color: rgba(0, 0, 0, 0.88);
+.emotion-20 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-6 .studio-segmented-item-selected:hover {
-  color: rgba(0, 0, 0, 0.88);
+.emotion-20:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-6 .studio-segmented-item-label {
-  min-height: auto;
-  padding: 2px 7px;
-  line-height: unset;
+.emotion-20:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
 }
 
 <div>
   <div
-    class="layoutkit-flexbox emotion-0 studio-data-fill emotion-1"
+    class="layoutkit-flexbox emotion-0"
+  >
+    <div
+      class="studio-column-list-content studio-column-list-header emotion-1"
+    >
+      列标题
+    </div>
+    <div
+      class="studio-column-list-content studio-column-list-header emotion-1"
+    >
+      值类型
+    </div>
+    <div
+      class="studio-column-list-content studio-column-list-header emotion-1"
+    >
+      字段
+    </div>
+  </div>
+  <div
+    class="layoutkit-flexbox emotion-4 studio-column-list studio-sortable-list"
   >
-    <div
-      class="studio-tree studio-tree-block-node studio-tree-unselectable studio-tree-directory"
-      role="tree"
+    <button
+      class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-sortable-list-btn-add emotion-5"
+      type="button"
     >
-      <div>
-        <input
-          aria-label="for screen reader"
-          style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-          tabindex="0"
-          value=""
-        />
-      </div>
-      <div
-        aria-hidden="true"
-        class="studio-tree-treenode"
-        style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
+      <span
+        class="studio-btn-icon"
       >
-        <div
-          class="studio-tree-indent"
+        <span
+          aria-label="plus"
+          class="anticon anticon-plus"
+          role="img"
         >
-          <div
-            class="studio-tree-indent-unit"
-          />
-        </div>
-      </div>
-      <div
-        class="studio-tree-list"
-        style="position: relative;"
+          <svg
+            aria-hidden="true"
+            data-icon="plus"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+            />
+            <path
+              d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
+            />
+          </svg>
+        </span>
+      </span>
+      <span>
+        添加一列
+      </span>
+    </button>
+    <ul
+      class="studio-sortable-list-container emotion-6"
+      style="--columns: 1;"
+    >
+      <li
+        class="studio-sortable-list-item-wrapper emotion-7"
+        data-testid="list-item"
+        style="--index: 0;"
       >
         <div
-          class="studio-tree-list-holder"
+          aria-describedby="DndDescribedBy-3"
+          aria-disabled="false"
+          aria-roledescription="sortable"
+          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
+          data-cypress="draggable-item"
+          data-id="3c45306b-16ce-4b93-8e48-a700c9bc632e"
+          data-index="0"
+          role="button"
+          style="background-color: rgb(255, 255, 255);"
         >
-          <div>
+          <div
+            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
+          >
+            <button
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
+              data-cypress="draggable-handle"
+              style="width: 14px; height: 24px;"
+              tabindex="-1"
+              type="button"
+            >
+              <span
+                class="studio-btn-icon"
+              >
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  width="16"
+                >
+                  <path
+                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                  />
+                </svg>
+              </span>
+            </button>
             <div
-              class="studio-tree-list-holder-inner"
-              style="display: flex; flex-direction: column;"
+              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
             >
+              <input
+                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
+                id="column-list-0-3c45306b-16ce-4b93-8e48-a700c9bc632e"
+                placeholder="请输入"
+                style="flex: 1; max-width: 33.333333333333336%;"
+                type="text"
+                value="产品名称"
+              />
               <div
-                aria-grabbed="false"
-                class="studio-tree-treenode studio-tree-treenode-switcher-close"
-                draggable="false"
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
+              >
+                <div
+                  class="studio-select-selector"
+                >
+                  <span
+                    class="studio-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="studio-select-selection-item"
+                    title="文本"
+                  >
+                    文本
+                  </span>
+                </div>
+                <span
+                  aria-hidden="true"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
+                >
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
               >
+                <div
+                  class="studio-select-selector"
+                >
+                  <span
+                    class="studio-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="studio-select-selection-item"
+                    title="productName"
+                  >
+                    productName
+                  </span>
+                </div>
                 <span
                   aria-hidden="true"
-                  class="studio-tree-indent"
-                />
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
+                >
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </div>
+            </div>
+            <div
+              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
+            >
+              <button
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
+                style="height: 22px;"
+                tabindex="-1"
+                type="button"
+              >
                 <span
-                  class="studio-tree-switcher studio-tree-switcher_close"
+                  class="studio-btn-icon"
                 >
                   <span
-                    aria-label="caret-down"
-                    class="anticon anticon-caret-down studio-tree-switcher-icon"
+                    aria-label="delete"
+                    class="anticon anticon-delete"
                     role="img"
                   >
                     <svg
                       aria-hidden="true"
-                      data-icon="caret-down"
+                      data-icon="delete"
                       fill="currentColor"
                       focusable="false"
                       height="1em"
-                      viewBox="0 0 1024 1024"
+                      viewBox="64 64 896 896"
                       width="1em"
                     >
                       <path
-                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
                       />
                     </svg>
                   </span>
                 </span>
-                <span
-                  class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-close"
-                  title="文本"
+              </button>
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-list-item-wrapper emotion-7"
+        data-testid="list-item"
+        style="--index: 1;"
+      >
+        <div
+          aria-describedby="DndDescribedBy-3"
+          aria-disabled="false"
+          aria-roledescription="sortable"
+          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
+          data-cypress="draggable-item"
+          data-id="c9e3bc32-4669-4e89-89a0-b1750a521ed0"
+          data-index="1"
+          role="button"
+          style="background-color: rgb(255, 255, 255);"
+        >
+          <div
+            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
+          >
+            <button
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
+              data-cypress="draggable-handle"
+              style="width: 14px; height: 24px;"
+              tabindex="-1"
+              type="button"
+            >
+              <span
+                class="studio-btn-icon"
+              >
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  width="16"
+                >
+                  <path
+                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                  />
+                </svg>
+              </span>
+            </button>
+            <div
+              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
+            >
+              <input
+                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
+                id="column-list-1-c9e3bc32-4669-4e89-89a0-b1750a521ed0"
+                placeholder="请输入"
+                style="flex: 1; max-width: 33.333333333333336%;"
+                type="text"
+                value="产品介绍"
+              />
+              <div
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
+              >
+                <div
+                  class="studio-select-selector"
                 >
                   <span
-                    class="studio-tree-iconEle studio-tree-icon__customize"
+                    class="studio-select-selection-search"
                   >
-                    <svg
-                      class="pro-editor-icon"
-                      fill="currentColor"
-                      height="1em"
-                      style="vertical-align: -0.125em;"
-                      viewBox="0 0 1024 1024"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M853.3 1024H170.7A171.2 171.2 0 0 1 0 853.3V170.7C0 76.8 76.8 0 170.7 0h682.6C947.2 0 1024 76.8 1024 170.7v682.6c0 93.9-76.8 170.7-170.7 170.7zM170.7 85.3c-47 0-85.4 38.4-85.4 85.4v682.6c0 47 38.4 85.4 85.4 85.4h682.6c47 0 85.4-38.4 85.4-85.4V170.7c0-47-38.4-85.4-85.4-85.4H170.7z"
-                      />
-                      <path
-                        d="M725.3 341.3H298.7c-25.6 0-42.7-17-42.7-42.6s17-42.7 42.7-42.7h426.6c25.6 0 42.7 17 42.7 42.7s-17 42.6-42.7 42.6z"
-                      />
-                      <path
-                        d="M298.7 384c-25.6 0-42.7-17-42.7-42.7v-42.6c0-25.6 17-42.7 42.7-42.7s42.6 17 42.6 42.7v42.6c0 25.6-17 42.7-42.6 42.7zM725.3 384c-25.6 0-42.6-17-42.6-42.7v-42.6c0-25.6 17-42.7 42.6-42.7s42.7 17 42.7 42.7v42.6c0 25.6-17 42.7-42.7 42.7zM512 768c-25.6 0-42.7-17-42.7-42.7V298.7c0-25.6 17.1-42.7 42.7-42.7s42.7 17 42.7 42.7v426.6c0 25.6-17.1 42.7-42.7 42.7z"
-                      />
-                      <path
-                        d="M554.7 768h-85.4c-25.6 0-42.6-17-42.6-42.7s17-42.6 42.6-42.6h85.4c25.6 0 42.6 17 42.6 42.6s-17 42.7-42.6 42.7z"
-                      />
-                    </svg>
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
                   </span>
                   <span
-                    class="studio-tree-title"
+                    class="studio-select-selection-item"
+                    title="文本"
                   >
-                    <div
-                      class="layoutkit-flexbox emotion-2"
-                    >
-                      <div
-                        class="layoutkit-flexbox emotion-3"
-                      >
-                        <div
-                          class="layoutkit-flexbox emotion-0"
-                          style="white-space: nowrap;"
-                        >
-                          文本
-                        </div>
-                        <span
-                          class="studio-data-fill-demo-data emotion-5"
-                        />
-                      </div>
-                      <div
-                        style="white-space: nowrap;"
-                      >
-                        <div
-                          class="studio-segmented emotion-6 studio-segmented-sm"
-                          style="line-height: 1;"
-                        >
-                          <div
-                            class="studio-segmented-group"
-                          >
-                            <label
-                              class="studio-segmented-item studio-segmented-item-selected"
-                            >
-                              <input
-                                checked=""
-                                class="studio-segmented-item-input"
-                                type="radio"
-                              />
-                              <div
-                                class="studio-segmented-item-label"
-                                title="短文本"
-                              >
-                                短文本
-                              </div>
-                            </label>
-                            <label
-                              class="studio-segmented-item"
-                            >
-                              <input
-                                class="studio-segmented-item-input"
-                                type="radio"
-                              />
-                              <div
-                                class="studio-segmented-item-label"
-                                title="长文本"
-                              >
-                                长文本
-                              </div>
-                            </label>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                    文本
                   </span>
-                </span>
-              </div>
-              <div
-                aria-grabbed="false"
-                class="studio-tree-treenode studio-tree-treenode-switcher-close"
-                draggable="false"
-              >
+                </div>
                 <span
                   aria-hidden="true"
-                  class="studio-tree-indent"
-                />
-                <span
-                  class="studio-tree-switcher studio-tree-switcher_close"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
                 >
                   <span
-                    aria-label="caret-down"
-                    class="anticon anticon-caret-down studio-tree-switcher-icon"
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
                     role="img"
                   >
                     <svg
                       aria-hidden="true"
-                      data-icon="caret-down"
+                      data-icon="down"
                       fill="currentColor"
                       focusable="false"
                       height="1em"
-                      viewBox="0 0 1024 1024"
+                      viewBox="64 64 896 896"
                       width="1em"
                     >
                       <path
-                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                       />
                     </svg>
                   </span>
                 </span>
-                <span
-                  class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-close"
-                  title="编号"
+              </div>
+              <div
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
+              >
+                <div
+                  class="studio-select-selector"
                 >
                   <span
-                    class="studio-tree-iconEle studio-tree-icon__customize"
-                  >
-                    <span
-                      aria-label="folder"
-                      class="anticon anticon-folder"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="folder"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M880 298.4H521L403.7 186.2a8.15 8.15 0 00-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="studio-tree-title"
+                    class="studio-select-selection-search"
                   >
-                    <div
-                      class="layoutkit-flexbox emotion-2"
-                    >
-                      <div
-                        class="layoutkit-flexbox emotion-3"
-                      >
-                        <div
-                          class="layoutkit-flexbox emotion-0"
-                          style="white-space: nowrap;"
-                        >
-                          编号
-                        </div>
-                        <span
-                          class="studio-data-fill-demo-data emotion-5"
-                        />
-                      </div>
-                    </div>
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
                   </span>
-                </span>
-              </div>
-              <div
-                aria-grabbed="false"
-                class="studio-tree-treenode studio-tree-treenode-switcher-close"
-                draggable="false"
-              >
+                  <span
+                    class="studio-select-selection-item"
+                    title="productComment"
+                  >
+                    productComment
+                  </span>
+                </div>
                 <span
                   aria-hidden="true"
-                  class="studio-tree-indent"
-                />
-                <span
-                  class="studio-tree-switcher studio-tree-switcher_close"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
                 >
                   <span
-                    aria-label="caret-down"
-                    class="anticon anticon-caret-down studio-tree-switcher-icon"
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
                     role="img"
                   >
                     <svg
                       aria-hidden="true"
-                      data-icon="caret-down"
+                      data-icon="down"
                       fill="currentColor"
                       focusable="false"
                       height="1em"
-                      viewBox="0 0 1024 1024"
+                      viewBox="64 64 896 896"
                       width="1em"
                     >
                       <path
-                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                       />
                     </svg>
                   </span>
                 </span>
+              </div>
+            </div>
+            <div
+              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
+            >
+              <button
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
+                style="height: 22px;"
+                tabindex="-1"
+                type="button"
+              >
                 <span
-                  class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-close"
-                  title="数据"
+                  class="studio-btn-icon"
                 >
                   <span
-                    class="studio-tree-iconEle studio-tree-icon__customize"
+                    aria-label="delete"
+                    class="anticon anticon-delete"
+                    role="img"
                   >
                     <svg
-                      class="pro-editor-icon"
+                      aria-hidden="true"
+                      data-icon="delete"
+                      fill="currentColor"
+                      focusable="false"
                       height="1em"
-                      style="vertical-align: -0.125em;"
-                      viewBox="0 0 1195 897"
+                      viewBox="64 64 896 896"
                       width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                      xmlns:xlink="http://www.w3.org/1999/xlink"
                     >
-                      <g
-                        fill="none"
-                        fill-rule="evenodd"
-                        id="FillNumber-页面-1"
-                        stroke="none"
-                        stroke-width="1"
-                      >
-                        <g
-                          fill="currentColor"
-                          fill-rule="nonzero"
-                          id="FillNumber-icon-number"
-                          transform="translate(0.207180, 0.557698)"
-                        >
-                          <path
-                            d="M74.666667,74.666667 L74.666667,821.333333 L1120,821.333333 L1120,74.666667 L74.666667,74.666667 Z M74.666667,-1.42108547e-14 L1120,-1.42108547e-14 C1161.216,-1.42108547e-14 1194.66667,33.450667 1194.66667,74.666667 L1194.66667,821.333333 C1194.66667,862.570595 1161.23726,896 1120,896 L74.666667,896 C33.4294055,896 0,862.570595 0,821.333333 L0,74.666667 C0,33.450667 33.450667,-1.42108547e-14 74.666667,-1.42108547e-14 Z M263.68,263.68 L314.965333,263.68 L314.965333,680.106667 L246.698667,680.106667 L246.698667,346.026667 C219.34797,370.032502 186.811608,387.381334 151.637333,396.714667 L151.637333,329.045333 C172.473579,323.511105 192.49732,315.277848 211.2,304.554667 C232.192,291.754667 249.6,278.357334 263.68,263.765333 L263.68,263.68 Z M548.949333,255.488 C589.141333,255.488 622.336,267.178667 648.704,290.474667 C674.304,313.856 687.104,343.552 687.104,380.928 C687.104,417.109333 673.194667,449.792 646.314667,479.488 C630.016,496.981333 600.832,519.168 560.042667,546.56 C517.376,574.549333 491.776,599.125333 482.389333,620.117333 L687.786667,620.117333 L687.786667,680.192 L397.226667,680.192 C397.226667,637.525333 410.624,600.832 438.698667,569.258667 C453.802667,551.850667 485.888,526.165334 534.272,492.885333 C561.152,474.282666 579.84,458.496 591.445333,446.208 C609.621333,425.813333 618.922666,403.626667 618.922667,380.330667 C618.922667,357.546667 612.522667,340.650667 600.832,329.557333 C588.544,318.464 570.538667,313.258666 546.56,313.258667 C520.96,313.258667 501.674667,321.962667 488.874667,339.541333 C476.074667,355.754666 468.992,380.928 467.797333,413.610667 L399.530667,413.610667 C400.128,366.933334 413.610667,329.557334 440.490667,300.970667 C467.797334,270.677334 503.978667,255.488 548.864,255.488 L548.949333,255.488 Z M896.597333,255.488 C938.581333,255.488 972.970666,265.386667 998.656,285.866667 C1023.744,306.261334 1036.544,334.250667 1036.544,370.346667 C1036.544,415.914667 1013.248,446.293334 967.168,461.397333 C991.658667,469.077333 1010.944,480.085333 1023.744,495.274667 C1037.73867,510.976 1044.736,531.456 1044.736,555.861333 C1044.736,594.432 1031.33867,625.92 1004.45867,650.410667 C976.469334,675.498667 939.776,688.298667 894.208,688.298667 C851.114667,688.298667 816.042667,677.205334 789.845333,655.018667 C760.661333,630.613334 744.362666,594.432 740.864,547.754667 L810.24,547.754667 C811.434667,574.549334 819.626667,595.541334 835.84,610.133333 C850.517333,623.616 869.717333,630.613333 893.696,630.613333 C919.893333,630.613333 940.885333,622.933333 956.074667,608.426667 C969.474285,595.450839 976.890408,577.497642 976.554667,558.848 C976.554667,534.954667 968.874667,517.376 954.88,506.368 C940.885333,494.677333 920.490667,489.386667 893.696,489.386667 L864.512,489.386667 L864.512,438.101333 L893.696,438.101333 C918.186667,438.101333 936.874667,432.810666 949.674667,422.314667 C961.877334,411.818667 968.362667,396.117334 968.362667,375.637333 C968.362667,355.242666 962.474667,340.053333 951.381333,329.557333 C939.178666,319.061333 921.088,313.856 897.194667,313.856 C872.704,313.856 854.016,319.658667 840.618667,331.946667 C826.624,344.149334 818.432,362.837334 816.042667,387.925333 L748.970667,387.925333 C752.469334,345.941333 767.744,313.258666 795.648,289.877333 C821.930667,266.581333 855.722667,255.488 896.597333,255.488 L896.597333,255.488 Z"
-                            id="FillNumber-形状"
-                          />
-                        </g>
-                      </g>
+                      <path
+                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                      />
                     </svg>
                   </span>
-                  <span
-                    class="studio-tree-title"
-                  >
-                    <div
-                      class="layoutkit-flexbox emotion-2"
-                    >
-                      <div
-                        class="layoutkit-flexbox emotion-3"
-                      >
-                        <div
-                          class="layoutkit-flexbox emotion-0"
-                          style="white-space: nowrap;"
-                        >
-                          数据
-                        </div>
-                        <span
-                          class="studio-data-fill-demo-data emotion-5"
-                        />
-                      </div>
-                      <div
-                        style="white-space: nowrap;"
-                      >
-                        <div
-                          class="studio-segmented emotion-6 studio-segmented-sm"
-                          style="line-height: 1;"
-                        >
-                          <div
-                            class="studio-segmented-group"
-                          >
-                            <label
-                              class="studio-segmented-item"
-                            >
-                              <input
-                                class="studio-segmented-item-input"
-                                type="radio"
-                              />
-                              <div
-                                class="studio-segmented-item-label"
-                                title="0~9"
-                              >
-                                0~9
-                              </div>
-                            </label>
-                            <label
-                              class="studio-segmented-item"
-                            >
-                              <input
-                                class="studio-segmented-item-input"
-                                type="radio"
-                              />
-                              <div
-                                class="studio-segmented-item-label"
-                                title="10~99"
-                              >
-                                10~99
-                              </div>
-                            </label>
-                            <label
-                              class="studio-segmented-item studio-segmented-item-selected"
-                            >
-                              <input
-                                checked=""
-                                class="studio-segmented-item-input"
-                                type="radio"
-                              />
-                              <div
-                                class="studio-segmented-item-label"
-                                title="100~999"
-                              >
-                                100~999
-                              </div>
-                            </label>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </span>
                 </span>
-              </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-list-item-wrapper emotion-7"
+        data-testid="list-item"
+        style="--index: 2;"
+      >
+        <div
+          aria-describedby="DndDescribedBy-3"
+          aria-disabled="false"
+          aria-roledescription="sortable"
+          class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
+          data-cypress="draggable-item"
+          data-id="885c09fa-b93f-4516-91b7-fa919f42cc4a"
+          data-index="2"
+          role="button"
+          style="background-color: rgb(255, 255, 255);"
+        >
+          <div
+            class="layoutkit-flexbox emotion-9 studio-column-list-item emotion-10"
+          >
+            <button
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-11"
+              data-cypress="draggable-handle"
+              style="width: 14px; height: 24px;"
+              tabindex="-1"
+              type="button"
+            >
+              <span
+                class="studio-btn-icon"
+              >
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  width="16"
+                >
+                  <path
+                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                  />
+                </svg>
+              </span>
+            </button>
+            <div
+              class="layoutkit-flexbox emotion-12 studio-column-list-item-content emotion-13"
+            >
+              <input
+                class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
+                id="column-list-2-885c09fa-b93f-4516-91b7-fa919f42cc4a"
+                placeholder="请输入"
+                style="flex: 1; max-width: 33.333333333333336%;"
+                type="text"
+                value="订单状态"
+              />
               <div
-                aria-grabbed="false"
-                class="studio-tree-treenode studio-tree-treenode-switcher-close"
-                draggable="false"
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
               >
+                <div
+                  class="studio-select-selector"
+                >
+                  <span
+                    class="studio-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="studio-select-selection-item"
+                    title="文本"
+                  >
+                    文本
+                  </span>
+                </div>
                 <span
                   aria-hidden="true"
-                  class="studio-tree-indent"
-                />
-                <span
-                  class="studio-tree-switcher studio-tree-switcher_close"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
                 >
                   <span
-                    aria-label="caret-down"
-                    class="anticon anticon-caret-down studio-tree-switcher-icon"
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
                     role="img"
                   >
                     <svg
                       aria-hidden="true"
-                      data-icon="caret-down"
+                      data-icon="down"
                       fill="currentColor"
                       focusable="false"
                       height="1em"
-                      viewBox="0 0 1024 1024"
+                      viewBox="64 64 896 896"
                       width="1em"
                     >
                       <path
-                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                       />
                     </svg>
                   </span>
                 </span>
-                <span
-                  class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-close"
-                  title="时间"
+              </div>
+              <div
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-15 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
+              >
+                <div
+                  class="studio-select-selector"
                 >
                   <span
-                    class="studio-tree-iconEle studio-tree-icon__customize"
+                    class="studio-select-selection-search"
                   >
-                    <span
-                      aria-label="clock-circle"
-                      class="anticon anticon-clock-circle"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="clock-circle"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
-                        />
-                      </svg>
-                    </span>
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
                   </span>
                   <span
-                    class="studio-tree-title"
+                    class="studio-select-selection-item"
+                    title="orderStatus"
                   >
-                    <div
-                      class="layoutkit-flexbox emotion-2"
-                    >
-                      <div
-                        class="layoutkit-flexbox emotion-3"
-                      >
-                        <div
-                          class="layoutkit-flexbox emotion-0"
-                          style="white-space: nowrap;"
-                        >
-                          时间
-                        </div>
-                        <span
-                          class="studio-data-fill-demo-data emotion-5"
-                        />
-                      </div>
-                      <div
-                        style="white-space: nowrap;"
-                      >
-                        <div
-                          class="studio-segmented emotion-6 studio-segmented-sm"
-                          style="line-height: 1;"
-                        >
-                          <div
-                            class="studio-segmented-group"
-                          >
-                            <label
-                              class="studio-segmented-item studio-segmented-item-selected"
-                            >
-                              <input
-                                checked=""
-                                class="studio-segmented-item-input"
-                                type="radio"
-                              />
-                              <div
-                                class="studio-segmented-item-label"
-                                title="日期时间"
-                              >
-                                日期时间
-                              </div>
-                            </label>
-                            <label
-                              class="studio-segmented-item"
-                            >
-                              <input
-                                class="studio-segmented-item-input"
-                                type="radio"
-                              />
-                              <div
-                                class="studio-segmented-item-label"
-                                title="日期"
-                              >
-                                日期
-                              </div>
-                            </label>
-                            <label
-                              class="studio-segmented-item"
-                            >
-                              <input
-                                class="studio-segmented-item-input"
-                                type="radio"
-                              />
-                              <div
-                                class="studio-segmented-item-label"
-                                title="时间"
-                              >
-                                时间
-                              </div>
-                            </label>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
+                    orderStatus
                   </span>
-                </span>
-              </div>
-              <div
-                aria-grabbed="false"
-                class="studio-tree-treenode studio-tree-treenode-switcher-close studio-tree-treenode-leaf-last"
-                draggable="false"
-              >
+                </div>
                 <span
                   aria-hidden="true"
-                  class="studio-tree-indent"
-                />
-                <span
-                  class="studio-tree-switcher studio-tree-switcher_close"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
                 >
                   <span
-                    aria-label="caret-down"
-                    class="anticon anticon-caret-down studio-tree-switcher-icon"
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
                     role="img"
                   >
                     <svg
                       aria-hidden="true"
-                      data-icon="caret-down"
+                      data-icon="down"
                       fill="currentColor"
                       focusable="false"
                       height="1em"
-                      viewBox="0 0 1024 1024"
+                      viewBox="64 64 896 896"
                       width="1em"
                     >
                       <path
-                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                       />
                     </svg>
                   </span>
                 </span>
+              </div>
+            </div>
+            <div
+              class="layoutkit-flexbox emotion-9 studio-column-list-item-actions emotion-18 studio-column-list-item-actions-right emotion-19"
+            >
+              <button
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-20"
+                style="height: 22px;"
+                tabindex="-1"
+                type="button"
+              >
                 <span
-                  class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-close"
-                  title="地址"
+                  class="studio-btn-icon"
                 >
                   <span
-                    class="studio-tree-iconEle studio-tree-icon__customize"
-                  >
-                    <span
-                      aria-label="environment"
-                      class="anticon anticon-environment"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="environment"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M854.6 289.1a362.49 362.49 0 00-79.9-115.7 370.83 370.83 0 00-118.2-77.8C610.7 76.6 562.1 67 512 67c-50.1 0-98.7 9.6-144.5 28.5-44.3 18.3-84 44.5-118.2 77.8A363.6 363.6 0 00169.4 289c-19.5 45-29.4 92.8-29.4 142 0 70.6 16.9 140.9 50.1 208.7 26.7 54.5 64 107.6 111 158.1 80.3 86.2 164.5 138.9 188.4 153a43.9 43.9 0 0022.4 6.1c7.8 0 15.5-2 22.4-6.1 23.9-14.1 108.1-66.8 188.4-153 47-50.4 84.3-103.6 111-158.1C867.1 572 884 501.8 884 431.1c0-49.2-9.9-97-29.4-142zM512 880.2c-65.9-41.9-300-207.8-300-449.1 0-77.9 31.1-151.1 87.6-206.3C356.3 169.5 431.7 139 512 139s155.7 30.5 212.4 85.9C780.9 280 812 353.2 812 431.1c0 241.3-234.1 407.2-300 449.1zm0-617.2c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 551c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 439c0-29.9 11.7-58 32.8-79.2C454 338.6 482.1 327 512 327c29.9 0 58 11.6 79.2 32.8C612.4 381 624 409.1 624 439c0 29.9-11.6 58-32.8 79.2z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="studio-tree-title"
+                    aria-label="delete"
+                    class="anticon anticon-delete"
+                    role="img"
                   >
-                    <div
-                      class="layoutkit-flexbox emotion-2"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="delete"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
-                      <div
-                        class="layoutkit-flexbox emotion-3"
-                      >
-                        <div
-                          class="layoutkit-flexbox emotion-0"
-                          style="white-space: nowrap;"
-                        >
-                          地址
-                        </div>
-                        <span
-                          class="studio-data-fill-demo-data emotion-5"
-                        />
-                      </div>
-                    </div>
+                      <path
+                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                      />
+                    </svg>
                   </span>
                 </span>
-              </div>
+              </button>
             </div>
           </div>
         </div>
-      </div>
+      </li>
+    </ul>
+    <div
+      id="DndDescribedBy-3"
+      style="display: none;"
+    >
+      
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
     </div>
+    <div
+      aria-atomic="true"
+      aria-live="assertive"
+      id="DndLiveRegion-3"
+      role="status"
+      style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+    />
   </div>
 </div>
 `;
 
-exports[`<DataPreviewer /> > renders basic.tsx correctly 1`] = `
+exports[`<ColumnList /> > renders customCreate.tsx correctly 1`] = `
 .emotion-0 {
-  color: rgba(0, 0, 0, 0.65);
-}
-
-.emotion-0:hover {
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.emotion-2 {
-  padding: 6px 8px;
-  background: rgba(0, 0, 0, 0.02);
-  border-radius: 4px;
-}
-
-.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12085,54 +6619,7 @@ exports[`<DataPreviewer /> > renders basic.tsx correctly 1`] = `
   width: 100%;
 }
 
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 4px;
-}
-
-.emotion-5 {
-  height: 24px;
-  margin-left: -4px;
-  padding: 4px;
-  border-radius: 4px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  cursor: pointer;
-  -webkit-transition: 150ms background-color ease-in-out;
-  transition: 150ms background-color ease-in-out;
-}
-
-.emotion-5:hover {
-  background: rgba(0, 0, 0, 0.02);
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-8 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12149,16 +6636,16 @@ exports[`<DataPreviewer /> > renders basic.tsx correctly 1`] = `
   transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-8:hover {
+.emotion-1:hover {
   color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-8:active {
+.emotion-1:active {
   scale: 0.8;
   color: rgba(0, 0, 0, 0.88);
 }
 
-.emotion-9 {
+.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12166,1126 +6653,924 @@ exports[`<DataPreviewer /> > renders basic.tsx correctly 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   gap: 4px;
 }
 
-.emotion-13 {
-  border-radius: 4px;
+.emotion-3 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  width: 100%;
+  height: 24px;
+  font-size: 12px;
+  border-radius: 2px;
+  min-width: 48px;
+  color: rgba(0, 0, 0, 0.45);
+  padding-left: 8px;
 }
 
-.emotion-13 .json-viewer-theme-dark {
-  background: none!important;
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 
-.emotion-14 {
-  background-color: #fff;
-  color: rgba(0, 0, 0, 0.87);
-  -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+.emotion-7 {
+  list-style: none;
+  display: grid;
+  grid-auto-rows: max-content;
+  grid-gap: 2px;
+  grid-template-columns: repeat(var(--columns, 1), 1fr);
+  width: 100%;
+  margin: 0;
+  padding: 0;
   border-radius: 4px;
-  box-shadow: none;
-  background-color: rgba(0, 0, 0, 0);
-  font-family: monospace;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  content-visibility: auto;
-}
-
-.emotion-15 {
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-  user-select: text;
-}
-
-.emotion-16 {
-  display: inline-block;
-  line-height: 1.5;
-  color: #002b36;
-  letter-spacing: 0.5px;
-  opacity: 0.8;
-}
-
-.emotion-17 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 1em;
-  height: 1em;
-  display: inline-block;
-  fill: currentColor;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  font-size: 1.5rem;
-  font-size: .8rem;
-}
-
-.emotion-17:hover {
-  cursor: pointer;
-}
-
-.emotion-19 {
-  display: inline-block;
-  margin-right: 4px;
+  -webkit-transition: background-color 350ms ease;
+  transition: background-color 350ms ease;
 }
 
-.emotion-20 {
-  letter-spacing: 0.5px;
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  -webkit-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  -moz-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  -ms-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  transform-origin: 0 0;
+  touch-action: manipulation;
 }
 
-.emotion-21 {
-  padding-left: 4px;
-  font-style: italic;
-  color: rgba(0, 0, 0, 0.3);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+.emotion-8:not(:last-child) {
+  margin-bottom: 2px;
 }
 
-.emotion-22 {
-  display: block;
-  padding-left: 14.399999999999999px;
-  margin-left: 4.8px;
-  color: #002b36;
-  border-left: 1px solid rgb(235, 235, 235);
+.emotion-9 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 1px 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 12px;
+  white-space: nowrap;
+  list-style: none;
+  border-radius: 4px;
+  outline: none;
+  -webkit-transform: scale(var(--scale, 1));
+  -moz-transform: scale(var(--scale, 1));
+  -ms-transform: scale(var(--scale, 1));
+  transform: scale(var(--scale, 1));
+  transform-origin: 50% 50%;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+  -webkit-tap-highlight-color: transparent;
 }
 
-.emotion-27 {
-  display: inline-block;
-  color: #268bd2;
+.emotion-9:focus-visible {
+  box-shadow: 0 0 4px 1px #4c9ffe,0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
 }
 
-.emotion-28 {
-  display: inline-block;
-  margin-left: 4px;
-  margin-right: 4px;
-  font-size: 0.7rem;
-  opacity: 0.8;
+.emotion-9:not(.studio-sortable-list-item-withHandle) {
+  cursor: -webkit-grab;
+  cursor: grab;
+  -webkit-user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  touch-action: none;
 }
 
-.emotion-29 {
-  display: inline-block;
+.emotion-9-dragging:not(.studio-sortable-list-item-dragOverlay) {
+  z-index: 0;
+  opacity: var(--dragging-opacity, 0.5);
 }
 
-.emotion-41 {
-  display: inline-block;
-  color: #cb4b16;
+.emotion-9-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
+  box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
 }
 
-.emotion-44 {
-  overflow-wrap: anywhere;
-  cursor: pointer;
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
-.emotion-45 {
-  padding: 4px;
+.emotion-11 {
+  position: relative;
+  width: 100%;
 }
 
-.emotion-70 {
-  overflow-wrap: anywhere;
-  cursor: inherit;
+.emotion-11:hover .studio-column-list-item-actions {
+  opacity: 1;
 }
 
-.emotion-93 {
-  display: inline-block;
-  color: #2aa198;
+.emotion-12 {
+  z-index: 10;
+  color: hsla(0, 0, 0, 0.45);
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-123 {
-  display: inline-block;
-  color: #d33682;
+.emotion-12:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-125 {
-  font-size: 0.8rem;
-  background-color: rgb(235, 235, 235);
-  font-weight: 700;
-  border-radius: 3px;
-  padding: 0.5px 2px;
+.emotion-12:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
 }
 
-.emotion-152 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  width: 100%;
+  gap: 4px;
+}
+
+.emotion-14 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  font-size: 12px;
+  border-radius: 2px;
+  min-width: 48px;
+}
+
+.emotion-15 {
+  padding-left: 13px;
+}
+
+.emotion-16 .studio-select-selector {
+  padding-left: 13px;
+}
+
+.emotion-19 {
+  z-index: 10;
+  color: hsla(0, 0, 0, 0.45);
+  opacity: 0;
+}
+
+.emotion-20 {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  -webkit-align-self: flex-end;
+  -ms-flex-item-align: flex-end;
+  align-self: flex-end;
+  overflow: hidden;
+  border-radius: 1px;
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
 }
 
 <div>
   <div
-    class="studio-data-previewer emotion-0"
+    class="layoutkit-flexbox emotion-0"
+    style="margin-bottom: 16px;"
   >
-    <div
-      class="layoutkit-flexbox emotion-1 studio-collapse-title emotion-2"
+    <div>
+      列配置项
+    </div>
+    <button
+      class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-1"
+      tabindex="-1"
+      type="button"
     >
-      <div
-        class="layoutkit-flexbox emotion-3 studio-collapse-title-expand"
+      <span
+        class="studio-btn-icon"
       >
-        <div
-          class="layoutkit-flexbox emotion-4 emotion-5"
-        >
-          <span
-            aria-label="caret-right"
-            class="anticon anticon-caret-right"
-            role="img"
-            style="font-size: 10px;"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="caret-right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              style="transform: rotate(90deg);"
-              viewBox="0 0 1024 1024"
-              width="1em"
-            >
-              <path
-                d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"
-              />
-            </svg>
-          </span>
-          <div>
-            数据预览
-          </div>
-        </div>
-        <div
-          class="layoutkit-flexbox emotion-6"
+        <span
+          aria-label="plus-circle"
+          class="anticon anticon-plus-circle"
+          role="img"
         >
-          <div
-            class="layoutkit-flexbox emotion-1"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-8"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <span
-                  aria-label="table"
-                  class="anticon anticon-table"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="table"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 208H676V232h212v136zm0 224H676V432h212v160zM412 432h200v160H412V432zm200-64H412V232h200v136zm-476 64h212v160H136V432zm0-200h212v136H136V232zm0 424h212v136H136V656zm276 0h200v136H412V656zm476 136H676V656h212v136z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </button>
-          </div>
-          <div
-            class="studio-divider studio-divider-vertical studio-divider-dashed"
-            role="separator"
-            style="margin: 0px 4px;"
-          />
-          <div
-            class="layoutkit-flexbox emotion-9"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-8"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <span
-                  aria-label="rollback"
-                  class="anticon anticon-rollback"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="rollback"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M793 242H366v-74c0-6.7-7.7-10.4-12.9-6.3l-142 112a8 8 0 000 12.6l142 112c5.2 4.1 12.9.4 12.9-6.3v-74h415v470H175c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-28.7 64-64V306c0-35.3-28.7-64-64-64z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-divider studio-divider-horizontal studio-divider-dashed"
-        role="separator"
-        style="margin: 4px 0px 12px;"
-      />
-      <div
-        class="layoutkit-flexbox emotion-1"
+          <svg
+            aria-hidden="true"
+            data-icon="plus-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+              fill="#1677ff"
+            />
+            <path
+              d="M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zm192 396c0 4.4-3.6 8-8 8H544v152c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V544H328c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h152V328c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v152h152c4.4 0 8 3.6 8 8v48z"
+              fill="#e6f4ff"
+            />
+            <path
+              d="M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"
+              fill="#1677ff"
+            />
+          </svg>
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    class="layoutkit-flexbox emotion-2"
+  >
+    <div
+      class="studio-column-list-content studio-column-list-header emotion-3"
+    >
+      列标题
+    </div>
+    <div
+      class="studio-column-list-content studio-column-list-header emotion-3"
+    >
+      值类型
+    </div>
+    <div
+      class="studio-column-list-content studio-column-list-header emotion-3"
+    >
+      字段
+    </div>
+  </div>
+  <div
+    class="layoutkit-flexbox emotion-6 studio-column-list studio-sortable-list"
+  >
+    <ul
+      class="studio-sortable-list-container emotion-7"
+      style="--columns: 1;"
+    >
+      <li
+        class="studio-sortable-list-item-wrapper emotion-8"
+        data-testid="list-item"
+        style="--index: 0;"
       >
         <div
-          class="layoutkit-flexbox emotion-1 studio-data-previewer-json emotion-13"
-          style="overflow: scroll; max-height: 200px; margin-bottom: 8px;"
+          aria-describedby="DndDescribedBy-2"
+          aria-disabled="false"
+          aria-roledescription="sortable"
+          class="studio-sortable-list-item emotion-9 studio-sortable-list-item-withHandle"
+          data-cypress="draggable-item"
+          data-id="8b2688e1-d581-4bf4-8276-e712bd800f9a"
+          data-index="0"
+          role="button"
+          style="background-color: rgb(255, 255, 255);"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 json-viewer-theme-light emotion-14"
+            class="layoutkit-flexbox emotion-10 studio-column-list-item emotion-11"
           >
-            <div
-              class="data-key-pair MuiBox-root emotion-15"
-              data-testid="data-key-pair"
+            <button
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-12"
+              data-cypress="draggable-handle"
+              style="width: 14px; height: 24px;"
+              tabindex="-1"
+              type="button"
             >
               <span
-                class="data-key MuiBox-root emotion-16"
+                class="studio-btn-icon"
               >
                 <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-17"
-                  focusable="false"
-                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  width="16"
                 >
                   <path
-                    d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
                   />
                 </svg>
-                <span
-                  class="MuiBox-root emotion-18"
-                >
-                  "
-                  第1条数据
-                  "
-                </span>
-                <div
-                  class="MuiBox-root emotion-19"
-                >
-                  :
-                </div>
-                <span
-                  class="data-object-start MuiBox-root emotion-20"
-                >
-                  {
-                  <span
-                    class="MuiBox-root emotion-21"
-                  >
-                    13 Items
-                  </span>
-                </span>
               </span>
+            </button>
+            <div
+              class="layoutkit-flexbox emotion-13 studio-column-list-item-content emotion-14"
+            >
+              <input
+                class="studio-input studio-input-sm studio-column-list-content-tem emotion-15"
+                id="column-list-0-8b2688e1-d581-4bf4-8276-e712bd800f9a"
+                placeholder="请输入"
+                style="flex: 1; max-width: 33.333333333333336%;"
+                type="text"
+                value="订单id"
+              />
               <div
-                class="data-object MuiBox-root emotion-22"
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-16 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
               >
                 <div
-                  class="data-key-pair MuiBox-root emotion-15"
-                  data-testid="data-key-pairid"
-                >
-                  <span
-                    class="data-key MuiBox-root emotion-16"
-                  >
-                    <span
-                      class="MuiBox-root emotion-18"
-                    >
-                      "
-                      id
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-19"
-                    >
-                      :
-                    </div>
-                  </span>
-                  <div
-                    class="MuiBox-root emotion-27"
-                  >
-                    <div
-                      class="data-type-label MuiBox-root emotion-28"
-                    >
-                      int
-                    </div>
-                    <div
-                      class="int-value MuiBox-root emotion-29"
-                    >
-                      624748504
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-15"
-                  data-testid="data-key-pairnumber"
+                  class="studio-select-selector"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-16"
+                    class="studio-select-selection-search"
                   >
-                    <span
-                      class="MuiBox-root emotion-18"
-                    >
-                      "
-                      number
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-19"
-                    >
-                      :
-                    </div>
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
                   </span>
-                  <div
-                    class="MuiBox-root emotion-27"
-                  >
-                    <div
-                      class="data-type-label MuiBox-root emotion-28"
-                    >
-                      int
-                    </div>
-                    <div
-                      class="int-value MuiBox-root emotion-29"
-                    >
-                      6689
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-15"
-                  data-testid="data-key-pairtitle"
-                >
                   <span
-                    class="data-key MuiBox-root emotion-16"
+                    class="studio-select-selection-item"
+                    title="文本"
                   >
-                    <span
-                      class="MuiBox-root emotion-18"
-                    >
-                      "
-                      title
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-19"
-                    >
-                      :
-                    </div>
+                    文本
                   </span>
-                  <div
-                    class="MuiBox-root emotion-41"
-                  >
-                    <div
-                      class="data-type-label MuiBox-root emotion-28"
-                    >
-                      string
-                    </div>
-                    <div
-                      class="string-value MuiBox-root emotion-29"
-                    >
-                      <span
-                        class="MuiBox-root emotion-44"
-                      >
-                        "
-                        🐛 [BUG]yarn install命令
-                        <span
-                          class="MuiBox-root emotion-45"
-                        >
-                          …
-                        </span>
-                        "
-                      </span>
-                    </div>
-                  </div>
                 </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-15"
-                  data-testid="data-key-pairlabels"
+                <span
+                  aria-hidden="true"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-16"
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
+                    role="img"
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-17"
+                      data-icon="down"
+                      fill="currentColor"
                       focusable="false"
-                      viewBox="0 0 24 24"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
                       <path
-                        d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                       />
                     </svg>
-                    <span
-                      class="MuiBox-root emotion-18"
-                    >
-                      "
-                      labels
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-19"
-                    >
-                      :
-                    </div>
-                    <span
-                      class="data-object-start MuiBox-root emotion-20"
-                    >
-                      [
-                      <span
-                        class="MuiBox-root emotion-21"
-                      >
-                        1 Items
-                      </span>
-                    </span>
-                  </span>
-                  <div
-                    class="data-object MuiBox-root emotion-22"
-                  >
-                    <div
-                      class="data-key-pair MuiBox-root emotion-15"
-                      data-testid="data-key-pairlabels.0"
-                    >
-                      <span
-                        class="data-key MuiBox-root emotion-16"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-17"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                          />
-                        </svg>
-                        <span
-                          class="MuiBox-root emotion-18"
-                        >
-                          <span
-                            class="MuiBox-root emotion-18"
-                            style="color: rgb(108, 113, 196);"
-                          >
-                            0
-                          </span>
-                        </span>
-                        <div
-                          class="MuiBox-root emotion-19"
-                        >
-                          :
-                        </div>
-                        <span
-                          class="data-object-start MuiBox-root emotion-20"
-                        >
-                          {
-                          <span
-                            class="MuiBox-root emotion-21"
-                          >
-                            2 Items
-                          </span>
-                        </span>
-                      </span>
-                      <div
-                        class="data-object MuiBox-root emotion-22"
-                      >
-                        <div
-                          class="data-key-pair MuiBox-root emotion-15"
-                          data-testid="data-key-pairlabels.0.name"
-                        >
-                          <span
-                            class="data-key MuiBox-root emotion-16"
-                          >
-                            <span
-                              class="MuiBox-root emotion-18"
-                            >
-                              "
-                              name
-                              "
-                            </span>
-                            <div
-                              class="MuiBox-root emotion-19"
-                            >
-                              :
-                            </div>
-                          </span>
-                          <div
-                            class="MuiBox-root emotion-41"
-                          >
-                            <div
-                              class="data-type-label MuiBox-root emotion-28"
-                            >
-                              string
-                            </div>
-                            <div
-                              class="string-value MuiBox-root emotion-29"
-                            >
-                              <span
-                                class="MuiBox-root emotion-70"
-                              >
-                                "
-                                bug
-                                "
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-                        <div
-                          class="data-key-pair MuiBox-root emotion-15"
-                          data-testid="data-key-pairlabels.0.color"
-                        >
-                          <span
-                            class="data-key MuiBox-root emotion-16"
-                          >
-                            <span
-                              class="MuiBox-root emotion-18"
-                            >
-                              "
-                              color
-                              "
-                            </span>
-                            <div
-                              class="MuiBox-root emotion-19"
-                            >
-                              :
-                            </div>
-                          </span>
-                          <div
-                            class="MuiBox-root emotion-41"
-                          >
-                            <div
-                              class="data-type-label MuiBox-root emotion-28"
-                            >
-                              string
-                            </div>
-                            <div
-                              class="string-value MuiBox-root emotion-29"
-                            >
-                              <span
-                                class="MuiBox-root emotion-70"
-                              >
-                                "
-                                error
-                                "
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <span
-                        class="data-object-end MuiBox-root emotion-18"
-                      >
-                        }
-                      </span>
-                    </div>
-                  </div>
-                  <span
-                    class="data-object-end MuiBox-root emotion-18"
-                  >
-                    ]
                   </span>
-                </div>
+                </span>
+              </div>
+              <div
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-16 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
+              >
                 <div
-                  class="data-key-pair MuiBox-root emotion-15"
-                  data-testid="data-key-pairstate"
+                  class="studio-select-selector"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-16"
+                    class="studio-select-selection-search"
                   >
-                    <span
-                      class="MuiBox-root emotion-18"
-                    >
-                      "
-                      state
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-19"
-                    >
-                      :
-                    </div>
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
                   </span>
-                  <div
-                    class="MuiBox-root emotion-41"
+                  <span
+                    class="studio-select-selection-item"
+                    title="orderId"
                   >
-                    <div
-                      class="data-type-label MuiBox-root emotion-28"
-                    >
-                      string
-                    </div>
-                    <div
-                      class="string-value MuiBox-root emotion-29"
-                    >
-                      <span
-                        class="MuiBox-root emotion-70"
-                      >
-                        "
-                        open
-                        "
-                      </span>
-                    </div>
-                  </div>
+                    orderId
+                  </span>
                 </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-15"
-                  data-testid="data-key-pairlocked"
+                <span
+                  aria-hidden="true"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-16"
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
+                    role="img"
                   >
-                    <span
-                      class="MuiBox-root emotion-18"
-                    >
-                      "
-                      locked
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-19"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
-                      :
-                    </div>
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
                   </span>
-                  <div
-                    class="MuiBox-root emotion-93"
+                </span>
+              </div>
+            </div>
+            <div
+              class="layoutkit-flexbox emotion-10 studio-column-list-item-actions emotion-19 studio-column-list-item-actions-right emotion-20"
+            >
+              <button
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-1"
+                style="height: 22px;"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="studio-btn-icon"
+                >
+                  <span
+                    aria-label="delete"
+                    class="anticon anticon-delete"
+                    role="img"
                   >
-                    <div
-                      class="data-type-label MuiBox-root emotion-28"
-                    >
-                      bool
-                    </div>
-                    <div
-                      class="bool-value MuiBox-root emotion-29"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="delete"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
-                      false
-                    </div>
-                  </div>
-                </div>
+                      <path
+                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-list-item-wrapper emotion-8"
+        data-testid="list-item"
+        style="--index: 1;"
+      >
+        <div
+          aria-describedby="DndDescribedBy-2"
+          aria-disabled="false"
+          aria-roledescription="sortable"
+          class="studio-sortable-list-item emotion-9 studio-sortable-list-item-withHandle"
+          data-cypress="draggable-item"
+          data-id="97f42563-406b-4c1e-8ad9-81d1698c95ab"
+          data-index="1"
+          role="button"
+          style="background-color: rgb(255, 255, 255);"
+        >
+          <div
+            class="layoutkit-flexbox emotion-10 studio-column-list-item emotion-11"
+          >
+            <button
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-12"
+              data-cypress="draggable-handle"
+              style="width: 14px; height: 24px;"
+              tabindex="-1"
+              type="button"
+            >
+              <span
+                class="studio-btn-icon"
+              >
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  width="16"
+                >
+                  <path
+                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                  />
+                </svg>
+              </span>
+            </button>
+            <div
+              class="layoutkit-flexbox emotion-13 studio-column-list-item-content emotion-14"
+            >
+              <input
+                class="studio-input studio-input-sm studio-column-list-content-tem emotion-15"
+                id="column-list-1-97f42563-406b-4c1e-8ad9-81d1698c95ab"
+                placeholder="请输入"
+                style="flex: 1; max-width: 33.333333333333336%;"
+                type="text"
+                value="订单号"
+              />
+              <div
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-16 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
+              >
                 <div
-                  class="data-key-pair MuiBox-root emotion-15"
-                  data-testid="data-key-paircomments"
+                  class="studio-select-selector"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-16"
+                    class="studio-select-selection-search"
                   >
-                    <span
-                      class="MuiBox-root emotion-18"
-                    >
-                      "
-                      comments
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-19"
-                    >
-                      :
-                    </div>
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
                   </span>
-                  <div
-                    class="MuiBox-root emotion-27"
+                  <span
+                    class="studio-select-selection-item"
+                    title="文本"
                   >
-                    <div
-                      class="data-type-label MuiBox-root emotion-28"
-                    >
-                      int
-                    </div>
-                    <div
-                      class="int-value MuiBox-root emotion-29"
-                    >
-                      1
-                    </div>
-                  </div>
+                    文本
+                  </span>
                 </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-15"
-                  data-testid="data-key-paircreated_at"
+                <span
+                  aria-hidden="true"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-16"
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
+                    role="img"
                   >
-                    <span
-                      class="MuiBox-root emotion-18"
-                    >
-                      "
-                      created_at
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-19"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
-                      :
-                    </div>
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
                   </span>
-                  <div
-                    class="MuiBox-root emotion-41"
-                  >
-                    <div
-                      class="data-type-label MuiBox-root emotion-28"
-                    >
-                      string
-                    </div>
-                    <div
-                      class="string-value MuiBox-root emotion-29"
-                    >
-                      <span
-                        class="MuiBox-root emotion-70"
-                      >
-                        "
-                        2020-05-26T09:42:56Z
-                        "
-                      </span>
-                    </div>
-                  </div>
-                </div>
+                </span>
+              </div>
+              <div
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-16 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
+              >
                 <div
-                  class="data-key-pair MuiBox-root emotion-15"
-                  data-testid="data-key-pairupdated_at"
+                  class="studio-select-selector"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-16"
+                    class="studio-select-selection-search"
+                  >
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
+                  </span>
+                  <span
+                    class="studio-select-selection-item"
+                    title="orderNumber"
                   >
-                    <span
-                      class="MuiBox-root emotion-18"
-                    >
-                      "
-                      updated_at
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-19"
-                    >
-                      :
-                    </div>
+                    orderNumber
                   </span>
-                  <div
-                    class="MuiBox-root emotion-41"
-                  >
-                    <div
-                      class="data-type-label MuiBox-root emotion-28"
-                    >
-                      string
-                    </div>
-                    <div
-                      class="string-value MuiBox-root emotion-29"
-                    >
-                      <span
-                        class="MuiBox-root emotion-70"
-                      >
-                        "
-                        2020-05-26T10:03:02Z
-                        "
-                      </span>
-                    </div>
-                  </div>
                 </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-15"
-                  data-testid="data-key-pairclosed_at"
+                <span
+                  aria-hidden="true"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-16"
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
+                    role="img"
                   >
-                    <span
-                      class="MuiBox-root emotion-18"
-                    >
-                      "
-                      closed_at
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-19"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
-                      :
-                    </div>
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
                   </span>
-                  <div
-                    class="MuiBox-root emotion-123"
+                </span>
+              </div>
+            </div>
+            <div
+              class="layoutkit-flexbox emotion-10 studio-column-list-item-actions emotion-19 studio-column-list-item-actions-right emotion-20"
+            >
+              <button
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-1"
+                style="height: 22px;"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="studio-btn-icon"
+                >
+                  <span
+                    aria-label="delete"
+                    class="anticon anticon-delete"
+                    role="img"
                   >
-                    <div
-                      class="null-value MuiBox-root emotion-29"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="delete"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
-                      <div
-                        class="MuiBox-root emotion-125"
-                      >
-                        NULL
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                      <path
+                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-list-item-wrapper emotion-8"
+        data-testid="list-item"
+        style="--index: 2;"
+      >
+        <div
+          aria-describedby="DndDescribedBy-2"
+          aria-disabled="false"
+          aria-roledescription="sortable"
+          class="studio-sortable-list-item emotion-9 studio-sortable-list-item-withHandle"
+          data-cypress="draggable-item"
+          data-id="88ee860b-ff32-4d28-80a2-62b9ba765f79"
+          data-index="2"
+          role="button"
+          style="background-color: rgb(255, 255, 255);"
+        >
+          <div
+            class="layoutkit-flexbox emotion-10 studio-column-list-item emotion-11"
+          >
+            <button
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-12"
+              data-cypress="draggable-handle"
+              style="width: 14px; height: 24px;"
+              tabindex="-1"
+              type="button"
+            >
+              <span
+                class="studio-btn-icon"
+              >
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  width="16"
+                >
+                  <path
+                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                  />
+                </svg>
+              </span>
+            </button>
+            <div
+              class="layoutkit-flexbox emotion-13 studio-column-list-item-content emotion-14"
+            >
+              <input
+                class="studio-input studio-input-sm studio-column-list-content-tem emotion-15"
+                id="column-list-2-88ee860b-ff32-4d28-80a2-62b9ba765f79"
+                placeholder="请输入"
+                style="flex: 1; max-width: 33.333333333333336%;"
+                type="text"
+                value="订单金额"
+              />
+              <div
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-16 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
+              >
                 <div
-                  class="data-key-pair MuiBox-root emotion-15"
-                  data-testid="data-key-pairauthor_association"
+                  class="studio-select-selector"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-16"
+                    class="studio-select-selection-search"
                   >
-                    <span
-                      class="MuiBox-root emotion-18"
-                    >
-                      "
-                      author_association
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-19"
-                    >
-                      :
-                    </div>
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
                   </span>
-                  <div
-                    class="MuiBox-root emotion-41"
+                  <span
+                    class="studio-select-selection-item"
+                    title="文本"
                   >
-                    <div
-                      class="data-type-label MuiBox-root emotion-28"
-                    >
-                      string
-                    </div>
-                    <div
-                      class="string-value MuiBox-root emotion-29"
-                    >
-                      <span
-                        class="MuiBox-root emotion-70"
-                      >
-                        "
-                        NONE
-                        "
-                      </span>
-                    </div>
-                  </div>
+                    文本
+                  </span>
                 </div>
+                <span
+                  aria-hidden="true"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
+                >
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="studio-select studio-select-sm studio-column-list-content-tem emotion-16 studio-select-single studio-select-show-arrow"
+                style="flex: 1; max-width: 33.333333333333336%;"
+              >
                 <div
-                  class="data-key-pair MuiBox-root emotion-15"
-                  data-testid="data-key-pairuser"
+                  class="studio-select-selector"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-16"
+                    class="studio-select-selection-search"
                   >
-                    <span
-                      class="MuiBox-root emotion-18"
-                    >
-                      "
-                      user
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-19"
-                    >
-                      :
-                    </div>
+                    <input
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Search"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="studio-select-selection-search-input"
+                      id="rc_select_TEST_OR_SSR"
+                      readonly=""
+                      role="combobox"
+                      style="opacity: 0;"
+                      type="search"
+                      unselectable="on"
+                      value=""
+                    />
                   </span>
-                  <div
-                    class="MuiBox-root emotion-41"
+                  <span
+                    class="studio-select-selection-item"
+                    title="orderMoney"
                   >
-                    <div
-                      class="data-type-label MuiBox-root emotion-28"
-                    >
-                      string
-                    </div>
-                    <div
-                      class="string-value MuiBox-root emotion-29"
-                    >
-                      <span
-                        class="MuiBox-root emotion-70"
-                      >
-                        "
-                        chenshuai2144
-                        "
-                      </span>
-                    </div>
-                  </div>
+                    orderMoney
+                  </span>
                 </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-15"
-                  data-testid="data-key-pairavatar"
+                <span
+                  aria-hidden="true"
+                  class="studio-select-arrow"
+                  style="user-select: none;"
+                  unselectable="on"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-16"
+                    aria-label="down"
+                    class="anticon anticon-down studio-select-suffix"
+                    role="img"
                   >
-                    <span
-                      class="MuiBox-root emotion-18"
-                    >
-                      "
-                      avatar
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-19"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
-                      :
-                    </div>
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
                   </span>
-                  <div
-                    class="MuiBox-root emotion-41"
-                  >
-                    <div
-                      class="data-type-label MuiBox-root emotion-28"
-                    >
-                      string
-                    </div>
-                    <div
-                      class="string-value MuiBox-root emotion-29"
-                    >
-                      <span
-                        class="MuiBox-root emotion-44"
-                      >
-                        "
-                        https://gw.alipayobjec
-                        <span
-                          class="MuiBox-root emotion-45"
-                        >
-                          …
-                        </span>
-                        "
-                      </span>
-                    </div>
-                  </div>
-                </div>
+                </span>
               </div>
-              <span
-                class="data-object-end MuiBox-root emotion-18"
-              >
-                }
-              </span>
             </div>
-          </div>
-        </div>
-        <div
-          class="studio-divider studio-divider-horizontal studio-divider-dashed"
-          role="separator"
-          style="margin: 12px 0px;"
-        />
-        <div
-          class="layoutkit-flexbox emotion-152"
-        >
-          <ul
-            class="studio-pagination studio-pagination-mini"
-          >
-            <li
-              class="studio-pagination-total-text"
-            >
-              共 20 条数据
-            </li>
-            <li
-              aria-disabled="true"
-              class="studio-pagination-prev studio-pagination-disabled"
-              title="Previous Page"
+            <div
+              class="layoutkit-flexbox emotion-10 studio-column-list-item-actions emotion-19 studio-column-list-item-actions-right emotion-20"
             >
               <button
-                class="studio-pagination-item-link"
-                disabled=""
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-1"
+                style="height: 22px;"
                 tabindex="-1"
-                type="button"
-              >
-                <span
-                  aria-label="left"
-                  class="anticon anticon-left"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="left"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </li>
-            <li
-              class="studio-pagination-item studio-pagination-item-1 studio-pagination-item-active"
-              tabindex="0"
-              title="1"
-            >
-              <a
-                rel="nofollow"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="studio-pagination-item studio-pagination-item-2"
-              tabindex="0"
-              title="2"
-            >
-              <a
-                rel="nofollow"
-              >
-                2
-              </a>
-            </li>
-            <li
-              class="studio-pagination-item studio-pagination-item-3"
-              tabindex="0"
-              title="3"
-            >
-              <a
-                rel="nofollow"
-              >
-                3
-              </a>
-            </li>
-            <li
-              class="studio-pagination-item studio-pagination-item-4"
-              tabindex="0"
-              title="4"
-            >
-              <a
-                rel="nofollow"
-              >
-                4
-              </a>
-            </li>
-            <li
-              class="studio-pagination-item studio-pagination-item-5 studio-pagination-item-before-jump-next"
-              tabindex="0"
-              title="5"
-            >
-              <a
-                rel="nofollow"
-              >
-                5
-              </a>
-            </li>
-            <li
-              class="studio-pagination-jump-next studio-pagination-jump-next-custom-icon"
-              tabindex="0"
-              title="Next 5 Pages"
-            >
-              <a
-                class="studio-pagination-item-link"
+                type="button"
               >
-                <div
-                  class="studio-pagination-item-container"
+                <span
+                  class="studio-btn-icon"
                 >
                   <span
-                    aria-label="double-right"
-                    class="anticon anticon-double-right studio-pagination-item-link-icon"
+                    aria-label="delete"
+                    class="anticon anticon-delete"
                     role="img"
                   >
                     <svg
                       aria-hidden="true"
-                      data-icon="double-right"
+                      data-icon="delete"
                       fill="currentColor"
                       focusable="false"
                       height="1em"
@@ -13293,282 +7578,65 @@ exports[`<DataPreviewer /> > renders basic.tsx correctly 1`] = `
                       width="1em"
                     >
                       <path
-                        d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
+                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
                       />
                     </svg>
                   </span>
-                  <span
-                    class="studio-pagination-item-ellipsis"
-                  >
-                    •••
-                  </span>
-                </div>
-              </a>
-            </li>
-            <li
-              class="studio-pagination-item studio-pagination-item-20"
-              tabindex="0"
-              title="20"
-            >
-              <a
-                rel="nofollow"
-              >
-                20
-              </a>
-            </li>
-            <li
-              aria-disabled="false"
-              class="studio-pagination-next"
-              tabindex="0"
-              title="Next Page"
-            >
-              <button
-                class="studio-pagination-item-link"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  aria-label="right"
-                  class="anticon anticon-right"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="right"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                    />
-                  </svg>
                 </span>
               </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<DataPreviewer /> > renders empty.tsx correctly 1`] = `
-.emotion-0 {
-  color: rgba(0, 0, 0, 0.65);
-}
-
-.emotion-0:hover {
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-1 {
-  padding: 8px;
-  background: rgba(0, 0, 0, 0.02);
-  border-radius: 4px;
-}
-
-.emotion-1 .studio-empty-normal {
-  margin: 12px 0;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  gap: 12px;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
-}
-
-<div>
-  <div
-    class="studio-data-previewer emotion-0"
-  >
-    <div
-      class="studio-data-previewer-empty emotion-1"
-    >
-      <div
-        class="studio-empty studio-empty-normal"
-      >
-        <div
-          class="studio-empty-image"
-        >
-          <svg
-            height="41"
-            viewBox="0 0 64 41"
-            width="64"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              transform="translate(0 1)"
-            >
-              <ellipse
-                cx="32"
-                cy="33"
-                fill="#f5f5f5"
-                rx="32"
-                ry="7"
-              />
-              <g
-                fill-rule="nonzero"
-                stroke="#d9d9d9"
-              >
-                <path
-                  d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                />
-                <path
-                  d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                  fill="#fafafa"
-                />
-              </g>
-            </g>
-          </svg>
-        </div>
-        <div
-          class="studio-empty-description"
-        >
-          <div
-            class="layoutkit-flexbox emotion-2"
-          >
-            <div
-              class="layoutkit-flexbox emotion-3"
-            >
-              <div>
-                没有数据？来试试 Demo 吧
-              </div>
-              <div
-                class="layoutkit-flexbox emotion-4"
-              >
-                <button
-                  class="studio-btn studio-btn-primary studio-btn-sm studio-btn-background-ghost"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <span
-                      aria-label="flag"
-                      class="anticon anticon-flag"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="flag"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M880 305H624V192c0-17.7-14.3-32-32-32H184v-40c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v784c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V640h248v113c0 17.7 14.3 32 32 32h416c17.7 0 32-14.3 32-32V337c0-17.7-14.3-32-32-32zM184 568V232h368v336H184zm656 145H504v-73h112c4.4 0 8-3.6 8-8V377h216v336z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span>
-                    立即尝试
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<DataPreviewer /> > renders emptyAction.tsx correctly 1`] = `
-.emotion-0 {
-  color: rgba(0, 0, 0, 0.65);
-}
-
-.emotion-0:hover {
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-1 {
-  padding: 8px;
-  background: rgba(0, 0, 0, 0.02);
-  border-radius: 4px;
-}
-
-.emotion-1 .studio-empty-normal {
-  margin: 12px 0;
-}
+      </li>
+    </ul>
+    <div
+      id="DndDescribedBy-2"
+      style="display: none;"
+    >
+      
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+    </div>
+    <div
+      aria-atomic="true"
+      aria-live="assertive"
+      id="DndLiveRegion-2"
+      role="status"
+      style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+    />
+  </div>
+</div>
+`;
 
-.emotion-2 {
+exports[`<ColumnList /> > renders empty.tsx correctly 1`] = `
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  gap: 4px;
 }
 
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  gap: 12px;
+.emotion-1 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  width: 100%;
+  height: 24px;
+  font-size: 12px;
+  border-radius: 2px;
+  min-width: 48px;
+  color: rgba(0, 0, 0, 0.45);
+  padding-left: 8px;
 }
 
 .emotion-4 {
@@ -13576,171 +7644,102 @@ exports[`<DataPreviewer /> > renders emptyAction.tsx correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 8px;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 
 <div>
   <div
-    class="studio-data-previewer emotion-0"
+    class="layoutkit-flexbox emotion-0"
   >
     <div
-      class="studio-data-previewer-empty emotion-1"
+      class="studio-column-list-content studio-column-list-header emotion-1"
+    >
+      列标题
+    </div>
+    <div
+      class="studio-column-list-content studio-column-list-header emotion-1"
+    >
+      值类型
+    </div>
+    <div
+      class="studio-column-list-content studio-column-list-header emotion-1"
+    >
+      字段
+    </div>
+  </div>
+  <div
+    class="layoutkit-flexbox emotion-4 studio-column-list studio-sortable-list"
+  >
+    <div
+      class="studio-empty studio-empty-normal"
     >
       <div
-        class="studio-empty studio-empty-normal"
+        class="studio-empty-image"
       >
-        <div
-          class="studio-empty-image"
+        <svg
+          height="41"
+          viewBox="0 0 64 41"
+          width="64"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            height="41"
-            viewBox="0 0 64 41"
-            width="64"
-            xmlns="http://www.w3.org/2000/svg"
+          <g
+            fill="none"
+            fill-rule="evenodd"
+            transform="translate(0 1)"
           >
+            <ellipse
+              cx="32"
+              cy="33"
+              fill="#f5f5f5"
+              rx="32"
+              ry="7"
+            />
             <g
-              fill="none"
-              fill-rule="evenodd"
-              transform="translate(0 1)"
+              fill-rule="nonzero"
+              stroke="#d9d9d9"
             >
-              <ellipse
-                cx="32"
-                cy="33"
-                fill="#f5f5f5"
-                rx="32"
-                ry="7"
+              <path
+                d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+              />
+              <path
+                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                fill="#fafafa"
               />
-              <g
-                fill-rule="nonzero"
-                stroke="#d9d9d9"
-              >
-                <path
-                  d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                />
-                <path
-                  d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                  fill="#fafafa"
-                />
-              </g>
             </g>
-          </svg>
-        </div>
-        <div
-          class="studio-empty-description"
-        >
-          <div
-            class="layoutkit-flexbox emotion-2"
-          >
-            <div
-              class="layoutkit-flexbox emotion-3"
-            >
-              <div>
-                没有数据？来试试 Demo 吧
-              </div>
-              <div
-                class="layoutkit-flexbox emotion-4"
-              >
-                <button
-                  class="studio-btn studio-btn-primary studio-btn-sm studio-btn-background-ghost"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <span
-                      aria-label="flag"
-                      class="anticon anticon-flag"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="flag"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M880 305H624V192c0-17.7-14.3-32-32-32H184v-40c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v784c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V640h248v113c0 17.7 14.3 32 32 32h416c17.7 0 32-14.3 32-32V337c0-17.7-14.3-32-32-32zM184 568V232h368v336H184zm656 145H504v-73h112c4.4 0 8-3.6 8-8V377h216v336z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span>
-                    立即尝试
-                  </span>
-                </button>
-                <button
-                  class="studio-btn studio-btn-default studio-btn-sm"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <span
-                      aria-label="download"
-                      class="anticon anticon-download"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="download"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span>
-                    导入表格
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
+          </g>
+        </svg>
+      </div>
+      <div
+        class="studio-empty-description"
+      >
+        暂无数据
       </div>
     </div>
-  </div>
-</div>
-`;
-
-exports[`<DataPreviewer /> > renders extra.tsx correctly 1`] = `
-.emotion-0 {
-  color: rgba(0, 0, 0, 0.65);
-}
-
-.emotion-0:hover {
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.emotion-2 {
-  padding: 6px 8px;
-  background: rgba(0, 0, 0, 0.02);
-  border-radius: 4px;
-}
+    <div
+      id="DndDescribedBy-1"
+      style="display: none;"
+    >
+      
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+    </div>
+    <div
+      aria-atomic="true"
+      aria-live="assertive"
+      id="DndLiveRegion-1"
+      role="status"
+      style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+    />
+  </div>
+</div>
+`;
 
-.emotion-3 {
+exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13748,1385 +7747,1422 @@ exports[`<DataPreviewer /> > renders extra.tsx correctly 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  gap: 4px;
+}
+
+.emotion-1 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   width: 100%;
+  height: 24px;
+  font-size: 12px;
+  border-radius: 2px;
+  min-width: 48px;
+  color: rgba(0, 0, 0, 0.45);
+  padding-left: 8px;
 }
 
-.emotion-4 {
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 4px;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 
-.emotion-5 {
-  height: 24px;
-  margin-left: -4px;
-  padding: 4px;
+.emotion-4 {
+  list-style: none;
+  display: grid;
+  grid-auto-rows: max-content;
+  grid-gap: 2px;
+  grid-template-columns: repeat(var(--columns, 1), 1fr);
+  width: 100%;
+  margin: 0;
+  padding: 0;
   border-radius: 4px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  cursor: pointer;
-  -webkit-transition: 150ms background-color ease-in-out;
-  transition: 150ms background-color ease-in-out;
-}
-
-.emotion-5:hover {
-  background: rgba(0, 0, 0, 0.02);
+  -webkit-transition: background-color 350ms ease;
+  transition: background-color 350ms ease;
 }
 
-.emotion-6 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  box-sizing: border-box;
+  -webkit-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  -moz-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  -ms-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  transform-origin: 0 0;
+  touch-action: manipulation;
 }
 
-.emotion-8 {
+.emotion-5:not(:last-child) {
+  margin-bottom: 2px;
+}
+
+.emotion-6 {
+  position: relative;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-8:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-8:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 4px;
-}
-
-.emotion-14 {
-  border-radius: 4px;
-}
-
-.emotion-14 .json-viewer-theme-dark {
-  background: none!important;
-}
-
-.emotion-15 {
-  background-color: #fff;
-  color: rgba(0, 0, 0, 0.87);
-  -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 1px 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 12px;
+  white-space: nowrap;
+  list-style: none;
   border-radius: 4px;
-  box-shadow: none;
-  background-color: rgba(0, 0, 0, 0);
-  font-family: monospace;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  content-visibility: auto;
-}
-
-.emotion-16 {
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-  user-select: text;
-}
-
-.emotion-17 {
-  display: inline-block;
-  line-height: 1.5;
-  color: #002b36;
-  letter-spacing: 0.5px;
-  opacity: 0.8;
-}
-
-.emotion-18 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 1em;
-  height: 1em;
-  display: inline-block;
-  fill: currentColor;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  font-size: 1.5rem;
-  font-size: .8rem;
-}
-
-.emotion-18:hover {
-  cursor: pointer;
-}
-
-.emotion-20 {
-  display: inline-block;
-  margin-right: 4px;
+  outline: none;
+  -webkit-transform: scale(var(--scale, 1));
+  -moz-transform: scale(var(--scale, 1));
+  -ms-transform: scale(var(--scale, 1));
+  transform: scale(var(--scale, 1));
+  transform-origin: 50% 50%;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+  -webkit-tap-highlight-color: transparent;
 }
 
-.emotion-21 {
-  letter-spacing: 0.5px;
+.emotion-6:focus-visible {
+  box-shadow: 0 0 4px 1px #4c9ffe,0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
 }
 
-.emotion-22 {
-  padding-left: 4px;
-  font-style: italic;
-  color: rgba(0, 0, 0, 0.3);
+.emotion-6:not(.studio-sortable-list-item-withHandle) {
+  cursor: -webkit-grab;
+  cursor: grab;
   -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.emotion-23 {
-  display: block;
-  padding-left: 14.399999999999999px;
-  margin-left: 4.8px;
-  color: #002b36;
-  border-left: 1px solid rgb(235, 235, 235);
-}
-
-.emotion-28 {
-  display: inline-block;
-  color: #268bd2;
-}
-
-.emotion-29 {
-  display: inline-block;
-  margin-left: 4px;
-  margin-right: 4px;
-  font-size: 0.7rem;
-  opacity: 0.8;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  touch-action: none;
 }
 
-.emotion-30 {
-  display: inline-block;
+.emotion-6-dragging:not(.studio-sortable-list-item-dragOverlay) {
+  z-index: 0;
+  opacity: var(--dragging-opacity, 0.5);
 }
 
-.emotion-42 {
-  display: inline-block;
-  color: #cb4b16;
+.emotion-6-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
+  box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
 }
 
-.emotion-45 {
-  overflow-wrap: anywhere;
-  cursor: pointer;
+.emotion-7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
-.emotion-46 {
-  padding: 4px;
+.emotion-8 {
+  position: relative;
+  width: 100%;
 }
 
-.emotion-71 {
-  overflow-wrap: anywhere;
-  cursor: inherit;
+.emotion-8:hover .studio-column-list-item-actions {
+  opacity: 1;
 }
 
-.emotion-94 {
-  display: inline-block;
-  color: #2aa198;
+.emotion-9 {
+  z-index: 10;
+  color: hsla(0, 0, 0, 0.45);
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-124 {
-  display: inline-block;
-  color: #d33682;
+.emotion-9:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-126 {
-  font-size: 0.8rem;
-  background-color: rgb(235, 235, 235);
-  font-weight: 700;
-  border-radius: 3px;
-  padding: 0.5px 2px;
+.emotion-9:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
 }
 
-.emotion-153 {
+.emotion-10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  width: 100%;
+  gap: 4px;
 }
 
-<div>
-  <div
-    class="studio-data-previewer emotion-0"
-  >
-    <div
-      class="layoutkit-flexbox emotion-1 studio-collapse-title emotion-2"
-    >
-      <div
-        class="layoutkit-flexbox emotion-3 studio-collapse-title-expand"
-      >
-        <div
-          class="layoutkit-flexbox emotion-4 emotion-5"
-        >
-          <span
-            aria-label="caret-right"
-            class="anticon anticon-caret-right"
-            role="img"
-            style="font-size: 10px;"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="caret-right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              style="transform: rotate(90deg);"
-              viewBox="0 0 1024 1024"
-              width="1em"
-            >
-              <path
-                d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"
-              />
-            </svg>
-          </span>
-          <div>
-            数据预览
-          </div>
-        </div>
-        <div
-          class="layoutkit-flexbox emotion-6"
-        >
-          <div
-            class="layoutkit-flexbox emotion-1"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-8"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <span
-                  aria-label="table"
-                  class="anticon anticon-table"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="table"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 208H676V232h212v136zm0 224H676V432h212v160zM412 432h200v160H412V432zm200-64H412V232h200v136zm-476 64h212v160H136V432zm0-200h212v136H136V232zm0 424h212v136H136V656zm276 0h200v136H412V656zm476 136H676V656h212v136z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </button>
-          </div>
-          <div
-            class="studio-divider studio-divider-vertical studio-divider-dashed"
-            role="separator"
-            style="margin: 0px 4px;"
-          />
-          <div
-            class="layoutkit-flexbox emotion-9"
-          >
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-8"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <span
-                  aria-label="rollback"
-                  class="anticon anticon-rollback"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="rollback"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M793 242H366v-74c0-6.7-7.7-10.4-12.9-6.3l-142 112a8 8 0 000 12.6l142 112c5.2 4.1 12.9.4 12.9-6.3v-74h415v470H175c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-28.7 64-64V306c0-35.3-28.7-64-64-64z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </button>
-            <button
-              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-8"
-              type="button"
-            >
-              <span
-                class="studio-btn-icon"
-              >
-                <span
-                  aria-label="edit"
-                  class="anticon anticon-edit"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="edit"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32zm-622.3-84c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-divider studio-divider-horizontal studio-divider-dashed"
-        role="separator"
-        style="margin: 4px 0px 12px;"
-      />
-      <div
-        class="layoutkit-flexbox emotion-1"
+.emotion-11 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  font-size: 12px;
+  border-radius: 2px;
+  min-width: 48px;
+}
+
+.emotion-12 {
+  padding-left: 13px;
+}
+
+.emotion-15 {
+  z-index: 10;
+  color: hsla(0, 0, 0, 0.45);
+  opacity: 0;
+}
+
+.emotion-16 {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  -webkit-align-self: flex-end;
+  -ms-flex-item-align: flex-end;
+  align-self: flex-end;
+  overflow: hidden;
+  border-radius: 1px;
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+}
+
+.emotion-17 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-17:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-17:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-44 {
+  height: 24px;
+  padding-block: 2px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+}
+
+.emotion-44:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background: rgba(0, 0, 0, 0.06)!important;
+  border-color: transparent!important;
+}
+
+.emotion-44:focus {
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+  border-color: #1677ff!important;
+}
+
+<div>
+  <div
+    class="layoutkit-flexbox emotion-0"
+  >
+    <div
+      class="studio-column-list-content studio-column-list-header emotion-1"
+    >
+      配置项一
+    </div>
+    <div
+      class="studio-column-list-content studio-column-list-header emotion-1"
+    >
+      配置项二
+    </div>
+  </div>
+  <div
+    class="layoutkit-flexbox emotion-3 studio-column-list studio-sortable-list"
+  >
+    <ul
+      class="studio-sortable-list-container emotion-4"
+      style="--columns: 1;"
+    >
+      <li
+        class="studio-sortable-list-item-wrapper emotion-5"
+        data-testid="list-item"
+        style="--index: 0;"
       >
         <div
-          class="layoutkit-flexbox emotion-1 studio-data-previewer-json emotion-14"
-          style="overflow: scroll; max-height: 200px; margin-bottom: 8px;"
+          aria-describedby="DndDescribedBy-0"
+          aria-disabled="false"
+          aria-roledescription="sortable"
+          class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
+          data-cypress="draggable-item"
+          data-id="4d6c48c4-c0e9-4c17-b45e-ca74d627341d"
+          data-index="0"
+          role="button"
+          style="background-color: rgb(255, 255, 255);"
         >
           <div
-            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 json-viewer-theme-light emotion-15"
+            class="layoutkit-flexbox emotion-7 studio-column-list-item emotion-8"
           >
-            <div
-              class="data-key-pair MuiBox-root emotion-16"
-              data-testid="data-key-pair"
+            <button
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-9"
+              data-cypress="draggable-handle"
+              style="width: 14px; height: 24px;"
+              tabindex="-1"
+              type="button"
             >
               <span
-                class="data-key MuiBox-root emotion-17"
+                class="studio-btn-icon"
               >
                 <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-18"
-                  focusable="false"
-                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  width="16"
                 >
                   <path
-                    d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
                   />
                 </svg>
-                <span
-                  class="MuiBox-root emotion-19"
-                >
-                  "
-                  第1条数据
-                  "
-                </span>
-                <div
-                  class="MuiBox-root emotion-20"
-                >
-                  :
-                </div>
-                <span
-                  class="data-object-start MuiBox-root emotion-21"
-                >
-                  {
-                  <span
-                    class="MuiBox-root emotion-22"
-                  >
-                    13 Items
-                  </span>
-                </span>
               </span>
-              <div
-                class="data-object MuiBox-root emotion-23"
-              >
-                <div
-                  class="data-key-pair MuiBox-root emotion-16"
-                  data-testid="data-key-pairid"
-                >
-                  <span
-                    class="data-key MuiBox-root emotion-17"
-                  >
-                    <span
-                      class="MuiBox-root emotion-19"
-                    >
-                      "
-                      id
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-20"
-                    >
-                      :
-                    </div>
-                  </span>
-                  <div
-                    class="MuiBox-root emotion-28"
-                  >
-                    <div
-                      class="data-type-label MuiBox-root emotion-29"
-                    >
-                      int
-                    </div>
-                    <div
-                      class="int-value MuiBox-root emotion-30"
-                    >
-                      624748504
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-16"
-                  data-testid="data-key-pairnumber"
-                >
-                  <span
-                    class="data-key MuiBox-root emotion-17"
-                  >
-                    <span
-                      class="MuiBox-root emotion-19"
-                    >
-                      "
-                      number
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-20"
-                    >
-                      :
-                    </div>
-                  </span>
-                  <div
-                    class="MuiBox-root emotion-28"
-                  >
-                    <div
-                      class="data-type-label MuiBox-root emotion-29"
-                    >
-                      int
-                    </div>
-                    <div
-                      class="int-value MuiBox-root emotion-30"
-                    >
-                      6689
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-16"
-                  data-testid="data-key-pairtitle"
-                >
-                  <span
-                    class="data-key MuiBox-root emotion-17"
-                  >
-                    <span
-                      class="MuiBox-root emotion-19"
-                    >
-                      "
-                      title
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-20"
-                    >
-                      :
-                    </div>
-                  </span>
-                  <div
-                    class="MuiBox-root emotion-42"
-                  >
-                    <div
-                      class="data-type-label MuiBox-root emotion-29"
-                    >
-                      string
-                    </div>
-                    <div
-                      class="string-value MuiBox-root emotion-30"
-                    >
-                      <span
-                        class="MuiBox-root emotion-45"
-                      >
-                        "
-                        🐛 [BUG]yarn install命令
-                        <span
-                          class="MuiBox-root emotion-46"
-                        >
-                          …
-                        </span>
-                        "
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-16"
-                  data-testid="data-key-pairlabels"
+            </button>
+            <div
+              class="layoutkit-flexbox emotion-10 studio-column-list-item-content emotion-11"
+            >
+              <input
+                class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
+                id="column-list-0-4d6c48c4-c0e9-4c17-b45e-ca74d627341d"
+                placeholder="请输入"
+                style="flex: 1; max-width: 50%;"
+                type="text"
+                value="序号"
+              />
+              <input
+                class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
+                id="column-list-0-4d6c48c4-c0e9-4c17-b45e-ca74d627341d"
+                placeholder="请输入"
+                style="flex: 1; max-width: 50%;"
+                type="text"
+                value="index"
+              />
+            </div>
+            <div
+              class="layoutkit-flexbox emotion-7 studio-column-list-item-actions emotion-15 studio-column-list-item-actions-right emotion-16"
+            >
+              <button
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-17"
+                style="height: 22px;"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="studio-btn-icon"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-17"
+                    aria-label="delete"
+                    class="anticon anticon-delete"
+                    role="img"
                   >
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-18"
+                      data-icon="delete"
+                      fill="currentColor"
                       focusable="false"
-                      viewBox="0 0 24 24"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
                       <path
-                        d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
                       />
                     </svg>
-                    <span
-                      class="MuiBox-root emotion-19"
-                    >
-                      "
-                      labels
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-20"
-                    >
-                      :
-                    </div>
-                    <span
-                      class="data-object-start MuiBox-root emotion-21"
-                    >
-                      [
-                      <span
-                        class="MuiBox-root emotion-22"
-                      >
-                        1 Items
-                      </span>
-                    </span>
-                  </span>
-                  <div
-                    class="data-object MuiBox-root emotion-23"
-                  >
-                    <div
-                      class="data-key-pair MuiBox-root emotion-16"
-                      data-testid="data-key-pairlabels.0"
-                    >
-                      <span
-                        class="data-key MuiBox-root emotion-17"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-18"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                          />
-                        </svg>
-                        <span
-                          class="MuiBox-root emotion-19"
-                        >
-                          <span
-                            class="MuiBox-root emotion-19"
-                            style="color: rgb(108, 113, 196);"
-                          >
-                            0
-                          </span>
-                        </span>
-                        <div
-                          class="MuiBox-root emotion-20"
-                        >
-                          :
-                        </div>
-                        <span
-                          class="data-object-start MuiBox-root emotion-21"
-                        >
-                          {
-                          <span
-                            class="MuiBox-root emotion-22"
-                          >
-                            2 Items
-                          </span>
-                        </span>
-                      </span>
-                      <div
-                        class="data-object MuiBox-root emotion-23"
-                      >
-                        <div
-                          class="data-key-pair MuiBox-root emotion-16"
-                          data-testid="data-key-pairlabels.0.name"
-                        >
-                          <span
-                            class="data-key MuiBox-root emotion-17"
-                          >
-                            <span
-                              class="MuiBox-root emotion-19"
-                            >
-                              "
-                              name
-                              "
-                            </span>
-                            <div
-                              class="MuiBox-root emotion-20"
-                            >
-                              :
-                            </div>
-                          </span>
-                          <div
-                            class="MuiBox-root emotion-42"
-                          >
-                            <div
-                              class="data-type-label MuiBox-root emotion-29"
-                            >
-                              string
-                            </div>
-                            <div
-                              class="string-value MuiBox-root emotion-30"
-                            >
-                              <span
-                                class="MuiBox-root emotion-71"
-                              >
-                                "
-                                bug
-                                "
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-                        <div
-                          class="data-key-pair MuiBox-root emotion-16"
-                          data-testid="data-key-pairlabels.0.color"
-                        >
-                          <span
-                            class="data-key MuiBox-root emotion-17"
-                          >
-                            <span
-                              class="MuiBox-root emotion-19"
-                            >
-                              "
-                              color
-                              "
-                            </span>
-                            <div
-                              class="MuiBox-root emotion-20"
-                            >
-                              :
-                            </div>
-                          </span>
-                          <div
-                            class="MuiBox-root emotion-42"
-                          >
-                            <div
-                              class="data-type-label MuiBox-root emotion-29"
-                            >
-                              string
-                            </div>
-                            <div
-                              class="string-value MuiBox-root emotion-30"
-                            >
-                              <span
-                                class="MuiBox-root emotion-71"
-                              >
-                                "
-                                error
-                                "
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <span
-                        class="data-object-end MuiBox-root emotion-19"
-                      >
-                        }
-                      </span>
-                    </div>
-                  </div>
-                  <span
-                    class="data-object-end MuiBox-root emotion-19"
-                  >
-                    ]
                   </span>
-                </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-16"
-                  data-testid="data-key-pairstate"
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-list-item-wrapper emotion-5"
+        data-testid="list-item"
+        style="--index: 1;"
+      >
+        <div
+          aria-describedby="DndDescribedBy-0"
+          aria-disabled="false"
+          aria-roledescription="sortable"
+          class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
+          data-cypress="draggable-item"
+          data-id="9b94d116-daec-4cda-884c-4fe4304094f4"
+          data-index="1"
+          role="button"
+          style="background-color: rgb(255, 255, 255);"
+        >
+          <div
+            class="layoutkit-flexbox emotion-7 studio-column-list-item emotion-8"
+          >
+            <button
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-9"
+              data-cypress="draggable-handle"
+              style="width: 14px; height: 24px;"
+              tabindex="-1"
+              type="button"
+            >
+              <span
+                class="studio-btn-icon"
+              >
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  width="16"
+                >
+                  <path
+                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                  />
+                </svg>
+              </span>
+            </button>
+            <div
+              class="layoutkit-flexbox emotion-10 studio-column-list-item-content emotion-11"
+            >
+              <input
+                class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
+                id="column-list-1-9b94d116-daec-4cda-884c-4fe4304094f4"
+                placeholder="请输入"
+                style="flex: 1; max-width: 50%;"
+                type="text"
+                value="授权企业名称"
+              />
+              <input
+                class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
+                id="column-list-1-9b94d116-daec-4cda-884c-4fe4304094f4"
+                placeholder="请输入"
+                style="flex: 1; max-width: 50%;"
+                type="text"
+                value="name"
+              />
+            </div>
+            <div
+              class="layoutkit-flexbox emotion-7 studio-column-list-item-actions emotion-15 studio-column-list-item-actions-right emotion-16"
+            >
+              <button
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-17"
+                style="height: 22px;"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="studio-btn-icon"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-17"
+                    aria-label="delete"
+                    class="anticon anticon-delete"
+                    role="img"
                   >
-                    <span
-                      class="MuiBox-root emotion-19"
-                    >
-                      "
-                      state
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-20"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="delete"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
-                      :
-                    </div>
+                      <path
+                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                      />
+                    </svg>
                   </span>
-                  <div
-                    class="MuiBox-root emotion-42"
-                  >
-                    <div
-                      class="data-type-label MuiBox-root emotion-29"
-                    >
-                      string
-                    </div>
-                    <div
-                      class="string-value MuiBox-root emotion-30"
-                    >
-                      <span
-                        class="MuiBox-root emotion-71"
-                      >
-                        "
-                        open
-                        "
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-16"
-                  data-testid="data-key-pairlocked"
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-list-item-wrapper emotion-5"
+        data-testid="list-item"
+        style="--index: 2;"
+      >
+        <div
+          aria-describedby="DndDescribedBy-0"
+          aria-disabled="false"
+          aria-roledescription="sortable"
+          class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
+          data-cypress="draggable-item"
+          data-id="6ed81628-b229-4b92-9381-efd37943c8a9"
+          data-index="2"
+          role="button"
+          style="background-color: rgb(255, 255, 255);"
+        >
+          <div
+            class="layoutkit-flexbox emotion-7 studio-column-list-item emotion-8"
+          >
+            <button
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-column-list-item-actions studio-column-list-item-handle studio-actionicon emotion-9"
+              data-cypress="draggable-handle"
+              style="width: 14px; height: 24px;"
+              tabindex="-1"
+              type="button"
+            >
+              <span
+                class="studio-btn-icon"
+              >
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  width="16"
+                >
+                  <path
+                    d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                  />
+                </svg>
+              </span>
+            </button>
+            <div
+              class="layoutkit-flexbox emotion-10 studio-column-list-item-content emotion-11"
+            >
+              <input
+                class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
+                id="column-list-2-6ed81628-b229-4b92-9381-efd37943c8a9"
+                placeholder="请输入"
+                style="flex: 1; max-width: 50%;"
+                type="text"
+                value="被授权企业"
+              />
+              <input
+                class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
+                id="column-list-2-6ed81628-b229-4b92-9381-efd37943c8a9"
+                placeholder="请输入"
+                style="flex: 1; max-width: 50%;"
+                type="text"
+                value="authCompany"
+              />
+            </div>
+            <div
+              class="layoutkit-flexbox emotion-7 studio-column-list-item-actions emotion-15 studio-column-list-item-actions-right emotion-16"
+            >
+              <button
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-17"
+                style="height: 22px;"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="studio-btn-icon"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-17"
+                    aria-label="delete"
+                    class="anticon anticon-delete"
+                    role="img"
                   >
-                    <span
-                      class="MuiBox-root emotion-19"
-                    >
-                      "
-                      locked
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-20"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="delete"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
-                      :
-                    </div>
+                      <path
+                        d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                      />
+                    </svg>
                   </span>
-                  <div
-                    class="MuiBox-root emotion-94"
-                  >
-                    <div
-                      class="data-type-label MuiBox-root emotion-29"
-                    >
-                      bool
-                    </div>
-                    <div
-                      class="bool-value MuiBox-root emotion-30"
-                    >
-                      false
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-16"
-                  data-testid="data-key-paircomments"
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <button
+      class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-sortable-list-btn-add emotion-44"
+      type="button"
+    >
+      <span
+        class="studio-btn-icon"
+      >
+        <span
+          aria-label="plus"
+          class="anticon anticon-plus"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="plus"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+            />
+            <path
+              d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
+            />
+          </svg>
+        </span>
+      </span>
+      <span>
+        添加一列
+      </span>
+    </button>
+    <div
+      id="DndDescribedBy-0"
+      style="display: none;"
+    >
+      
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+    </div>
+    <div
+      aria-atomic="true"
+      aria-live="assertive"
+      id="DndLiveRegion-0"
+      role="status"
+      style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+    />
+  </div>
+</div>
+`;
+
+exports[`<ContextMenu /> > renders index.tsx correctly 1`] = `
+<div>
+  <div>
+    RightClick
+  </div>
+</div>
+`;
+
+exports[`<DataFill /> > renders basic.tsx correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-1 .studio-tree-directory .studio-tree-switcher,
+.emotion-1 .studio-tree-directory .studio-tree-iconEle {
+  line-height: 32px!important;
+}
+
+.emotion-1 .studio-tree-directory .studio-tree-node-content-wrapper {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding-left: 0;
+  line-height: 32px!important;
+}
+
+.emotion-1 .studio-tree-directory .studio-tree-title {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-1 .studio-tree-directory .studio-tree-treenode {
+  cursor: pointer;
+}
+
+.emotion-1 .studio-tree-directory .studio-tree-treenode::before {
+  border: 1px solid rgba(5, 5, 5, 0.06);
+  border-radius: 4px;
+}
+
+.emotion-1 .studio-tree-directory .studio-tree-treenode:hover .studio-tree-switcher {
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-1 .studio-tree-directory .studio-tree-treenode:hover .studio-tree-node-content-wrapper {
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-1 .studio-tree-directory .studio-tree-treenode:hover::before {
+  background: rgba(0, 0, 0, 0.02);
+  border-color: #1677ff;
+  box-shadow: 0 0 3px 0 #1677ff;
+}
+
+.emotion-1 .studio-tree-directory .studio-tree-treenode .studio-tree-switcher-noop {
+  cursor: pointer;
+}
+
+.emotion-1 .studio-tree-directory .studio-tree-treenode .studio-tree-switcher {
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-1 .studio-tree-directory .studio-tree-treenode .studio-tree-node-content-wrapper {
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-1 .studio-tree-directory .studio-tree-treenode-selected::before {
+  background: #ffffff;
+  border: 2 solid #1677ff;
+}
+
+.emotion-1 .studio-tree-directory .studio-tree-treenode-selected .studio-tree-switcher {
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-1 .studio-tree-directory .studio-tree-treenode-selected .studio-tree-node-content-wrapper {
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-1 .studio-tree-directory .studio-tree-indent-unit {
+  width: 12px;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.emotion-3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.emotion-5 {
+  max-width: 120px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: rgba(0, 0, 0, 0.25);
+  font-size: 10px;
+}
+
+.emotion-6 {
+  padding: 4px;
+}
+
+.emotion-6 .studio-segmented-item {
+  margin-right: 4px;
+  color: rgba(0, 0, 0, 0.45);
+  border-radius: 2px;
+}
+
+.emotion-6 .studio-segmented-item:hover {
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.emotion-6 .studio-segmented-item:last-child {
+  margin-right: 0;
+}
+
+.emotion-6 .studio-segmented-item-selected {
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-6 .studio-segmented-item-selected:hover {
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-6 .studio-segmented-item-label {
+  min-height: auto;
+  padding: 2px 7px;
+  line-height: unset;
+}
+
+<div>
+  <div
+    class="layoutkit-flexbox emotion-0 studio-data-fill emotion-1"
+  >
+    <div
+      class="studio-tree studio-tree-block-node studio-tree-unselectable studio-tree-directory"
+      role="tree"
+    >
+      <div>
+        <input
+          aria-label="for screen reader"
+          style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+          tabindex="0"
+          value=""
+        />
+      </div>
+      <div
+        aria-hidden="true"
+        class="studio-tree-treenode"
+        style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
+      >
+        <div
+          class="studio-tree-indent"
+        >
+          <div
+            class="studio-tree-indent-unit"
+          />
+        </div>
+      </div>
+      <div
+        class="studio-tree-list"
+        style="position: relative;"
+      >
+        <div
+          class="studio-tree-list-holder"
+        >
+          <div>
+            <div
+              class="studio-tree-list-holder-inner"
+              style="display: flex; flex-direction: column;"
+            >
+              <div
+                aria-grabbed="false"
+                class="studio-tree-treenode studio-tree-treenode-switcher-close"
+                draggable="false"
+              >
+                <span
+                  aria-hidden="true"
+                  class="studio-tree-indent"
+                />
+                <span
+                  class="studio-tree-switcher studio-tree-switcher_close"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-17"
-                  >
-                    <span
-                      class="MuiBox-root emotion-19"
-                    >
-                      "
-                      comments
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-20"
-                    >
-                      :
-                    </div>
-                  </span>
-                  <div
-                    class="MuiBox-root emotion-28"
+                    aria-label="caret-down"
+                    class="anticon anticon-caret-down studio-tree-switcher-icon"
+                    role="img"
                   >
-                    <div
-                      class="data-type-label MuiBox-root emotion-29"
-                    >
-                      int
-                    </div>
-                    <div
-                      class="int-value MuiBox-root emotion-30"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="caret-down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="0 0 1024 1024"
+                      width="1em"
                     >
-                      1
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-16"
-                  data-testid="data-key-paircreated_at"
+                      <path
+                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <span
+                  class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-close"
+                  title="文本"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-17"
+                    class="studio-tree-iconEle studio-tree-icon__customize"
                   >
-                    <span
-                      class="MuiBox-root emotion-19"
-                    >
-                      "
-                      created_at
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-20"
+                    <svg
+                      class="pro-editor-icon"
+                      fill="currentColor"
+                      height="1em"
+                      style="vertical-align: -0.125em;"
+                      viewBox="0 0 1024 1024"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      :
-                    </div>
+                      <path
+                        d="M853.3 1024H170.7A171.2 171.2 0 0 1 0 853.3V170.7C0 76.8 76.8 0 170.7 0h682.6C947.2 0 1024 76.8 1024 170.7v682.6c0 93.9-76.8 170.7-170.7 170.7zM170.7 85.3c-47 0-85.4 38.4-85.4 85.4v682.6c0 47 38.4 85.4 85.4 85.4h682.6c47 0 85.4-38.4 85.4-85.4V170.7c0-47-38.4-85.4-85.4-85.4H170.7z"
+                      />
+                      <path
+                        d="M725.3 341.3H298.7c-25.6 0-42.7-17-42.7-42.6s17-42.7 42.7-42.7h426.6c25.6 0 42.7 17 42.7 42.7s-17 42.6-42.7 42.6z"
+                      />
+                      <path
+                        d="M298.7 384c-25.6 0-42.7-17-42.7-42.7v-42.6c0-25.6 17-42.7 42.7-42.7s42.6 17 42.6 42.7v42.6c0 25.6-17 42.7-42.6 42.7zM725.3 384c-25.6 0-42.6-17-42.6-42.7v-42.6c0-25.6 17-42.7 42.6-42.7s42.7 17 42.7 42.7v42.6c0 25.6-17 42.7-42.7 42.7zM512 768c-25.6 0-42.7-17-42.7-42.7V298.7c0-25.6 17.1-42.7 42.7-42.7s42.7 17 42.7 42.7v426.6c0 25.6-17.1 42.7-42.7 42.7z"
+                      />
+                      <path
+                        d="M554.7 768h-85.4c-25.6 0-42.6-17-42.6-42.7s17-42.6 42.6-42.6h85.4c25.6 0 42.6 17 42.6 42.6s-17 42.7-42.6 42.7z"
+                      />
+                    </svg>
                   </span>
-                  <div
-                    class="MuiBox-root emotion-42"
+                  <span
+                    class="studio-tree-title"
                   >
                     <div
-                      class="data-type-label MuiBox-root emotion-29"
-                    >
-                      string
-                    </div>
-                    <div
-                      class="string-value MuiBox-root emotion-30"
+                      class="layoutkit-flexbox emotion-2"
                     >
-                      <span
-                        class="MuiBox-root emotion-71"
+                      <div
+                        class="layoutkit-flexbox emotion-3"
                       >
-                        "
-                        2020-05-26T09:42:56Z
-                        "
-                      </span>
+                        <div
+                          class="layoutkit-flexbox emotion-0"
+                          style="white-space: nowrap;"
+                        >
+                          文本
+                        </div>
+                        <span
+                          class="studio-data-fill-demo-data emotion-5"
+                        />
+                      </div>
+                      <div
+                        style="white-space: nowrap;"
+                      >
+                        <div
+                          class="studio-segmented emotion-6 studio-segmented-sm"
+                          style="line-height: 1;"
+                        >
+                          <div
+                            class="studio-segmented-group"
+                          >
+                            <label
+                              class="studio-segmented-item studio-segmented-item-selected"
+                            >
+                              <input
+                                checked=""
+                                class="studio-segmented-item-input"
+                                type="radio"
+                              />
+                              <div
+                                class="studio-segmented-item-label"
+                                title="短文本"
+                              >
+                                短文本
+                              </div>
+                            </label>
+                            <label
+                              class="studio-segmented-item"
+                            >
+                              <input
+                                class="studio-segmented-item-input"
+                                type="radio"
+                              />
+                              <div
+                                class="studio-segmented-item-label"
+                                title="长文本"
+                              >
+                                长文本
+                              </div>
+                            </label>
+                          </div>
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-16"
-                  data-testid="data-key-pairupdated_at"
+                  </span>
+                </span>
+              </div>
+              <div
+                aria-grabbed="false"
+                class="studio-tree-treenode studio-tree-treenode-switcher-close"
+                draggable="false"
+              >
+                <span
+                  aria-hidden="true"
+                  class="studio-tree-indent"
+                />
+                <span
+                  class="studio-tree-switcher studio-tree-switcher_close"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-17"
+                    aria-label="caret-down"
+                    class="anticon anticon-caret-down studio-tree-switcher-icon"
+                    role="img"
                   >
-                    <span
-                      class="MuiBox-root emotion-19"
-                    >
-                      "
-                      updated_at
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-20"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="caret-down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="0 0 1024 1024"
+                      width="1em"
                     >
-                      :
-                    </div>
+                      <path
+                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                      />
+                    </svg>
                   </span>
-                  <div
-                    class="MuiBox-root emotion-42"
-                  >
-                    <div
-                      class="data-type-label MuiBox-root emotion-29"
-                    >
-                      string
-                    </div>
-                    <div
-                      class="string-value MuiBox-root emotion-30"
-                    >
-                      <span
-                        class="MuiBox-root emotion-71"
-                      >
-                        "
-                        2020-05-26T10:03:02Z
-                        "
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-16"
-                  data-testid="data-key-pairclosed_at"
+                </span>
+                <span
+                  class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-close"
+                  title="编号"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-17"
+                    class="studio-tree-iconEle studio-tree-icon__customize"
                   >
                     <span
-                      class="MuiBox-root emotion-19"
+                      aria-label="folder"
+                      class="anticon anticon-folder"
+                      role="img"
                     >
-                      "
-                      closed_at
-                      "
+                      <svg
+                        aria-hidden="true"
+                        data-icon="folder"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M880 298.4H521L403.7 186.2a8.15 8.15 0 00-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"
+                        />
+                      </svg>
                     </span>
-                    <div
-                      class="MuiBox-root emotion-20"
-                    >
-                      :
-                    </div>
                   </span>
-                  <div
-                    class="MuiBox-root emotion-124"
+                  <span
+                    class="studio-tree-title"
                   >
                     <div
-                      class="null-value MuiBox-root emotion-30"
+                      class="layoutkit-flexbox emotion-2"
                     >
                       <div
-                        class="MuiBox-root emotion-126"
+                        class="layoutkit-flexbox emotion-3"
                       >
-                        NULL
+                        <div
+                          class="layoutkit-flexbox emotion-0"
+                          style="white-space: nowrap;"
+                        >
+                          编号
+                        </div>
+                        <span
+                          class="studio-data-fill-demo-data emotion-5"
+                        />
                       </div>
                     </div>
-                  </div>
-                </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-16"
-                  data-testid="data-key-pairauthor_association"
+                  </span>
+                </span>
+              </div>
+              <div
+                aria-grabbed="false"
+                class="studio-tree-treenode studio-tree-treenode-switcher-close"
+                draggable="false"
+              >
+                <span
+                  aria-hidden="true"
+                  class="studio-tree-indent"
+                />
+                <span
+                  class="studio-tree-switcher studio-tree-switcher_close"
+                >
+                  <span
+                    aria-label="caret-down"
+                    class="anticon anticon-caret-down studio-tree-switcher-icon"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="caret-down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="0 0 1024 1024"
+                      width="1em"
+                    >
+                      <path
+                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <span
+                  class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-close"
+                  title="数据"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-17"
+                    class="studio-tree-iconEle studio-tree-icon__customize"
                   >
-                    <span
-                      class="MuiBox-root emotion-19"
-                    >
-                      "
-                      author_association
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-20"
+                    <svg
+                      class="pro-editor-icon"
+                      height="1em"
+                      style="vertical-align: -0.125em;"
+                      viewBox="0 0 1195 897"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink"
                     >
-                      :
-                    </div>
+                      <g
+                        fill="none"
+                        fill-rule="evenodd"
+                        id="FillNumber-页面-1"
+                        stroke="none"
+                        stroke-width="1"
+                      >
+                        <g
+                          fill="currentColor"
+                          fill-rule="nonzero"
+                          id="FillNumber-icon-number"
+                          transform="translate(0.207180, 0.557698)"
+                        >
+                          <path
+                            d="M74.666667,74.666667 L74.666667,821.333333 L1120,821.333333 L1120,74.666667 L74.666667,74.666667 Z M74.666667,-1.42108547e-14 L1120,-1.42108547e-14 C1161.216,-1.42108547e-14 1194.66667,33.450667 1194.66667,74.666667 L1194.66667,821.333333 C1194.66667,862.570595 1161.23726,896 1120,896 L74.666667,896 C33.4294055,896 0,862.570595 0,821.333333 L0,74.666667 C0,33.450667 33.450667,-1.42108547e-14 74.666667,-1.42108547e-14 Z M263.68,263.68 L314.965333,263.68 L314.965333,680.106667 L246.698667,680.106667 L246.698667,346.026667 C219.34797,370.032502 186.811608,387.381334 151.637333,396.714667 L151.637333,329.045333 C172.473579,323.511105 192.49732,315.277848 211.2,304.554667 C232.192,291.754667 249.6,278.357334 263.68,263.765333 L263.68,263.68 Z M548.949333,255.488 C589.141333,255.488 622.336,267.178667 648.704,290.474667 C674.304,313.856 687.104,343.552 687.104,380.928 C687.104,417.109333 673.194667,449.792 646.314667,479.488 C630.016,496.981333 600.832,519.168 560.042667,546.56 C517.376,574.549333 491.776,599.125333 482.389333,620.117333 L687.786667,620.117333 L687.786667,680.192 L397.226667,680.192 C397.226667,637.525333 410.624,600.832 438.698667,569.258667 C453.802667,551.850667 485.888,526.165334 534.272,492.885333 C561.152,474.282666 579.84,458.496 591.445333,446.208 C609.621333,425.813333 618.922666,403.626667 618.922667,380.330667 C618.922667,357.546667 612.522667,340.650667 600.832,329.557333 C588.544,318.464 570.538667,313.258666 546.56,313.258667 C520.96,313.258667 501.674667,321.962667 488.874667,339.541333 C476.074667,355.754666 468.992,380.928 467.797333,413.610667 L399.530667,413.610667 C400.128,366.933334 413.610667,329.557334 440.490667,300.970667 C467.797334,270.677334 503.978667,255.488 548.864,255.488 L548.949333,255.488 Z M896.597333,255.488 C938.581333,255.488 972.970666,265.386667 998.656,285.866667 C1023.744,306.261334 1036.544,334.250667 1036.544,370.346667 C1036.544,415.914667 1013.248,446.293334 967.168,461.397333 C991.658667,469.077333 1010.944,480.085333 1023.744,495.274667 C1037.73867,510.976 1044.736,531.456 1044.736,555.861333 C1044.736,594.432 1031.33867,625.92 1004.45867,650.410667 C976.469334,675.498667 939.776,688.298667 894.208,688.298667 C851.114667,688.298667 816.042667,677.205334 789.845333,655.018667 C760.661333,630.613334 744.362666,594.432 740.864,547.754667 L810.24,547.754667 C811.434667,574.549334 819.626667,595.541334 835.84,610.133333 C850.517333,623.616 869.717333,630.613333 893.696,630.613333 C919.893333,630.613333 940.885333,622.933333 956.074667,608.426667 C969.474285,595.450839 976.890408,577.497642 976.554667,558.848 C976.554667,534.954667 968.874667,517.376 954.88,506.368 C940.885333,494.677333 920.490667,489.386667 893.696,489.386667 L864.512,489.386667 L864.512,438.101333 L893.696,438.101333 C918.186667,438.101333 936.874667,432.810666 949.674667,422.314667 C961.877334,411.818667 968.362667,396.117334 968.362667,375.637333 C968.362667,355.242666 962.474667,340.053333 951.381333,329.557333 C939.178666,319.061333 921.088,313.856 897.194667,313.856 C872.704,313.856 854.016,319.658667 840.618667,331.946667 C826.624,344.149334 818.432,362.837334 816.042667,387.925333 L748.970667,387.925333 C752.469334,345.941333 767.744,313.258666 795.648,289.877333 C821.930667,266.581333 855.722667,255.488 896.597333,255.488 L896.597333,255.488 Z"
+                            id="FillNumber-形状"
+                          />
+                        </g>
+                      </g>
+                    </svg>
                   </span>
-                  <div
-                    class="MuiBox-root emotion-42"
+                  <span
+                    class="studio-tree-title"
                   >
                     <div
-                      class="data-type-label MuiBox-root emotion-29"
-                    >
-                      string
-                    </div>
-                    <div
-                      class="string-value MuiBox-root emotion-30"
+                      class="layoutkit-flexbox emotion-2"
                     >
-                      <span
-                        class="MuiBox-root emotion-71"
+                      <div
+                        class="layoutkit-flexbox emotion-3"
                       >
-                        "
-                        NONE
-                        "
-                      </span>
+                        <div
+                          class="layoutkit-flexbox emotion-0"
+                          style="white-space: nowrap;"
+                        >
+                          数据
+                        </div>
+                        <span
+                          class="studio-data-fill-demo-data emotion-5"
+                        />
+                      </div>
+                      <div
+                        style="white-space: nowrap;"
+                      >
+                        <div
+                          class="studio-segmented emotion-6 studio-segmented-sm"
+                          style="line-height: 1;"
+                        >
+                          <div
+                            class="studio-segmented-group"
+                          >
+                            <label
+                              class="studio-segmented-item"
+                            >
+                              <input
+                                class="studio-segmented-item-input"
+                                type="radio"
+                              />
+                              <div
+                                class="studio-segmented-item-label"
+                                title="0~9"
+                              >
+                                0~9
+                              </div>
+                            </label>
+                            <label
+                              class="studio-segmented-item"
+                            >
+                              <input
+                                class="studio-segmented-item-input"
+                                type="radio"
+                              />
+                              <div
+                                class="studio-segmented-item-label"
+                                title="10~99"
+                              >
+                                10~99
+                              </div>
+                            </label>
+                            <label
+                              class="studio-segmented-item studio-segmented-item-selected"
+                            >
+                              <input
+                                checked=""
+                                class="studio-segmented-item-input"
+                                type="radio"
+                              />
+                              <div
+                                class="studio-segmented-item-label"
+                                title="100~999"
+                              >
+                                100~999
+                              </div>
+                            </label>
+                          </div>
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-16"
-                  data-testid="data-key-pairuser"
+                  </span>
+                </span>
+              </div>
+              <div
+                aria-grabbed="false"
+                class="studio-tree-treenode studio-tree-treenode-switcher-close"
+                draggable="false"
+              >
+                <span
+                  aria-hidden="true"
+                  class="studio-tree-indent"
+                />
+                <span
+                  class="studio-tree-switcher studio-tree-switcher_close"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-17"
+                    aria-label="caret-down"
+                    class="anticon anticon-caret-down studio-tree-switcher-icon"
+                    role="img"
                   >
-                    <span
-                      class="MuiBox-root emotion-19"
-                    >
-                      "
-                      user
-                      "
-                    </span>
-                    <div
-                      class="MuiBox-root emotion-20"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="caret-down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="0 0 1024 1024"
+                      width="1em"
                     >
-                      :
-                    </div>
+                      <path
+                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                      />
+                    </svg>
                   </span>
-                  <div
-                    class="MuiBox-root emotion-42"
-                  >
-                    <div
-                      class="data-type-label MuiBox-root emotion-29"
-                    >
-                      string
-                    </div>
-                    <div
-                      class="string-value MuiBox-root emotion-30"
-                    >
-                      <span
-                        class="MuiBox-root emotion-71"
-                      >
-                        "
-                        chenshuai2144
-                        "
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="data-key-pair MuiBox-root emotion-16"
-                  data-testid="data-key-pairavatar"
+                </span>
+                <span
+                  class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-close"
+                  title="时间"
                 >
                   <span
-                    class="data-key MuiBox-root emotion-17"
+                    class="studio-tree-iconEle studio-tree-icon__customize"
                   >
                     <span
-                      class="MuiBox-root emotion-19"
+                      aria-label="clock-circle"
+                      class="anticon anticon-clock-circle"
+                      role="img"
                     >
-                      "
-                      avatar
-                      "
+                      <svg
+                        aria-hidden="true"
+                        data-icon="clock-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                        />
+                        <path
+                          d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+                        />
+                      </svg>
                     </span>
-                    <div
-                      class="MuiBox-root emotion-20"
-                    >
-                      :
-                    </div>
                   </span>
-                  <div
-                    class="MuiBox-root emotion-42"
-                  >
-                    <div
-                      class="data-type-label MuiBox-root emotion-29"
-                    >
-                      string
-                    </div>
+                  <span
+                    class="studio-tree-title"
+                  >
                     <div
-                      class="string-value MuiBox-root emotion-30"
+                      class="layoutkit-flexbox emotion-2"
                     >
-                      <span
-                        class="MuiBox-root emotion-45"
+                      <div
+                        class="layoutkit-flexbox emotion-3"
                       >
-                        "
-                        https://gw.alipayobjec
+                        <div
+                          class="layoutkit-flexbox emotion-0"
+                          style="white-space: nowrap;"
+                        >
+                          时间
+                        </div>
                         <span
-                          class="MuiBox-root emotion-46"
+                          class="studio-data-fill-demo-data emotion-5"
+                        />
+                      </div>
+                      <div
+                        style="white-space: nowrap;"
+                      >
+                        <div
+                          class="studio-segmented emotion-6 studio-segmented-sm"
+                          style="line-height: 1;"
                         >
-                          …
-                        </span>
-                        "
-                      </span>
+                          <div
+                            class="studio-segmented-group"
+                          >
+                            <label
+                              class="studio-segmented-item studio-segmented-item-selected"
+                            >
+                              <input
+                                checked=""
+                                class="studio-segmented-item-input"
+                                type="radio"
+                              />
+                              <div
+                                class="studio-segmented-item-label"
+                                title="日期时间"
+                              >
+                                日期时间
+                              </div>
+                            </label>
+                            <label
+                              class="studio-segmented-item"
+                            >
+                              <input
+                                class="studio-segmented-item-input"
+                                type="radio"
+                              />
+                              <div
+                                class="studio-segmented-item-label"
+                                title="日期"
+                              >
+                                日期
+                              </div>
+                            </label>
+                            <label
+                              class="studio-segmented-item"
+                            >
+                              <input
+                                class="studio-segmented-item-input"
+                                type="radio"
+                              />
+                              <div
+                                class="studio-segmented-item-label"
+                                title="时间"
+                              >
+                                时间
+                              </div>
+                            </label>
+                          </div>
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                </div>
+                  </span>
+                </span>
               </div>
-              <span
-                class="data-object-end MuiBox-root emotion-19"
-              >
-                }
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
-          class="studio-divider studio-divider-horizontal studio-divider-dashed"
-          role="separator"
-          style="margin: 12px 0px;"
-        />
-        <div
-          class="layoutkit-flexbox emotion-153"
-        >
-          <ul
-            class="studio-pagination studio-pagination-mini"
-          >
-            <li
-              class="studio-pagination-total-text"
-            >
-              共 20 条数据
-            </li>
-            <li
-              aria-disabled="true"
-              class="studio-pagination-prev studio-pagination-disabled"
-              title="Previous Page"
-            >
-              <button
-                class="studio-pagination-item-link"
-                disabled=""
-                tabindex="-1"
-                type="button"
+              <div
+                aria-grabbed="false"
+                class="studio-tree-treenode studio-tree-treenode-switcher-close studio-tree-treenode-leaf-last"
+                draggable="false"
               >
                 <span
-                  aria-label="left"
-                  class="anticon anticon-left"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="left"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </li>
-            <li
-              class="studio-pagination-item studio-pagination-item-1 studio-pagination-item-active"
-              tabindex="0"
-              title="1"
-            >
-              <a
-                rel="nofollow"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="studio-pagination-item studio-pagination-item-2"
-              tabindex="0"
-              title="2"
-            >
-              <a
-                rel="nofollow"
-              >
-                2
-              </a>
-            </li>
-            <li
-              class="studio-pagination-item studio-pagination-item-3"
-              tabindex="0"
-              title="3"
-            >
-              <a
-                rel="nofollow"
-              >
-                3
-              </a>
-            </li>
-            <li
-              class="studio-pagination-item studio-pagination-item-4"
-              tabindex="0"
-              title="4"
-            >
-              <a
-                rel="nofollow"
-              >
-                4
-              </a>
-            </li>
-            <li
-              class="studio-pagination-item studio-pagination-item-5 studio-pagination-item-before-jump-next"
-              tabindex="0"
-              title="5"
-            >
-              <a
-                rel="nofollow"
-              >
-                5
-              </a>
-            </li>
-            <li
-              class="studio-pagination-jump-next studio-pagination-jump-next-custom-icon"
-              tabindex="0"
-              title="Next 5 Pages"
-            >
-              <a
-                class="studio-pagination-item-link"
-              >
-                <div
-                  class="studio-pagination-item-container"
+                  aria-hidden="true"
+                  class="studio-tree-indent"
+                />
+                <span
+                  class="studio-tree-switcher studio-tree-switcher_close"
                 >
                   <span
-                    aria-label="double-right"
-                    class="anticon anticon-double-right studio-pagination-item-link-icon"
+                    aria-label="caret-down"
+                    class="anticon anticon-caret-down studio-tree-switcher-icon"
                     role="img"
                   >
                     <svg
                       aria-hidden="true"
-                      data-icon="double-right"
+                      data-icon="caret-down"
                       fill="currentColor"
                       focusable="false"
                       height="1em"
-                      viewBox="64 64 896 896"
+                      viewBox="0 0 1024 1024"
                       width="1em"
                     >
                       <path
-                        d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
+                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
                       />
                     </svg>
                   </span>
-                  <span
-                    class="studio-pagination-item-ellipsis"
-                  >
-                    •••
-                  </span>
-                </div>
-              </a>
-            </li>
-            <li
-              class="studio-pagination-item studio-pagination-item-20"
-              tabindex="0"
-              title="20"
-            >
-              <a
-                rel="nofollow"
-              >
-                20
-              </a>
-            </li>
-            <li
-              aria-disabled="false"
-              class="studio-pagination-next"
-              tabindex="0"
-              title="Next Page"
-            >
-              <button
-                class="studio-pagination-item-link"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  aria-label="right"
-                  class="anticon anticon-right"
-                  role="img"
+                </span>
+                <span
+                  class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-close"
+                  title="地址"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="right"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <span
+                    class="studio-tree-iconEle studio-tree-icon__customize"
                   >
-                    <path
-                      d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                    />
-                  </svg>
+                    <span
+                      aria-label="environment"
+                      class="anticon anticon-environment"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="environment"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M854.6 289.1a362.49 362.49 0 00-79.9-115.7 370.83 370.83 0 00-118.2-77.8C610.7 76.6 562.1 67 512 67c-50.1 0-98.7 9.6-144.5 28.5-44.3 18.3-84 44.5-118.2 77.8A363.6 363.6 0 00169.4 289c-19.5 45-29.4 92.8-29.4 142 0 70.6 16.9 140.9 50.1 208.7 26.7 54.5 64 107.6 111 158.1 80.3 86.2 164.5 138.9 188.4 153a43.9 43.9 0 0022.4 6.1c7.8 0 15.5-2 22.4-6.1 23.9-14.1 108.1-66.8 188.4-153 47-50.4 84.3-103.6 111-158.1C867.1 572 884 501.8 884 431.1c0-49.2-9.9-97-29.4-142zM512 880.2c-65.9-41.9-300-207.8-300-449.1 0-77.9 31.1-151.1 87.6-206.3C356.3 169.5 431.7 139 512 139s155.7 30.5 212.4 85.9C780.9 280 812 353.2 812 431.1c0 241.3-234.1 407.2-300 449.1zm0-617.2c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 551c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 439c0-29.9 11.7-58 32.8-79.2C454 338.6 482.1 327 512 327c29.9 0 58 11.6 79.2 32.8C612.4 381 624 409.1 624 439c0 29.9-11.6 58-32.8 79.2z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                  <span
+                    class="studio-tree-title"
+                  >
+                    <div
+                      class="layoutkit-flexbox emotion-2"
+                    >
+                      <div
+                        class="layoutkit-flexbox emotion-3"
+                      >
+                        <div
+                          class="layoutkit-flexbox emotion-0"
+                          style="white-space: nowrap;"
+                        >
+                          地址
+                        </div>
+                        <span
+                          class="studio-data-fill-demo-data emotion-5"
+                        />
+                      </div>
+                    </div>
+                  </span>
                 </span>
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<DataPreviewer /> > renders renderEmpty.tsx correctly 1`] = `
-.emotion-0 {
-  color: rgba(0, 0, 0, 0.65);
-}
-
-.emotion-0:hover {
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-1 {
-  padding: 8px;
-  background: rgba(0, 0, 0, 0.02);
-  border-radius: 4px;
-}
-
-.emotion-1 .studio-empty-normal {
-  margin: 12px 0;
-}
-
-<div>
-  <div
-    class="studio-data-previewer emotion-0"
-  >
-    <div
-      class="studio-data-previewer-empty emotion-1"
-    >
-      <div
-        class="studio-empty studio-empty-normal"
-      >
-        <div
-          class="studio-empty-image"
-        >
-          <svg
-            height="41"
-            viewBox="0 0 64 41"
-            width="64"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              transform="translate(0 1)"
-            >
-              <ellipse
-                cx="32"
-                cy="33"
-                fill="#f5f5f5"
-                rx="32"
-                ry="7"
-              />
-              <g
-                fill-rule="nonzero"
-                stroke="#d9d9d9"
-              >
-                <path
-                  d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                />
-                <path
-                  d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                  fill="#fafafa"
-                />
-              </g>
-            </g>
-          </svg>
-        </div>
-        <div
-          class="studio-empty-description"
-        >
-          <div>
-            这是一个空状态
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -15135,7 +9171,7 @@ exports[`<DataPreviewer /> > renders renderEmpty.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
+exports[`<DataPreviewer /> > renders basic.tsx correctly 1`] = `
 .emotion-0 {
   color: rgba(0, 0, 0, 0.65);
 }
@@ -15357,38 +9393,50 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
 
 .emotion-28 {
   display: inline-block;
+  margin-left: 4px;
+  margin-right: 4px;
+  font-size: 0.7rem;
+  opacity: 0.8;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-29 {
+  display: inline-block;
 }
 
-.emotion-39 {
+.emotion-41 {
   display: inline-block;
   color: #cb4b16;
 }
 
-.emotion-41 {
+.emotion-44 {
   overflow-wrap: anywhere;
   cursor: pointer;
 }
 
-.emotion-42 {
+.emotion-45 {
   padding: 4px;
 }
 
-.emotion-66 {
+.emotion-70 {
   overflow-wrap: anywhere;
   cursor: inherit;
 }
 
-.emotion-87 {
+.emotion-93 {
   display: inline-block;
   color: #2aa198;
 }
 
-.emotion-113 {
+.emotion-123 {
   display: inline-block;
   color: #d33682;
 }
 
-.emotion-115 {
+.emotion-125 {
   font-size: 0.8rem;
   background-color: rgb(235, 235, 235);
   font-weight: 700;
@@ -15396,7 +9444,7 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
   padding: 0.5px 2px;
 }
 
-.emotion-139 {
+.emotion-152 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -15604,7 +9652,12 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
                     class="MuiBox-root emotion-27"
                   >
                     <div
-                      class="int-value MuiBox-root emotion-28"
+                      class="data-type-label MuiBox-root emotion-28"
+                    >
+                      int
+                    </div>
+                    <div
+                      class="int-value MuiBox-root emotion-29"
                     >
                       624748504
                     </div>
@@ -15634,7 +9687,12 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
                     class="MuiBox-root emotion-27"
                   >
                     <div
-                      class="int-value MuiBox-root emotion-28"
+                      class="data-type-label MuiBox-root emotion-28"
+                    >
+                      int
+                    </div>
+                    <div
+                      class="int-value MuiBox-root emotion-29"
                     >
                       6689
                     </div>
@@ -15661,18 +9719,23 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
                     </div>
                   </span>
                   <div
-                    class="MuiBox-root emotion-39"
+                    class="MuiBox-root emotion-41"
                   >
                     <div
-                      class="string-value MuiBox-root emotion-28"
+                      class="data-type-label MuiBox-root emotion-28"
+                    >
+                      string
+                    </div>
+                    <div
+                      class="string-value MuiBox-root emotion-29"
                     >
                       <span
-                        class="MuiBox-root emotion-41"
+                        class="MuiBox-root emotion-44"
                       >
                         "
                         🐛 [BUG]yarn install命令
                         <span
-                          class="MuiBox-root emotion-42"
+                          class="MuiBox-root emotion-45"
                         >
                           …
                         </span>
@@ -15791,13 +9854,18 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
                             </div>
                           </span>
                           <div
-                            class="MuiBox-root emotion-39"
+                            class="MuiBox-root emotion-41"
                           >
                             <div
-                              class="string-value MuiBox-root emotion-28"
+                              class="data-type-label MuiBox-root emotion-28"
+                            >
+                              string
+                            </div>
+                            <div
+                              class="string-value MuiBox-root emotion-29"
                             >
                               <span
-                                class="MuiBox-root emotion-66"
+                                class="MuiBox-root emotion-70"
                               >
                                 "
                                 bug
@@ -15827,13 +9895,18 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
                             </div>
                           </span>
                           <div
-                            class="MuiBox-root emotion-39"
+                            class="MuiBox-root emotion-41"
                           >
                             <div
-                              class="string-value MuiBox-root emotion-28"
+                              class="data-type-label MuiBox-root emotion-28"
+                            >
+                              string
+                            </div>
+                            <div
+                              class="string-value MuiBox-root emotion-29"
                             >
                               <span
-                                class="MuiBox-root emotion-66"
+                                class="MuiBox-root emotion-70"
                               >
                                 "
                                 error
@@ -15877,13 +9950,18 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
                     </div>
                   </span>
                   <div
-                    class="MuiBox-root emotion-39"
+                    class="MuiBox-root emotion-41"
                   >
                     <div
-                      class="string-value MuiBox-root emotion-28"
+                      class="data-type-label MuiBox-root emotion-28"
+                    >
+                      string
+                    </div>
+                    <div
+                      class="string-value MuiBox-root emotion-29"
                     >
                       <span
-                        class="MuiBox-root emotion-66"
+                        class="MuiBox-root emotion-70"
                       >
                         "
                         open
@@ -15913,10 +9991,15 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
                     </div>
                   </span>
                   <div
-                    class="MuiBox-root emotion-87"
+                    class="MuiBox-root emotion-93"
                   >
                     <div
-                      class="bool-value MuiBox-root emotion-28"
+                      class="data-type-label MuiBox-root emotion-28"
+                    >
+                      bool
+                    </div>
+                    <div
+                      class="bool-value MuiBox-root emotion-29"
                     >
                       false
                     </div>
@@ -15946,7 +10029,12 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
                     class="MuiBox-root emotion-27"
                   >
                     <div
-                      class="int-value MuiBox-root emotion-28"
+                      class="data-type-label MuiBox-root emotion-28"
+                    >
+                      int
+                    </div>
+                    <div
+                      class="int-value MuiBox-root emotion-29"
                     >
                       1
                     </div>
@@ -15969,17 +10057,22 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
                     <div
                       class="MuiBox-root emotion-19"
                     >
-                      :
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-41"
+                  >
+                    <div
+                      class="data-type-label MuiBox-root emotion-28"
+                    >
+                      string
                     </div>
-                  </span>
-                  <div
-                    class="MuiBox-root emotion-39"
-                  >
                     <div
-                      class="string-value MuiBox-root emotion-28"
+                      class="string-value MuiBox-root emotion-29"
                     >
                       <span
-                        class="MuiBox-root emotion-66"
+                        class="MuiBox-root emotion-70"
                       >
                         "
                         2020-05-26T09:42:56Z
@@ -16009,13 +10102,18 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
                     </div>
                   </span>
                   <div
-                    class="MuiBox-root emotion-39"
+                    class="MuiBox-root emotion-41"
                   >
                     <div
-                      class="string-value MuiBox-root emotion-28"
+                      class="data-type-label MuiBox-root emotion-28"
+                    >
+                      string
+                    </div>
+                    <div
+                      class="string-value MuiBox-root emotion-29"
                     >
                       <span
-                        class="MuiBox-root emotion-66"
+                        class="MuiBox-root emotion-70"
                       >
                         "
                         2020-05-26T10:03:02Z
@@ -16045,13 +10143,13 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
                     </div>
                   </span>
                   <div
-                    class="MuiBox-root emotion-113"
+                    class="MuiBox-root emotion-123"
                   >
                     <div
-                      class="null-value MuiBox-root emotion-28"
+                      class="null-value MuiBox-root emotion-29"
                     >
                       <div
-                        class="MuiBox-root emotion-115"
+                        class="MuiBox-root emotion-125"
                       >
                         NULL
                       </div>
@@ -16079,13 +10177,18 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
                     </div>
                   </span>
                   <div
-                    class="MuiBox-root emotion-39"
+                    class="MuiBox-root emotion-41"
                   >
                     <div
-                      class="string-value MuiBox-root emotion-28"
+                      class="data-type-label MuiBox-root emotion-28"
+                    >
+                      string
+                    </div>
+                    <div
+                      class="string-value MuiBox-root emotion-29"
                     >
                       <span
-                        class="MuiBox-root emotion-66"
+                        class="MuiBox-root emotion-70"
                       >
                         "
                         NONE
@@ -16115,13 +10218,18 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
                     </div>
                   </span>
                   <div
-                    class="MuiBox-root emotion-39"
+                    class="MuiBox-root emotion-41"
                   >
                     <div
-                      class="string-value MuiBox-root emotion-28"
+                      class="data-type-label MuiBox-root emotion-28"
+                    >
+                      string
+                    </div>
+                    <div
+                      class="string-value MuiBox-root emotion-29"
                     >
                       <span
-                        class="MuiBox-root emotion-66"
+                        class="MuiBox-root emotion-70"
                       >
                         "
                         chenshuai2144
@@ -16151,18 +10259,23 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
                     </div>
                   </span>
                   <div
-                    class="MuiBox-root emotion-39"
+                    class="MuiBox-root emotion-41"
                   >
                     <div
-                      class="string-value MuiBox-root emotion-28"
+                      class="data-type-label MuiBox-root emotion-28"
+                    >
+                      string
+                    </div>
+                    <div
+                      class="string-value MuiBox-root emotion-29"
                     >
                       <span
-                        class="MuiBox-root emotion-41"
+                        class="MuiBox-root emotion-44"
                       >
                         "
                         https://gw.alipayobjec
                         <span
-                          class="MuiBox-root emotion-42"
+                          class="MuiBox-root emotion-45"
                         >
                           …
                         </span>
@@ -16186,7 +10299,7 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
           style="margin: 12px 0px;"
         />
         <div
-          class="layoutkit-flexbox emotion-139"
+          class="layoutkit-flexbox emotion-152"
         >
           <ul
             class="studio-pagination studio-pagination-mini"
@@ -16313,198 +10426,58 @@ exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
                       />
                     </svg>
                   </span>
-                  <span
-                    class="studio-pagination-item-ellipsis"
-                  >
-                    •••
-                  </span>
-                </div>
-              </a>
-            </li>
-            <li
-              class="studio-pagination-item studio-pagination-item-20"
-              tabindex="0"
-              title="20"
-            >
-              <a
-                rel="nofollow"
-              >
-                20
-              </a>
-            </li>
-            <li
-              aria-disabled="false"
-              class="studio-pagination-next"
-              tabindex="0"
-              title="Next Page"
-            >
-              <button
-                class="studio-pagination-item-link"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  aria-label="right"
-                  class="anticon anticon-right"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="right"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<DraggablePanel /> > renders basic.tsx correctly 1`] = `
-.emotion-0 {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  position: relative;
-  border: 0 solid rgba(5, 5, 5, 0.06);
-}
-
-.emotion-0:hover .studio-draggable-panel-toggle {
-  opacity: 1;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-2 {
-  position: absolute;
-  opacity: 0;
-  z-index: 1001;
-  -webkit-transition: opacity 0.1s;
-  transition: opacity 0.1s;
-  border-radius: 4px;
-  cursor: pointer;
-  background: #ffffff;
-  border-width: 1px;
-  border-style: solid;
-  color: rgba(0, 0, 0, 0.45);
-  border-color: #d9d9d9;
-  width: 16px;
-  height: 40px;
-  left: -17px;
-  top: 50%;
-  margin-top: -20px;
-  border-radius: 4px 0 0 4px;
-  border-right-width: 0;
-}
-
-.emotion-2:hover {
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-}
-
-.emotion-3 {
-  background: #ffffff;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-}
-
-.emotion-4::before {
-  position: absolute;
-  z-index: 50;
-  -webkit-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  content: '';
-}
-
-.emotion-4:hover::before,
-.emotion-4:active::before {
-  background: #1677ff;
-}
-
-.emotion-4::before {
-  left: 50%;
-  width: 2px;
-  height: 100%;
-}
-
-<div>
-  <div
-    style="background: rgb(241, 241, 241); border: 2px solid #ddd; height: 300px; display: flex;"
-  >
-    <div
-      style="flex: 1; padding: 12px;"
-    >
-      内容
-    </div>
-    <div
-      class="studio-draggable-panel emotion-0"
-      style="border-left-width: 1px;"
-    >
-      <div
-        class="layoutkit-center emotion-1 studio-draggable-panel-toggle studio-draggable-panel-toggle-left emotion-2"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            style="transform: rotate(180deg);"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </div>
-      <div
-        class="studio-draggable-panel-fixed emotion-3"
-        style="position: relative; user-select: auto; background: rgb(255, 255, 255); padding: 12px; width: 400px; height: 100%; min-width: 280px; box-sizing: border-box; flex-shrink: 0;"
-      >
-        可拖面板
-        <div>
-          <div
-            class="emotion-4 studio-draggable-panel-left-handle"
-            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
-          />
+                  <span
+                    class="studio-pagination-item-ellipsis"
+                  >
+                    •••
+                  </span>
+                </div>
+              </a>
+            </li>
+            <li
+              class="studio-pagination-item studio-pagination-item-20"
+              tabindex="0"
+              title="20"
+            >
+              <a
+                rel="nofollow"
+              >
+                20
+              </a>
+            </li>
+            <li
+              aria-disabled="false"
+              class="studio-pagination-next"
+              tabindex="0"
+              title="Next Page"
+            >
+              <button
+                class="studio-pagination-item-link"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  aria-label="right"
+                  class="anticon anticon-right"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="right"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
@@ -16512,27 +10485,23 @@ exports[`<DraggablePanel /> > renders basic.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`<DraggablePanel /> > renders bottom.tsx correctly 1`] = `
+exports[`<DataPreviewer /> > renders empty.tsx correctly 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.emotion-0:hover {
+  color: rgba(0, 0, 0, 0.88);
 }
 
 .emotion-1 {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  position: relative;
-  border: 0 solid rgba(5, 5, 5, 0.06);
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
 }
 
-.emotion-1:hover .studio-draggable-panel-toggle {
-  opacity: 1;
+.emotion-1 .studio-empty-normal {
+  margin: 12px 0;
 }
 
 .emotion-2 {
@@ -16543,10 +10512,6 @@ exports[`<DraggablePanel /> > renders bottom.tsx correctly 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -16554,108 +10519,129 @@ exports[`<DraggablePanel /> > renders bottom.tsx correctly 1`] = `
 }
 
 .emotion-3 {
-  position: absolute;
-  opacity: 0;
-  z-index: 1001;
-  -webkit-transition: opacity 0.1s;
-  transition: opacity 0.1s;
-  border-radius: 4px;
-  cursor: pointer;
-  background: #ffffff;
-  border-width: 1px;
-  border-style: solid;
-  color: rgba(0, 0, 0, 0.45);
-  border-color: #d9d9d9;
-  height: 16px;
-  width: 40px;
-  top: -17px;
-  left: 50%;
-  margin-left: -20px;
-  border-radius: 4px 4px 0 0;
-  border-bottom-width: 0;
-}
-
-.emotion-3:hover {
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  gap: 12px;
 }
 
 .emotion-4 {
-  background: #ffffff;
-  overflow: hidden;
-}
-
-.emotion-5 {
-  position: relative;
-}
-
-.emotion-5::before {
-  position: absolute;
-  z-index: 50;
-  -webkit-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  content: '';
-}
-
-.emotion-5:hover::before,
-.emotion-5:active::before {
-  background: #1677ff;
-}
-
-.emotion-5::before {
-  top: 50%;
-  height: 2px;
-  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 8px;
 }
 
 <div>
   <div
-    class="layoutkit-flexbox emotion-0"
-    style="background: rgb(241, 241, 241); border: 2px solid #ddd; height: 300px;"
+    class="studio-data-previewer emotion-0"
   >
     <div
-      style="flex: 1; padding: 12px;"
-    >
-      内容
-    </div>
-    <div
-      class="studio-draggable-panel emotion-1"
-      style="border-top-width: 1px;"
+      class="studio-data-previewer-empty emotion-1"
     >
       <div
-        class="layoutkit-center emotion-2 studio-draggable-panel-toggle studio-draggable-panel-toggle-top emotion-3"
+        class="studio-empty studio-empty-normal"
       >
-        <span
-          aria-label="up"
-          class="anticon anticon-up"
-          role="img"
+        <div
+          class="studio-empty-image"
         >
           <svg
-            aria-hidden="true"
-            data-icon="up"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            style="transform: rotate(180deg);"
-            viewBox="64 64 896 896"
-            width="1em"
+            height="41"
+            viewBox="0 0 64 41"
+            width="64"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
-              d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-            />
+            <g
+              fill="none"
+              fill-rule="evenodd"
+              transform="translate(0 1)"
+            >
+              <ellipse
+                cx="32"
+                cy="33"
+                fill="#f5f5f5"
+                rx="32"
+                ry="7"
+              />
+              <g
+                fill-rule="nonzero"
+                stroke="#d9d9d9"
+              >
+                <path
+                  d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                />
+                <path
+                  d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                  fill="#fafafa"
+                />
+              </g>
+            </g>
           </svg>
-        </span>
-      </div>
-      <div
-        class="studio-draggable-panel-fixed emotion-4"
-        style="position: relative; user-select: auto; background: rgb(255, 255, 255); width: 100%; padding: 12px; height: 150px; min-width: 280px; box-sizing: border-box; flex-shrink: 0;"
-      >
-        底部面板
-        <div>
+        </div>
+        <div
+          class="studio-empty-description"
+        >
           <div
-            class="studio-draggable-panel-top-handle emotion-5"
-            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
-          />
+            class="layoutkit-flexbox emotion-2"
+          >
+            <div
+              class="layoutkit-flexbox emotion-3"
+            >
+              <div>
+                没有数据？来试试 Demo 吧
+              </div>
+              <div
+                class="layoutkit-flexbox emotion-4"
+              >
+                <button
+                  class="studio-btn studio-btn-primary studio-btn-sm studio-btn-background-ghost"
+                  type="button"
+                >
+                  <span
+                    class="studio-btn-icon"
+                  >
+                    <span
+                      aria-label="flag"
+                      class="anticon anticon-flag"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="flag"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M880 305H624V192c0-17.7-14.3-32-32-32H184v-40c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v784c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V640h248v113c0 17.7 14.3 32 32 32h416c17.7 0 32-14.3 32-32V337c0-17.7-14.3-32-32-32zM184 568V232h368v336H184zm656 145H504v-73h112c4.4 0 8-3.6 8-8V377h216v336z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                  <span>
+                    立即尝试
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -16663,318 +10649,318 @@ exports[`<DraggablePanel /> > renders bottom.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`<DraggablePanel /> > renders controlFloat.tsx correctly 1`] = `
+exports[`<DataPreviewer /> > renders emptyAction.tsx correctly 1`] = `
 .emotion-0 {
-  overflow: hidden;
-  border-radius: 8px;
-  background: #ffffff;
-  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  z-index: 2000;
-}
-
-.emotion-1 {
-  position: relative;
+  color: rgba(0, 0, 0, 0.65);
 }
 
-.emotion-1::before {
-  position: absolute;
-  z-index: 50;
-  -webkit-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  content: '';
+.emotion-0:hover {
+  color: rgba(0, 0, 0, 0.88);
 }
 
-.emotion-1:hover::before,
-.emotion-1:active::before {
-  background: #1677ff;
+.emotion-1 {
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
 }
 
-.emotion-1::before {
-  top: 50%;
-  height: 2px;
-  width: 100%;
+.emotion-1 .studio-empty-normal {
+  margin: 12px 0;
 }
 
 .emotion-2 {
-  position: relative;
-}
-
-.emotion-2::before {
-  position: absolute;
-  z-index: 50;
-  -webkit-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  content: '';
-}
-
-.emotion-2:hover::before,
-.emotion-2:active::before {
-  background: #1677ff;
-}
-
-.emotion-2::before {
-  right: 50%;
-  width: 2px;
-  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-3 {
-  position: relative;
-}
-
-.emotion-3::before {
-  position: absolute;
-  z-index: 50;
-  -webkit-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  content: '';
-}
-
-.emotion-3:hover::before,
-.emotion-3:active::before {
-  background: #1677ff;
-}
-
-.emotion-3::before {
-  bottom: 50%;
-  height: 2px;
-  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  gap: 12px;
 }
 
 .emotion-4 {
-  position: relative;
-}
-
-.emotion-4::before {
-  position: absolute;
-  z-index: 50;
-  -webkit-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  content: '';
-}
-
-.emotion-4:hover::before,
-.emotion-4:active::before {
-  background: #1677ff;
-}
-
-.emotion-4::before {
-  left: 50%;
-  width: 2px;
-  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 8px;
 }
 
 <div>
   <div
-    style="background: rgb(241, 241, 241); border: 2px solid #ddd; height: 500px; display: flex;"
+    class="studio-data-previewer emotion-0"
   >
     <div
-      style="flex: 1; padding: 12px;"
-    >
-      内容
-    </div>
-    <div
-      bound="parent"
-      class="studio-draggable-panel-float emotion-0 react-draggable"
-      style="position: absolute; user-select: auto; width: 400px; height: 300px; display: inline-block; top: 0px; left: 0px; cursor: move; background: rgb(255, 255, 255); padding: 12px; transform: translate(200px,200px); max-width: 9007199254740991px; max-height: 9007199254740991px; min-width: 280px; min-height: 200px; box-sizing: border-box; flex-shrink: 0;"
+      class="studio-data-previewer-empty emotion-1"
     >
-      悬浮可拖拽面板
-      <div>
-        <div
-          class="studio-draggable-panel-top-handle emotion-1"
-          style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
-        />
-        <div
-          class="emotion-2 studio-draggable-panel-right-handle"
-          style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; right: -5px; cursor: col-resize;"
-        />
-        <div
-          class="studio-draggable-panel-bottom-handle emotion-3"
-          style="position: absolute; user-select: none; width: 100%; height: 10px; bottom: -5px; left: 0px; cursor: row-resize;"
-        />
-        <div
-          class="emotion-4 studio-draggable-panel-left-handle"
-          style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
-        />
-        <div
-          class=""
-          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
-        />
-        <div
-          class=""
-          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
-        />
+      <div
+        class="studio-empty studio-empty-normal"
+      >
         <div
-          class=""
-          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
-        />
+          class="studio-empty-image"
+        >
+          <svg
+            height="41"
+            viewBox="0 0 64 41"
+            width="64"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              fill="none"
+              fill-rule="evenodd"
+              transform="translate(0 1)"
+            >
+              <ellipse
+                cx="32"
+                cy="33"
+                fill="#f5f5f5"
+                rx="32"
+                ry="7"
+              />
+              <g
+                fill-rule="nonzero"
+                stroke="#d9d9d9"
+              >
+                <path
+                  d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                />
+                <path
+                  d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                  fill="#fafafa"
+                />
+              </g>
+            </g>
+          </svg>
+        </div>
         <div
-          class=""
-          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
-        />
+          class="studio-empty-description"
+        >
+          <div
+            class="layoutkit-flexbox emotion-2"
+          >
+            <div
+              class="layoutkit-flexbox emotion-3"
+            >
+              <div>
+                没有数据？来试试 Demo 吧
+              </div>
+              <div
+                class="layoutkit-flexbox emotion-4"
+              >
+                <button
+                  class="studio-btn studio-btn-primary studio-btn-sm studio-btn-background-ghost"
+                  type="button"
+                >
+                  <span
+                    class="studio-btn-icon"
+                  >
+                    <span
+                      aria-label="flag"
+                      class="anticon anticon-flag"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="flag"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M880 305H624V192c0-17.7-14.3-32-32-32H184v-40c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v784c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V640h248v113c0 17.7 14.3 32 32 32h416c17.7 0 32-14.3 32-32V337c0-17.7-14.3-32-32-32zM184 568V232h368v336H184zm656 145H504v-73h112c4.4 0 8-3.6 8-8V377h216v336z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                  <span>
+                    立即尝试
+                  </span>
+                </button>
+                <button
+                  class="studio-btn studio-btn-default studio-btn-sm"
+                  type="button"
+                >
+                  <span
+                    class="studio-btn-icon"
+                  >
+                    <span
+                      aria-label="download"
+                      class="anticon anticon-download"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="download"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                  <span>
+                    导入表格
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`<DraggablePanel /> > renders float.tsx correctly 1`] = `
+exports[`<DataPreviewer /> > renders extra.tsx correctly 1`] = `
 .emotion-0 {
-  overflow: hidden;
-  border-radius: 8px;
-  background: #ffffff;
-  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  z-index: 2000;
-}
-
-.emotion-1 {
-  position: relative;
-}
-
-.emotion-1::before {
-  position: absolute;
-  z-index: 50;
-  -webkit-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  content: '';
+  color: rgba(0, 0, 0, 0.65);
 }
 
-.emotion-1:hover::before,
-.emotion-1:active::before {
-  background: #1677ff;
+.emotion-0:hover {
+  color: rgba(0, 0, 0, 0.88);
 }
 
-.emotion-1::before {
-  top: 50%;
-  height: 2px;
-  width: 100%;
+.emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 
 .emotion-2 {
-  position: relative;
-}
-
-.emotion-2::before {
-  position: absolute;
-  z-index: 50;
-  -webkit-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  content: '';
-}
-
-.emotion-2:hover::before,
-.emotion-2:active::before {
-  background: #1677ff;
-}
-
-.emotion-2::before {
-  right: 50%;
-  width: 2px;
-  height: 100%;
+  padding: 6px 8px;
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
 }
 
 .emotion-3 {
-  position: relative;
-}
-
-.emotion-3::before {
-  position: absolute;
-  z-index: 50;
-  -webkit-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  content: '';
-}
-
-.emotion-3:hover::before,
-.emotion-3:active::before {
-  background: #1677ff;
-}
-
-.emotion-3::before {
-  bottom: 50%;
-  height: 2px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   width: 100%;
 }
 
 .emotion-4 {
-  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 4px;
 }
 
-.emotion-4::before {
-  position: absolute;
-  z-index: 50;
-  -webkit-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  content: '';
+.emotion-5 {
+  height: 24px;
+  margin-left: -4px;
+  padding: 4px;
+  border-radius: 4px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  -webkit-transition: 150ms background-color ease-in-out;
+  transition: 150ms background-color ease-in-out;
 }
 
-.emotion-4:hover::before,
-.emotion-4:active::before {
-  background: #1677ff;
+.emotion-5:hover {
+  background: rgba(0, 0, 0, 0.02);
 }
 
-.emotion-4::before {
-  left: 50%;
-  width: 2px;
-  height: 100%;
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
-<div>
-  <div
-    style="background: rgb(241, 241, 241); border: 2px solid #ddd; height: 500px; display: flex;"
-  >
-    <div
-      style="flex: 1; padding: 12px;"
-    >
-      内容
-    </div>
-    <div
-      bound="parent"
-      class="studio-draggable-panel-float emotion-0 react-draggable"
-      style="position: absolute; user-select: auto; width: 400px; height: 300px; display: inline-block; top: 0px; left: 0px; cursor: move; background: rgb(255, 255, 255); padding: 12px; transform: translate(200px,200px); max-width: 9007199254740991px; max-height: 9007199254740991px; min-width: 280px; min-height: 200px; box-sizing: border-box; flex-shrink: 0;"
-    >
-      悬浮可拖拽面板
-      <div>
-        <div
-          class="studio-draggable-panel-top-handle emotion-1"
-          style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
-        />
-        <div
-          class="emotion-2 studio-draggable-panel-right-handle"
-          style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; right: -5px; cursor: col-resize;"
-        />
-        <div
-          class="studio-draggable-panel-bottom-handle emotion-3"
-          style="position: absolute; user-select: none; width: 100%; height: 10px; bottom: -5px; left: 0px; cursor: row-resize;"
-        />
-        <div
-          class="emotion-4 studio-draggable-panel-left-handle"
-          style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
-        />
-        <div
-          class=""
-          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
-        />
-        <div
-          class=""
-          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
-        />
-        <div
-          class=""
-          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
-        />
-        <div
-          class=""
-          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
 
-exports[`<DraggablePanel /> > renders left.tsx correctly 1`] = `
-.emotion-0 {
+.emotion-8:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-8:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -16982,2491 +10968,3315 @@ exports[`<DraggablePanel /> > renders left.tsx correctly 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: 4px;
 }
 
-.emotion-1 {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  position: relative;
-  border: 0 solid rgba(5, 5, 5, 0.06);
+.emotion-14 {
+  border-radius: 4px;
 }
 
-.emotion-1:hover .studio-draggable-panel-toggle {
-  opacity: 1;
+.emotion-14 .json-viewer-theme-dark {
+  background: none!important;
 }
 
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+.emotion-15 {
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.87);
+  -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 4px;
+  box-shadow: none;
+  background-color: rgba(0, 0, 0, 0);
+  font-family: monospace;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  content-visibility: auto;
 }
 
-.emotion-3 {
-  position: absolute;
-  opacity: 0;
-  z-index: 1001;
-  -webkit-transition: opacity 0.1s;
-  transition: opacity 0.1s;
-  border-radius: 4px;
-  cursor: pointer;
-  background: #ffffff;
-  border-width: 1px;
-  border-style: solid;
-  color: rgba(0, 0, 0, 0.45);
-  border-color: #d9d9d9;
-  width: 16px;
-  height: 40px;
-  right: -17px;
-  top: 50%;
-  margin-top: -20px;
-  border-radius: 0 4px 4px 0;
-  border-left-width: 0;
+.emotion-16 {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
 }
 
-.emotion-3:hover {
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
+.emotion-17 {
+  display: inline-block;
+  line-height: 1.5;
+  color: #002b36;
+  letter-spacing: 0.5px;
+  opacity: 0.8;
 }
 
-.emotion-4 {
-  background: #ffffff;
-  overflow: hidden;
+.emotion-18 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  fill: currentColor;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-size: 1.5rem;
+  font-size: .8rem;
 }
 
-.emotion-5 {
-  position: relative;
+.emotion-18:hover {
+  cursor: pointer;
 }
 
-.emotion-5::before {
-  position: absolute;
-  z-index: 50;
-  -webkit-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  content: '';
+.emotion-20 {
+  display: inline-block;
+  margin-right: 4px;
 }
 
-.emotion-5:hover::before,
-.emotion-5:active::before {
-  background: #1677ff;
+.emotion-21 {
+  letter-spacing: 0.5px;
 }
 
-.emotion-5::before {
-  right: 50%;
-  width: 2px;
-  height: 100%;
+.emotion-22 {
+  padding-left: 4px;
+  font-style: italic;
+  color: rgba(0, 0, 0, 0.3);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-<div>
-  <div
-    class="layoutkit-flexbox emotion-0"
-    style="background: rgb(241, 241, 241); border: 2px solid #ddd; height: 300px;"
-  >
-    <div
-      class="studio-draggable-panel emotion-1"
-      style="border-right-width: 1px;"
-    >
-      <div
-        class="layoutkit-center emotion-2 studio-draggable-panel-toggle studio-draggable-panel-toggle-right emotion-3"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            style="transform: rotate(180deg);"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </div>
-      <div
-        class="studio-draggable-panel-fixed emotion-4"
-        style="position: relative; user-select: auto; background: rgb(255, 255, 255); width: 400px; padding: 12px; height: 100%; min-width: 280px; box-sizing: border-box; flex-shrink: 0;"
-      >
-        左侧面板
-        <div>
-          <div
-            class="emotion-5 studio-draggable-panel-right-handle"
-            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      style="flex: 1; padding: 12px;"
-    >
-      内容
-    </div>
-  </div>
-</div>
-`;
+.emotion-23 {
+  display: block;
+  padding-left: 14.399999999999999px;
+  margin-left: 4.8px;
+  color: #002b36;
+  border-left: 1px solid rgb(235, 235, 235);
+}
 
-exports[`<DraggablePanel /> > renders top.tsx correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+.emotion-28 {
+  display: inline-block;
+  color: #268bd2;
 }
 
-.emotion-1 {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  position: relative;
-  border: 0 solid rgba(5, 5, 5, 0.06);
+.emotion-29 {
+  display: inline-block;
+  margin-left: 4px;
+  margin-right: 4px;
+  font-size: 0.7rem;
+  opacity: 0.8;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-.emotion-1:hover .studio-draggable-panel-toggle {
-  opacity: 1;
+.emotion-30 {
+  display: inline-block;
 }
 
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+.emotion-42 {
+  display: inline-block;
+  color: #cb4b16;
 }
 
-.emotion-3 {
-  position: absolute;
-  opacity: 0;
-  z-index: 1001;
-  -webkit-transition: opacity 0.1s;
-  transition: opacity 0.1s;
-  border-radius: 4px;
+.emotion-45 {
+  overflow-wrap: anywhere;
   cursor: pointer;
-  background: #ffffff;
-  border-width: 1px;
-  border-style: solid;
-  color: rgba(0, 0, 0, 0.45);
-  border-color: #d9d9d9;
-  height: 16px;
-  width: 40px;
-  bottom: -17px;
-  left: 50%;
-  margin-left: -20px;
-  border-radius: 0 0 4px 4px;
-  border-top-width: 0;
 }
 
-.emotion-3:hover {
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
+.emotion-46 {
+  padding: 4px;
 }
 
-.emotion-4 {
-  background: #ffffff;
-  overflow: hidden;
+.emotion-71 {
+  overflow-wrap: anywhere;
+  cursor: inherit;
 }
 
-.emotion-5 {
-  position: relative;
+.emotion-94 {
+  display: inline-block;
+  color: #2aa198;
 }
 
-.emotion-5::before {
-  position: absolute;
-  z-index: 50;
-  -webkit-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  content: '';
+.emotion-124 {
+  display: inline-block;
+  color: #d33682;
 }
 
-.emotion-5:hover::before,
-.emotion-5:active::before {
-  background: #1677ff;
+.emotion-126 {
+  font-size: 0.8rem;
+  background-color: rgb(235, 235, 235);
+  font-weight: 700;
+  border-radius: 3px;
+  padding: 0.5px 2px;
 }
 
-.emotion-5::before {
-  bottom: 50%;
-  height: 2px;
-  width: 100%;
+.emotion-153 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
 }
 
 <div>
   <div
-    class="layoutkit-flexbox emotion-0"
-    style="background: rgb(241, 241, 241); border: 2px solid #ddd; height: 300px;"
+    class="studio-data-previewer emotion-0"
   >
     <div
-      class="studio-draggable-panel emotion-1"
-      style="border-bottom-width: 1px;"
+      class="layoutkit-flexbox emotion-1 studio-collapse-title emotion-2"
     >
       <div
-        class="layoutkit-center emotion-2 studio-draggable-panel-toggle studio-draggable-panel-toggle-bottom emotion-3"
+        class="layoutkit-flexbox emotion-3 studio-collapse-title-expand"
       >
-        <span
-          aria-label="down"
-          class="anticon anticon-down"
-          role="img"
+        <div
+          class="layoutkit-flexbox emotion-4 emotion-5"
         >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            style="transform: rotate(180deg);"
-            viewBox="64 64 896 896"
-            width="1em"
+          <span
+            aria-label="caret-right"
+            class="anticon anticon-caret-right"
+            role="img"
+            style="font-size: 10px;"
           >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-      </div>
-      <div
-        class="studio-draggable-panel-fixed emotion-4"
-        style="position: relative; user-select: auto; background: rgb(255, 255, 255); width: 100%; padding: 12px; height: 150px; min-width: 280px; box-sizing: border-box; flex-shrink: 0;"
-      >
-        顶部面板
-        <div>
+            <svg
+              aria-hidden="true"
+              data-icon="caret-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              style="transform: rotate(90deg);"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"
+              />
+            </svg>
+          </span>
+          <div>
+            数据预览
+          </div>
+        </div>
+        <div
+          class="layoutkit-flexbox emotion-6"
+        >
           <div
-            class="studio-draggable-panel-bottom-handle emotion-5"
-            style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+            class="layoutkit-flexbox emotion-1"
+          >
+            <button
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-8"
+              type="button"
+            >
+              <span
+                class="studio-btn-icon"
+              >
+                <span
+                  aria-label="table"
+                  class="anticon anticon-table"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="table"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 208H676V232h212v136zm0 224H676V432h212v160zM412 432h200v160H412V432zm200-64H412V232h200v136zm-476 64h212v160H136V432zm0-200h212v136H136V232zm0 424h212v136H136V656zm276 0h200v136H412V656zm476 136H676V656h212v136z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
+          <div
+            class="studio-divider studio-divider-vertical studio-divider-dashed"
+            role="separator"
+            style="margin: 0px 4px;"
           />
+          <div
+            class="layoutkit-flexbox emotion-9"
+          >
+            <button
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-8"
+              type="button"
+            >
+              <span
+                class="studio-btn-icon"
+              >
+                <span
+                  aria-label="rollback"
+                  class="anticon anticon-rollback"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="rollback"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M793 242H366v-74c0-6.7-7.7-10.4-12.9-6.3l-142 112a8 8 0 000 12.6l142 112c5.2 4.1 12.9.4 12.9-6.3v-74h415v470H175c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-28.7 64-64V306c0-35.3-28.7-64-64-64z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+            <button
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-8"
+              type="button"
+            >
+              <span
+                class="studio-btn-icon"
+              >
+                <span
+                  aria-label="edit"
+                  class="anticon anticon-edit"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="edit"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32zm-622.3-84c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      style="flex: 1; padding: 12px;"
-    >
-      内容
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<FieldIcon /> > renders basic.tsx correctly 1`] = `
-.emotion-0 {
-  font-size: 14px;
-}
-
-<div>
-  <div
-    class="studio-pro-card studio-pro-card-contain-card studio-pro-card-ghost"
-  >
-    <div
-      class="studio-pro-card-body studio-pro-card-body-wrap"
-    >
       <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+        class="studio-divider studio-divider-horizontal studio-divider-dashed"
+        role="separator"
+        style="margin: 4px 0px 12px;"
+      />
+      <div
+        class="layoutkit-flexbox emotion-1"
       >
         <div
-          class="studio-pro-card studio-pro-card-border"
+          class="layoutkit-flexbox emotion-1 studio-data-previewer-json emotion-14"
+          style="overflow: scroll; max-height: 200px; margin-bottom: 8px;"
         >
           <div
-            class="studio-pro-card-body studio-pro-card-body-center"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 json-viewer-theme-light emotion-15"
           >
-            <span
-              class="anticon studio-field-icon emotion-0"
-              role="img"
+            <div
+              class="data-key-pair MuiBox-root emotion-16"
+              data-testid="data-key-pair"
             >
-              <svg
-                aria-hidden="true"
-                class="pro-editor-icon"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 17 17"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
+              <span
+                class="data-key MuiBox-root emotion-17"
               >
-                <g
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                  id="TypeAny-页面-1"
-                  stroke="none"
-                  stroke-width="1"
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-18"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                  />
+                </svg>
+                <span
+                  class="MuiBox-root emotion-19"
+                >
+                  "
+                  第1条数据
+                  "
+                </span>
+                <div
+                  class="MuiBox-root emotion-20"
+                >
+                  :
+                </div>
+                <span
+                  class="data-object-start MuiBox-root emotion-21"
+                >
+                  {
+                  <span
+                    class="MuiBox-root emotion-22"
+                  >
+                    13 Items
+                  </span>
+                </span>
+              </span>
+              <div
+                class="data-object MuiBox-root emotion-23"
+              >
+                <div
+                  class="data-key-pair MuiBox-root emotion-16"
+                  data-testid="data-key-pairid"
+                >
+                  <span
+                    class="data-key MuiBox-root emotion-17"
+                  >
+                    <span
+                      class="MuiBox-root emotion-19"
+                    >
+                      "
+                      id
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-20"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-28"
+                  >
+                    <div
+                      class="data-type-label MuiBox-root emotion-29"
+                    >
+                      int
+                    </div>
+                    <div
+                      class="int-value MuiBox-root emotion-30"
+                    >
+                      624748504
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-16"
+                  data-testid="data-key-pairnumber"
+                >
+                  <span
+                    class="data-key MuiBox-root emotion-17"
+                  >
+                    <span
+                      class="MuiBox-root emotion-19"
+                    >
+                      "
+                      number
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-20"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-28"
+                  >
+                    <div
+                      class="data-type-label MuiBox-root emotion-29"
+                    >
+                      int
+                    </div>
+                    <div
+                      class="int-value MuiBox-root emotion-30"
+                    >
+                      6689
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-16"
+                  data-testid="data-key-pairtitle"
+                >
+                  <span
+                    class="data-key MuiBox-root emotion-17"
+                  >
+                    <span
+                      class="MuiBox-root emotion-19"
+                    >
+                      "
+                      title
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-20"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-42"
+                  >
+                    <div
+                      class="data-type-label MuiBox-root emotion-29"
+                    >
+                      string
+                    </div>
+                    <div
+                      class="string-value MuiBox-root emotion-30"
+                    >
+                      <span
+                        class="MuiBox-root emotion-45"
+                      >
+                        "
+                        🐛 [BUG]yarn install命令
+                        <span
+                          class="MuiBox-root emotion-46"
+                        >
+                          …
+                        </span>
+                        "
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-16"
+                  data-testid="data-key-pairlabels"
+                >
+                  <span
+                    class="data-key MuiBox-root emotion-17"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-18"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                      />
+                    </svg>
+                    <span
+                      class="MuiBox-root emotion-19"
+                    >
+                      "
+                      labels
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-20"
+                    >
+                      :
+                    </div>
+                    <span
+                      class="data-object-start MuiBox-root emotion-21"
+                    >
+                      [
+                      <span
+                        class="MuiBox-root emotion-22"
+                      >
+                        1 Items
+                      </span>
+                    </span>
+                  </span>
+                  <div
+                    class="data-object MuiBox-root emotion-23"
+                  >
+                    <div
+                      class="data-key-pair MuiBox-root emotion-16"
+                      data-testid="data-key-pairlabels.0"
+                    >
+                      <span
+                        class="data-key MuiBox-root emotion-17"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-18"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                          />
+                        </svg>
+                        <span
+                          class="MuiBox-root emotion-19"
+                        >
+                          <span
+                            class="MuiBox-root emotion-19"
+                            style="color: rgb(108, 113, 196);"
+                          >
+                            0
+                          </span>
+                        </span>
+                        <div
+                          class="MuiBox-root emotion-20"
+                        >
+                          :
+                        </div>
+                        <span
+                          class="data-object-start MuiBox-root emotion-21"
+                        >
+                          {
+                          <span
+                            class="MuiBox-root emotion-22"
+                          >
+                            2 Items
+                          </span>
+                        </span>
+                      </span>
+                      <div
+                        class="data-object MuiBox-root emotion-23"
+                      >
+                        <div
+                          class="data-key-pair MuiBox-root emotion-16"
+                          data-testid="data-key-pairlabels.0.name"
+                        >
+                          <span
+                            class="data-key MuiBox-root emotion-17"
+                          >
+                            <span
+                              class="MuiBox-root emotion-19"
+                            >
+                              "
+                              name
+                              "
+                            </span>
+                            <div
+                              class="MuiBox-root emotion-20"
+                            >
+                              :
+                            </div>
+                          </span>
+                          <div
+                            class="MuiBox-root emotion-42"
+                          >
+                            <div
+                              class="data-type-label MuiBox-root emotion-29"
+                            >
+                              string
+                            </div>
+                            <div
+                              class="string-value MuiBox-root emotion-30"
+                            >
+                              <span
+                                class="MuiBox-root emotion-71"
+                              >
+                                "
+                                bug
+                                "
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="data-key-pair MuiBox-root emotion-16"
+                          data-testid="data-key-pairlabels.0.color"
+                        >
+                          <span
+                            class="data-key MuiBox-root emotion-17"
+                          >
+                            <span
+                              class="MuiBox-root emotion-19"
+                            >
+                              "
+                              color
+                              "
+                            </span>
+                            <div
+                              class="MuiBox-root emotion-20"
+                            >
+                              :
+                            </div>
+                          </span>
+                          <div
+                            class="MuiBox-root emotion-42"
+                          >
+                            <div
+                              class="data-type-label MuiBox-root emotion-29"
+                            >
+                              string
+                            </div>
+                            <div
+                              class="string-value MuiBox-root emotion-30"
+                            >
+                              <span
+                                class="MuiBox-root emotion-71"
+                              >
+                                "
+                                error
+                                "
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <span
+                        class="data-object-end MuiBox-root emotion-19"
+                      >
+                        }
+                      </span>
+                    </div>
+                  </div>
+                  <span
+                    class="data-object-end MuiBox-root emotion-19"
+                  >
+                    ]
+                  </span>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-16"
+                  data-testid="data-key-pairstate"
+                >
+                  <span
+                    class="data-key MuiBox-root emotion-17"
+                  >
+                    <span
+                      class="MuiBox-root emotion-19"
+                    >
+                      "
+                      state
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-20"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-42"
+                  >
+                    <div
+                      class="data-type-label MuiBox-root emotion-29"
+                    >
+                      string
+                    </div>
+                    <div
+                      class="string-value MuiBox-root emotion-30"
+                    >
+                      <span
+                        class="MuiBox-root emotion-71"
+                      >
+                        "
+                        open
+                        "
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-16"
+                  data-testid="data-key-pairlocked"
+                >
+                  <span
+                    class="data-key MuiBox-root emotion-17"
+                  >
+                    <span
+                      class="MuiBox-root emotion-19"
+                    >
+                      "
+                      locked
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-20"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-94"
+                  >
+                    <div
+                      class="data-type-label MuiBox-root emotion-29"
+                    >
+                      bool
+                    </div>
+                    <div
+                      class="bool-value MuiBox-root emotion-30"
+                    >
+                      false
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-16"
+                  data-testid="data-key-paircomments"
+                >
+                  <span
+                    class="data-key MuiBox-root emotion-17"
+                  >
+                    <span
+                      class="MuiBox-root emotion-19"
+                    >
+                      "
+                      comments
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-20"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-28"
+                  >
+                    <div
+                      class="data-type-label MuiBox-root emotion-29"
+                    >
+                      int
+                    </div>
+                    <div
+                      class="int-value MuiBox-root emotion-30"
+                    >
+                      1
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-16"
+                  data-testid="data-key-paircreated_at"
+                >
+                  <span
+                    class="data-key MuiBox-root emotion-17"
+                  >
+                    <span
+                      class="MuiBox-root emotion-19"
+                    >
+                      "
+                      created_at
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-20"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-42"
+                  >
+                    <div
+                      class="data-type-label MuiBox-root emotion-29"
+                    >
+                      string
+                    </div>
+                    <div
+                      class="string-value MuiBox-root emotion-30"
+                    >
+                      <span
+                        class="MuiBox-root emotion-71"
+                      >
+                        "
+                        2020-05-26T09:42:56Z
+                        "
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-16"
+                  data-testid="data-key-pairupdated_at"
                 >
-                  <g
-                    id="TypeAny-编组-2"
-                    transform="translate(0.210938, 0.644531)"
+                  <span
+                    class="data-key MuiBox-root emotion-17"
                   >
-                    <path
-                      d="M12.1525262,6.06243032 L13.4664705,9.94584615 L13.4878216,9.94584615 L14.7964147,6.06243032 L15.9821628,6.06243032 L13.5946488,12.7555674 C13.441534,13.1722274 13.2296812,13.4606734 12.9590546,13.6209231 C12.6848606,13.7740557 12.3750814,13.8506132 12.0296812,13.8506132 L11.661146,13.8506132 L11.661146,12.7983055 L11.986961,12.7983055 C12.1329409,12.7983055 12.2682542,12.7591349 12.3928829,12.6807759 C12.5175117,12.5988852 12.6047536,12.4777882 12.6546087,12.3175563 L12.9590546,11.3880936 L10.9721293,6.06243032 L12.1525262,6.06243032 Z M2.15714604,6.00053512 C2.85481382,5.9934359 3.41188852,6.12487848 3.82837012,6.39489855 C4.24486957,6.67201784 4.45665106,7.14809365 4.46376812,7.82314381 L4.46376812,11.6016054 L3.34781717,11.6016054 L3.34781717,11.1113133 L3.326466,11.1113133 C3.22324192,11.2996031 3.06306355,11.4381628 2.84593088,11.5269922 C2.63234783,11.6193712 2.33689186,11.6655518 1.95958082,11.6655518 C1.34020067,11.6584526 0.863215162,11.4950279 0.528606466,11.1752598 C0.17619621,10.8626087 0,10.4629119 0,9.97616945 C0,9.51074247 0.153061315,9.12526198 0.459183946,8.81972798 C0.765324415,8.50705909 1.21382386,8.34718395 1.80473579,8.34008473 L3.34783501,8.34008473 L3.34783501,7.75919732 C3.35495206,7.27245485 2.9758573,7.03618283 2.21053289,7.05039911 C1.93287848,7.05039911 1.71394426,7.07881382 1.55376589,7.13566109 C1.38647046,7.20317503 1.25476031,7.31686957 1.15867113,7.4767447 L0.282987737,6.81057748 C0.706586399,6.25633891 1.33128205,5.98631884 2.15714604,6.00053512 Z M8.4790903,6 C8.93836343,6 9.358466,6.16171237 9.73943367,6.48513712 C10.1168161,6.81212932 10.3144169,7.29191527 10.3322185,7.92456633 L10.3322185,11.6031215 L9.21607135,11.6031215 L9.21607135,8.3084058 C9.21607135,7.92101672 9.11282943,7.62602453 8.90632776,7.42342921 C8.70339353,7.21730212 8.44170346,7.11422074 8.12127536,7.11422074 C7.80084727,7.11422074 7.5373913,7.21730212 7.33090747,7.42342921 C7.12083835,7.62602453 7.01581271,7.92101672 7.01581271,8.30842363 L7.01581271,11.6031215 L5.89966555,11.6031215 L5.89966555,6.06929766 L7.01581271,6.06929766 L7.01581271,6.65573244 L7.03718172,6.65573244 C7.4038796,6.21857748 7.88452174,6 8.4790903,6 Z M3.3400223,9.26198439 L2.00618952,9.26198439 C1.35882274,9.27628986 1.03869788,9.4997369 1.04583278,9.93230769 C1.04583278,10.1218105 1.12941806,10.2826845 1.29658863,10.4149833 C1.45664214,10.5615518 1.72163211,10.634845 2.09155853,10.634845 C2.55750279,10.6419799 2.88651059,10.5865775 3.07858194,10.468602 C3.2528874,10.3506087 3.3400223,10.0824794 3.3400223,9.66419621 L3.3400223,9.26198439 Z"
-                      id="TypeAny-形状结合"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
-        <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <span
-              class="anticon studio-field-icon emotion-0"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                class="pro-editor-icon"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 17 16"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-              >
-                <defs>
-                  <rect
-                    height="16"
-                    id="TypeAnyArr-path-1"
-                    width="16"
-                    x="0"
-                    y="0"
-                  />
-                </defs>
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="TypeAnyArr-页面-1"
-                  stroke="none"
-                  stroke-width="1"
+                    <span
+                      class="MuiBox-root emotion-19"
+                    >
+                      "
+                      updated_at
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-20"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-42"
+                  >
+                    <div
+                      class="data-type-label MuiBox-root emotion-29"
+                    >
+                      string
+                    </div>
+                    <div
+                      class="string-value MuiBox-root emotion-30"
+                    >
+                      <span
+                        class="MuiBox-root emotion-71"
+                      >
+                        "
+                        2020-05-26T10:03:02Z
+                        "
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-16"
+                  data-testid="data-key-pairclosed_at"
                 >
-                  <g
-                    id="TypeAnyArr-编组"
-                    transform="translate(-156.183593, -18.424879)"
+                  <span
+                    class="data-key MuiBox-root emotion-17"
                   >
-                    <g
-                      id="TypeAnyArr-svg"
-                      transform="translate(130.328125, 0.000000)"
+                    <span
+                      class="MuiBox-root emotion-19"
+                    >
+                      "
+                      closed_at
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-20"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-124"
+                  >
+                    <div
+                      class="null-value MuiBox-root emotion-30"
+                    >
+                      <div
+                        class="MuiBox-root emotion-126"
+                      >
+                        NULL
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-16"
+                  data-testid="data-key-pairauthor_association"
+                >
+                  <span
+                    class="data-key MuiBox-root emotion-17"
+                  >
+                    <span
+                      class="MuiBox-root emotion-19"
+                    >
+                      "
+                      author_association
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-20"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-42"
+                  >
+                    <div
+                      class="data-type-label MuiBox-root emotion-29"
+                    >
+                      string
+                    </div>
+                    <div
+                      class="string-value MuiBox-root emotion-30"
+                    >
+                      <span
+                        class="MuiBox-root emotion-71"
+                      >
+                        "
+                        NONE
+                        "
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-16"
+                  data-testid="data-key-pairuser"
+                >
+                  <span
+                    class="data-key MuiBox-root emotion-17"
+                  >
+                    <span
+                      class="MuiBox-root emotion-19"
+                    >
+                      "
+                      user
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-20"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-42"
+                  >
+                    <div
+                      class="data-type-label MuiBox-root emotion-29"
+                    >
+                      string
+                    </div>
+                    <div
+                      class="string-value MuiBox-root emotion-30"
+                    >
+                      <span
+                        class="MuiBox-root emotion-71"
+                      >
+                        "
+                        chenshuai2144
+                        "
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-16"
+                  data-testid="data-key-pairavatar"
+                >
+                  <span
+                    class="data-key MuiBox-root emotion-17"
+                  >
+                    <span
+                      class="MuiBox-root emotion-19"
+                    >
+                      "
+                      avatar
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-20"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-42"
+                  >
+                    <div
+                      class="data-type-label MuiBox-root emotion-29"
+                    >
+                      string
+                    </div>
+                    <div
+                      class="string-value MuiBox-root emotion-30"
                     >
-                      <g
-                        transform="translate(26.492188, 17.000000)"
+                      <span
+                        class="MuiBox-root emotion-45"
                       >
-                        <g
-                          transform="translate(0.000000, 1.421875)"
+                        "
+                        https://gw.alipayobjec
+                        <span
+                          class="MuiBox-root emotion-46"
                         >
-                          <mask
-                            fill="white"
-                            id="TypeAnyArr-mask-2"
-                          >
-                            <use
-                              xlink:href="#TypeAnyArr-path-1"
-                            />
-                          </mask>
-                          <g
-                            id="TypeAnyArr-容器"
-                          />
-                          <path
-                            d="M2.4793757,4.27432776 L1.43825195,4.27432776 L1.43825195,10.8583367 L2.4793757,10.8583367 L2.4793757,12.1326644 L0,12.1326644 L0,3 L2.4793757,3 L2.4793757,4.27432776 Z M13.5027871,4.27432776 L13.5027871,3 L15.9821628,3 L15.9821628,12.1326644 L13.5027871,12.1326644 L13.5027871,10.8583367 L14.5439108,10.8583367 L14.5439108,4.27432776 L13.5027871,4.27432776 Z M4.76700111,9.02664883 L4.75241026,9.02664883 C4.68186399,9.15472018 4.57241472,9.24893645 4.42402676,9.30933333 C4.27810033,9.37215608 4.07620067,9.40356745 3.81838127,9.40356745 C3.39515719,9.39875139 3.06921739,9.28758974 2.84057971,9.07013601 C2.59977703,8.85751616 2.4793757,8.58571237 2.4793757,8.2547068 C2.4793757,7.9382029 2.58397324,7.67606689 2.79313266,7.4682631 C3.00232776,7.25564326 3.30880713,7.14692531 3.71257079,7.14209142 L4.76700111,7.14209142 L4.76700111,6.747068 C4.77187068,6.41604459 4.51282051,6.25538462 3.98986845,6.2650524 C3.80013378,6.2650524 3.65055072,6.28437012 3.54108361,6.32302341 C3.42678261,6.36893645 3.33677592,6.44626087 3.27109922,6.55497882 L2.67274916,6.10196656 C2.96219398,5.72504794 3.38907469,5.54143144 3.95337347,5.55108138 C4.43012709,5.54626533 4.81077369,5.63564771 5.09536678,5.81928205 C5.37995987,6.00773244 5.52467336,6.33147826 5.52954292,6.79055518 L5.52954292,9.36008027 L4.76700111,9.36008027 L4.76700111,9.02664883 Z M4.76254181,7.76254181 L3.84998885,7.76254181 C3.4070903,7.77219175 3.18808473,7.92309476 3.19293645,8.21525084 C3.19293645,8.34319732 3.25012263,8.45184392 3.36451282,8.5411728 C3.47401561,8.64016945 3.65531327,8.68966778 3.90838796,8.68966778 C4.22717503,8.69448384 4.4522631,8.65707915 4.58368785,8.57740022 C4.70292977,8.49772129 4.76254181,8.31663768 4.76254181,8.03416722 L4.76254181,7.76254181 Z M6.52842809,5.5979398 L7.29198662,5.5979398 L7.29198662,5.99745819 L7.30661315,5.99745819 C7.55745819,5.69962988 7.88626979,5.55072464 8.29301226,5.55072464 C8.60721516,5.55072464 8.89462653,5.6608874 9.15522854,5.88123077 C9.41340468,6.104 9.54857525,6.43086734 9.56075808,6.86185061 L9.56075808,9.36789298 L8.79719955,9.36789298 L8.79719955,7.12336232 C8.79719955,6.85942475 8.7265641,6.65847046 8.5852932,6.52046377 C8.446466,6.38001338 8.26745151,6.30980602 8.04824972,6.30980602 C7.8290301,6.30980602 7.64880268,6.38001338 7.50754961,6.52046377 C7.36383501,6.65847046 7.29198662,6.85942475 7.29198662,7.12336232 L7.29198662,9.36789298 L6.52842809,9.36789298 L6.52842809,5.5979398 Z M10.006689,5.58639911 L10.813592,5.58639911 L11.7117681,8.22796878 L11.726359,8.22796878 L12.6209142,5.58639911 L13.4314381,5.58639911 L11.7993846,10.139175 C11.6947157,10.4226087 11.5498952,10.6188183 11.3649052,10.7278038 C11.1774716,10.8319732 10.9657079,10.884058 10.7296143,10.884058 L10.4776812,10.884058 L10.4776812,10.1682497 L10.7003969,10.1682497 C10.8001962,10.1682497 10.8926823,10.1416187 10.9778907,10.0883211 C11.0630814,10.0325975 11.1227291,9.95026087 11.1567982,9.84123969 L11.3649052,9.20901672 L10.006689,5.58639911 Z"
-                            fill="#000000"
-                            fill-opacity="0.88"
-                            id="TypeAnyArr-shapeGroup"
-                            mask="url(#TypeAnyArr-mask-2)"
-                          />
-                        </g>
-                      </g>
-                    </g>
-                  </g>
-                </g>
-              </svg>
-            </span>
+                          …
+                        </span>
+                        "
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <span
+                class="data-object-end MuiBox-root emotion-19"
+              >
+                }
+              </span>
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
         <div
-          class="studio-pro-card studio-pro-card-border"
+          class="studio-divider studio-divider-horizontal studio-divider-dashed"
+          role="separator"
+          style="margin: 12px 0px;"
+        />
+        <div
+          class="layoutkit-flexbox emotion-153"
         >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
+          <ul
+            class="studio-pagination studio-pagination-mini"
           >
-            <span
-              class="anticon studio-field-icon emotion-0"
-              role="img"
-              style="color: rgb(216, 193, 82);"
+            <li
+              class="studio-pagination-total-text"
             >
-              <svg
-                aria-hidden="true"
-                class="pro-editor-icon"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 791 495"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
+              共 20 条数据
+            </li>
+            <li
+              aria-disabled="true"
+              class="studio-pagination-prev studio-pagination-disabled"
+              title="Previous Page"
+            >
+              <button
+                class="studio-pagination-item-link"
+                disabled=""
+                tabindex="-1"
+                type="button"
               >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="TypeBool-页面-1"
-                  stroke="none"
-                  stroke-width="1"
+                <span
+                  aria-label="left"
+                  class="anticon anticon-left"
+                  role="img"
                 >
-                  <g
+                  <svg
+                    aria-hidden="true"
+                    data-icon="left"
                     fill="currentColor"
-                    fill-rule="nonzero"
-                    id="TypeBool-icon-bool1"
-                    transform="translate(0.535000, 0.000000)"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
                   >
                     <path
-                      d="M5.68434189e-14,490.864 L5.68434189e-14,0 L70.32,0 L70.32,173.043 L71.7,173.043 C79.513,161.553 88.82,152.705 99.62,146.501 C110.421,140.296 122.716,137.194 136.504,137.194 C153.51,137.194 166.724,140.181 176.146,146.156 C185.568,152.131 193.266,159.714 199.241,168.906 C203.837,176.26 206.825,185.912 208.203,197.862 C209.583,209.812 210.272,228.426 210.272,253.705 L210.272,386.762 C210.272,406.066 209.352,421.462 207.514,432.952 C205.675,444.443 202.688,454.095 198.552,461.908 C186.602,483.97 166.149,495 137.194,495 C119.728,495 106.4,491.553 97.208,484.659 C88.015,477.765 79.053,469.262 70.32,459.15 L70.32,490.864 L5.68434189e-14,490.864 Z M139.951,248.879 C139.951,237.849 137.538,228.196 132.712,219.923 C127.886,211.65 118.809,207.513 105.481,207.513 C95.369,207.513 86.981,211.076 80.317,218.2 C73.652,225.324 70.32,234.401 70.32,245.432 L70.32,381.247 C70.32,394.116 73.538,404.572 79.972,412.615 C86.407,420.658 94.909,424.68 105.481,424.68 C117.431,424.68 126.163,420.313 131.678,411.58 C137.194,402.848 139.951,391.358 139.951,377.11 L139.951,248.879 Z M232.431,258.531 C232.431,244.283 233.351,231.184 235.189,219.234 C237.027,207.284 240.475,196.714 245.53,187.521 C253.803,172.354 265.638,160.174 281.035,150.981 C296.432,141.79 315.161,137.194 337.222,137.194 C359.284,137.194 378.012,141.79 393.41,150.982 C408.807,160.174 420.642,172.354 428.915,187.521 C433.97,196.713 437.417,207.284 439.255,219.234 C441.095,231.184 442.014,244.283 442.014,258.531 L442.014,373.663 C442.014,387.911 441.094,401.01 439.256,412.96 C437.417,424.91 433.97,435.48 428.915,444.673 C420.642,459.84 408.807,472.019 393.41,481.212 C378.013,490.404 359.284,495 337.222,495 C315.162,495 296.432,490.404 281.035,481.212 C265.638,472.019 253.803,459.84 245.53,444.672 C240.475,435.48 237.027,424.91 235.189,412.96 C233.351,401.01 232.431,387.91 232.431,373.663 L232.431,258.531 L232.431,258.531 Z M302.751,384.694 C302.751,398.022 305.854,408.019 312.059,414.684 C318.264,421.348 326.651,424.68 337.222,424.68 C347.794,424.68 356.182,421.348 362.386,414.683 C368.591,408.019 371.693,398.023 371.693,384.693 L371.693,247.5 C371.693,234.171 368.591,224.175 362.386,217.51 C356.181,210.846 347.794,207.514 337.222,207.514 C326.652,207.514 318.264,210.846 312.059,217.51 C305.854,224.175 302.752,234.171 302.752,247.5 L302.752,384.694 L302.751,384.694 Z M457.969,258.53 C457.969,244.282 458.889,231.183 460.727,219.233 C462.566,207.283 466.013,196.713 471.068,187.52 C479.341,172.353 491.176,160.173 506.573,150.98 C521.97,141.789 540.699,137.193 562.761,137.193 C584.822,137.193 603.551,141.789 618.948,150.981 C634.345,160.173 646.18,172.353 654.453,187.52 C659.509,196.712 662.956,207.283 664.794,219.233 C666.633,231.183 667.552,244.282 667.552,258.53 L667.552,373.662 C667.552,387.91 666.632,401.009 664.794,412.959 C662.956,424.909 659.509,435.479 654.453,444.672 C646.18,459.839 634.345,472.018 618.948,481.211 C603.55,490.404 584.821,495 562.76,495 C540.698,495 521.97,490.404 506.572,481.212 C491.175,472.019 479.34,459.84 471.067,444.672 C466.012,435.48 462.565,424.91 460.727,412.96 C458.887,401.01 457.969,387.91 457.969,373.663 L457.969,258.531 L457.969,258.53 Z M528.29,384.693 C528.29,398.021 531.392,408.018 537.597,414.683 C543.802,421.347 552.19,424.679 562.761,424.679 C573.331,424.679 581.72,421.347 587.924,414.682 C594.129,408.018 597.231,398.022 597.231,384.692 L597.231,247.5 C597.231,234.171 594.129,224.175 587.924,217.51 C581.72,210.846 573.332,207.514 562.761,207.514 C552.19,207.514 543.801,210.846 537.597,217.51 C531.392,224.175 528.29,234.171 528.29,247.5 L528.29,384.694 L528.29,384.693 Z M685.574,0 L755.894,0 L755.894,392.277 C755.894,405.606 758.307,414.683 763.134,419.509 C767.959,424.335 777.036,427.437 790.365,428.816 L790.365,495 C774.279,495 759.801,493.736 746.932,491.208 C734.062,488.68 723.032,483.74 713.84,476.386 C704.648,469.492 697.639,459.725 692.813,447.086 C687.987,434.446 685.574,417.786 685.574,397.103 L685.574,0 Z"
-                      id="TypeBool-形状"
+                      d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
                     />
-                  </g>
-                </g>
-              </svg>
-            </span>
-          </div>
+                  </svg>
+                </span>
+              </button>
+            </li>
+            <li
+              class="studio-pagination-item studio-pagination-item-1 studio-pagination-item-active"
+              tabindex="0"
+              title="1"
+            >
+              <a
+                rel="nofollow"
+              >
+                1
+              </a>
+            </li>
+            <li
+              class="studio-pagination-item studio-pagination-item-2"
+              tabindex="0"
+              title="2"
+            >
+              <a
+                rel="nofollow"
+              >
+                2
+              </a>
+            </li>
+            <li
+              class="studio-pagination-item studio-pagination-item-3"
+              tabindex="0"
+              title="3"
+            >
+              <a
+                rel="nofollow"
+              >
+                3
+              </a>
+            </li>
+            <li
+              class="studio-pagination-item studio-pagination-item-4"
+              tabindex="0"
+              title="4"
+            >
+              <a
+                rel="nofollow"
+              >
+                4
+              </a>
+            </li>
+            <li
+              class="studio-pagination-item studio-pagination-item-5 studio-pagination-item-before-jump-next"
+              tabindex="0"
+              title="5"
+            >
+              <a
+                rel="nofollow"
+              >
+                5
+              </a>
+            </li>
+            <li
+              class="studio-pagination-jump-next studio-pagination-jump-next-custom-icon"
+              tabindex="0"
+              title="Next 5 Pages"
+            >
+              <a
+                class="studio-pagination-item-link"
+              >
+                <div
+                  class="studio-pagination-item-container"
+                >
+                  <span
+                    aria-label="double-right"
+                    class="anticon anticon-double-right studio-pagination-item-link-icon"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="double-right"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="studio-pagination-item-ellipsis"
+                  >
+                    •••
+                  </span>
+                </div>
+              </a>
+            </li>
+            <li
+              class="studio-pagination-item studio-pagination-item-20"
+              tabindex="0"
+              title="20"
+            >
+              <a
+                rel="nofollow"
+              >
+                20
+              </a>
+            </li>
+            <li
+              aria-disabled="false"
+              class="studio-pagination-next"
+              tabindex="0"
+              title="Next Page"
+            >
+              <button
+                class="studio-pagination-item-link"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  aria-label="right"
+                  class="anticon anticon-right"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="right"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </li>
+          </ul>
         </div>
       </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<DataPreviewer /> > renders renderEmpty.tsx correctly 1`] = `
+.emotion-0 {
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.emotion-0:hover {
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-1 {
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
+}
+
+.emotion-1 .studio-empty-normal {
+  margin: 12px 0;
+}
+
+<div>
+  <div
+    class="studio-data-previewer emotion-0"
+  >
+    <div
+      class="studio-data-previewer-empty emotion-1"
+    >
       <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+        class="studio-empty studio-empty-normal"
       >
         <div
-          class="studio-pro-card studio-pro-card-border"
+          class="studio-empty-image"
         >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
+          <svg
+            height="41"
+            viewBox="0 0 64 41"
+            width="64"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span
-              class="anticon studio-field-icon emotion-0"
-              role="img"
-              style="color: rgb(216, 193, 82);"
+            <g
+              fill="none"
+              fill-rule="evenodd"
+              transform="translate(0 1)"
             >
-              <svg
-                aria-hidden="true"
-                class="pro-editor-icon"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 897 516"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
+              <ellipse
+                cx="32"
+                cy="33"
+                fill="#f5f5f5"
+                rx="32"
+                ry="7"
+              />
+              <g
+                fill-rule="nonzero"
+                stroke="#d9d9d9"
               >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="TypeBoolArr-页面-1"
-                  stroke="none"
-                  stroke-width="1"
-                >
-                  <g
-                    fill="currentColor"
-                    fill-rule="nonzero"
-                    id="TypeBoolArr-icon-bool"
-                    transform="translate(0.900000, 0.000000)"
-                  >
-                    <path
-                      d="M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z M169,430.075 L169,83 L218.721,83 L218.721,205.354 L219.696,205.354 C225.221,197.229 231.802,190.974 239.439,186.586 C247.076,182.199 255.769,180.006 265.519,180.006 C277.542,180.006 286.885,182.118 293.547,186.343 C300.209,190.567 305.653,195.929 309.877,202.429 C313.127,207.629 315.24,214.453 316.214,222.903 C317.189,231.352 317.677,244.513 317.677,262.387 L317.677,356.468 C317.677,370.118 317.027,381.004 315.727,389.128 C314.427,397.253 312.315,404.077 309.39,409.602 C300.94,425.2 286.48,433 266.006,433 C253.656,433 244.232,430.563 237.733,425.688 C231.233,420.813 224.896,414.801 218.721,407.652 L218.721,430.075 L169,430.075 Z M267.955,258.975 C267.955,251.175 266.249,244.351 262.837,238.501 C259.425,232.651 253.007,229.727 243.582,229.727 C236.432,229.727 230.502,232.246 225.79,237.283 C221.078,242.32 218.721,248.738 218.721,256.538 L218.721,352.568 C218.721,361.668 220.996,369.061 225.546,374.748 C230.096,380.435 236.108,383.278 243.582,383.278 C252.032,383.278 258.206,380.191 262.106,374.017 C266.006,367.842 267.956,359.717 267.956,349.643 L267.956,258.975 L267.955,258.975 Z M333.345,265.799 C333.345,255.725 333.995,246.463 335.295,238.014 C336.595,229.564 339.032,222.09 342.607,215.591 C348.457,204.866 356.825,196.254 367.712,189.755 C378.598,183.255 391.842,180.005 407.44,180.005 C423.04,180.005 436.282,183.255 447.169,189.755 C458.055,196.255 466.423,204.866 472.273,215.591 C475.848,222.091 478.285,229.564 479.585,238.014 C480.885,246.464 481.535,255.725 481.535,265.799 L481.535,347.206 C481.535,357.28 480.885,366.542 479.585,374.992 C478.285,383.442 475.848,390.915 472.273,397.415 C466.423,408.139 458.055,416.751 447.169,423.251 C436.282,429.751 423.039,433 407.44,433 C391.841,433 378.598,429.75 367.712,423.25 C356.825,416.751 348.457,408.14 342.607,397.415 C339.032,390.915 336.595,383.441 335.295,374.992 C333.995,366.542 333.345,357.28 333.345,347.206 L333.345,265.8 L333.345,265.799 Z M383.067,355.006 C383.067,364.43 385.26,371.498 389.647,376.21 C394.035,380.922 399.966,383.279 407.44,383.279 C414.915,383.279 420.845,380.922 425.233,376.21 C429.62,371.498 431.813,364.43 431.813,355.006 L431.813,258 C431.813,248.576 429.62,241.507 425.233,236.795 C420.845,232.083 414.915,229.727 407.44,229.727 C399.966,229.727 394.035,232.083 389.648,236.795 C385.26,241.507 383.067,248.575 383.067,258 L383.067,355.006 L383.067,355.006 Z M492.816,265.799 C492.816,255.725 493.467,246.463 494.766,238.014 C496.066,229.564 498.503,222.09 502.078,215.591 C507.928,204.866 516.296,196.254 527.182,189.755 C538.069,183.255 551.312,180.005 566.911,180.005 C582.51,180.005 595.752,183.255 606.639,189.755 C617.526,196.255 625.894,204.866 631.744,215.591 C635.318,222.091 637.756,229.564 639.056,238.014 C640.356,246.464 641.006,255.725 641.006,265.799 L641.006,347.206 C641.006,357.28 640.356,366.542 639.056,374.992 C637.756,383.442 635.318,390.915 631.744,397.415 C625.894,408.139 617.526,416.751 606.639,423.251 C595.752,429.751 582.51,433 566.911,433 C551.311,433 538.069,429.75 527.182,423.25 C516.296,416.751 507.928,408.14 502.078,397.415 C498.503,390.915 496.066,383.441 494.766,374.992 C493.466,366.542 492.816,357.28 492.816,347.206 L492.816,265.8 L492.816,265.799 Z M542.537,355.006 C542.537,364.43 544.731,371.498 549.118,376.21 C553.506,380.922 559.436,383.279 566.911,383.279 C574.385,383.279 580.316,380.922 584.703,376.21 C589.091,371.498 591.284,364.43 591.284,355.006 L591.284,258 C591.284,248.576 589.091,241.507 584.704,236.795 C580.316,232.083 574.385,229.727 566.911,229.727 C559.436,229.727 553.506,232.083 549.118,236.795 C544.731,241.507 542.538,248.575 542.538,258 L542.538,355.006 L542.537,355.006 Z M653.75,83 L703.472,83 L703.472,360.368 C703.472,369.792 705.178,376.21 708.59,379.623 C712.002,383.035 718.42,385.228 727.845,386.203 L727.845,433 C716.471,433 706.235,432.106 697.135,430.319 C688.035,428.532 680.235,425.039 673.736,419.839 C667.236,414.964 662.281,408.059 658.869,399.121 C655.456,390.184 653.75,378.404 653.75,363.78 L653.75,83 Z"
-                      id="TypeBoolArr-形状"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </span>
+                <path
+                  d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                />
+                <path
+                  d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                  fill="#fafafa"
+                />
+              </g>
+            </g>
+          </svg>
+        </div>
+        <div
+          class="studio-empty-description"
+        >
+          <div>
+            这是一个空状态
           </div>
         </div>
       </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<DataPreviewer /> > renders showType.tsx correctly 1`] = `
+.emotion-0 {
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.emotion-0:hover {
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-2 {
+  padding: 6px 8px;
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
+}
+
+.emotion-3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 4px;
+}
+
+.emotion-5 {
+  height: 24px;
+  margin-left: -4px;
+  padding: 4px;
+  border-radius: 4px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  -webkit-transition: 150ms background-color ease-in-out;
+  transition: 150ms background-color ease-in-out;
+}
+
+.emotion-5:hover {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-8:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-8:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 4px;
+}
+
+.emotion-13 {
+  border-radius: 4px;
+}
+
+.emotion-13 .json-viewer-theme-dark {
+  background: none!important;
+}
+
+.emotion-14 {
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.87);
+  -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 4px;
+  box-shadow: none;
+  background-color: rgba(0, 0, 0, 0);
+  font-family: monospace;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  content-visibility: auto;
+}
+
+.emotion-15 {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+.emotion-16 {
+  display: inline-block;
+  line-height: 1.5;
+  color: #002b36;
+  letter-spacing: 0.5px;
+  opacity: 0.8;
+}
+
+.emotion-17 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  fill: currentColor;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-size: 1.5rem;
+  font-size: .8rem;
+}
+
+.emotion-17:hover {
+  cursor: pointer;
+}
+
+.emotion-19 {
+  display: inline-block;
+  margin-right: 4px;
+}
+
+.emotion-20 {
+  letter-spacing: 0.5px;
+}
+
+.emotion-21 {
+  padding-left: 4px;
+  font-style: italic;
+  color: rgba(0, 0, 0, 0.3);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-22 {
+  display: block;
+  padding-left: 14.399999999999999px;
+  margin-left: 4.8px;
+  color: #002b36;
+  border-left: 1px solid rgb(235, 235, 235);
+}
+
+.emotion-27 {
+  display: inline-block;
+  color: #268bd2;
+}
+
+.emotion-28 {
+  display: inline-block;
+}
+
+.emotion-39 {
+  display: inline-block;
+  color: #cb4b16;
+}
+
+.emotion-41 {
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+
+.emotion-42 {
+  padding: 4px;
+}
+
+.emotion-66 {
+  overflow-wrap: anywhere;
+  cursor: inherit;
+}
+
+.emotion-87 {
+  display: inline-block;
+  color: #2aa198;
+}
+
+.emotion-113 {
+  display: inline-block;
+  color: #d33682;
+}
+
+.emotion-115 {
+  font-size: 0.8rem;
+  background-color: rgb(235, 235, 235);
+  font-weight: 700;
+  border-radius: 3px;
+  padding: 0.5px 2px;
+}
+
+.emotion-139 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+<div>
+  <div
+    class="studio-data-previewer emotion-0"
+  >
+    <div
+      class="layoutkit-flexbox emotion-1 studio-collapse-title emotion-2"
+    >
       <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+        class="layoutkit-flexbox emotion-3 studio-collapse-title-expand"
       >
         <div
-          class="studio-pro-card studio-pro-card-border"
+          class="layoutkit-flexbox emotion-4 emotion-5"
         >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
+          <span
+            aria-label="caret-right"
+            class="anticon anticon-caret-right"
+            role="img"
+            style="font-size: 10px;"
           >
-            <span
-              class="anticon studio-field-icon emotion-0"
-              role="img"
-              style="color: rgb(82, 149, 196);"
+            <svg
+              aria-hidden="true"
+              data-icon="caret-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              style="transform: rotate(90deg);"
+              viewBox="0 0 1024 1024"
+              width="1em"
             >
-              <svg
-                aria-hidden="true"
-                class="pro-editor-icon"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 897 496"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="TypeNum-页面-1"
-                  stroke="none"
-                  stroke-width="1"
-                >
-                  <g
-                    fill="currentColor"
-                    fill-rule="nonzero"
-                    id="TypeNum-icon-icon-test3"
-                    transform="translate(0.500000, -0.000000)"
-                  >
-                    <path
-                      d="M99.31,99.994 L0,186.29 L0,90.406 L99.31,4.109 L188.345,4.109 L188.345,491.751 L99.309,491.751 L99.309,99.994 L99.31,99.994 Z M263.194,411.619 L445.374,199.989 C454.507,189.486 461.127,179.898 465.236,171.223 C469.346,162.547 471.4,152.503 471.4,141.087 C471.4,122.824 466.378,108.099 456.333,96.912 C446.288,85.725 431.677,80.132 412.5,80.132 C404.738,80.132 397.318,81.16 390.24,83.214 C383.164,85.269 376.771,88.694 371.064,93.488 C365.357,98.282 360.791,104.674 357.366,112.665 C353.942,120.655 352.229,130.585 352.229,142.457 L263.194,142.457 C263.194,120.084 267.074,100.108 274.837,82.529 C282.599,64.95 293.215,49.997 306.684,37.669 C320.154,25.341 335.906,15.981 353.942,9.589 C371.977,3.195 391.496,5.68434189e-14 412.5,5.68434189e-14 C433.96,5.68434189e-14 453.821,3.31 472.085,9.93 C490.349,16.552 505.987,25.912 519,38.011 C532.013,50.111 542.172,64.951 549.478,82.529 C556.783,100.109 560.436,119.856 560.436,141.772 C560.436,153.644 559.295,164.26 557.012,173.62 C554.748868,182.927687 551.295766,191.904944 546.738,200.33 C542.172,208.778 536.579,217.339 529.958,226.014 C523.338,234.689 515.918,243.821 507.7,253.41 L371.406,411.62 L560.436,411.62 L560.436,491.751 L263.194,491.751 L263.194,411.62 L263.194,411.619 Z M741.214,495.861 C721.124,495.861 701.834,493.121 683.341,487.642 C664.849,482.163 648.412,473.602 634.029,461.959 C619.647,450.316 608.118,435.476 599.442,417.441 C590.767,399.405 586.202,377.603 585.745,352.034 L674.78,352.034 C675.237,362.992 677.292,372.466 680.944,380.457 C684.597,388.447 689.391,395.067 695.327,400.319 C701.263,405.569 708.226,409.45 716.217,411.962 C724.207,414.473 732.539,415.729 741.215,415.729 C760.392,415.729 776.145,410.021 788.472,398.606 C800.8,387.191 806.964,370.298 806.964,347.924 C806.964,327.378 801.029,311.054 789.157,298.954 C777.286,286.855 760.392,280.805 738.475,280.805 L725.462,280.805 L725.462,203.413 L738.475,203.413 C760.392,203.413 776.145,197.591 785.733,185.948 C795.321,174.305 800.115,159.808 800.115,142.458 C800.115,121.91 794.18,106.386 782.308,95.885 C770.437,85.383 756.511,80.132 740.53,80.132 C723.636,80.132 709.596,85.269 698.41,95.542 C687.222,105.816 681.173,120.312 680.26,139.032 L591.224,139.032 C591.68,117.116 595.904,97.597 603.894,80.475 C611.884,63.352 622.614,48.741 636.084,36.642 C649.554,24.542 665.192,15.41 682.999,9.246 C700.806,3.082 719.983,0 740.529,0 C761.989,0 781.851,3.424 800.115,10.273 C818.379,17.123 834.131,26.711 847.373,39.039 C860.614,51.367 870.887,66.092 878.193,83.214 C885.498,100.337 889.151,119.171 889.151,139.718 C889.151,166.2 883.786,187.318 873.056,203.07 C862.326,218.823 848.971,231.036 832.99,239.712 C850.797,248.844 865.75,262.199 877.85,279.778 C889.95,297.357 896,320.985 896,350.664 C896,374.864 891.89,396.095 883.672,414.359 C875.453,432.623 864.267,447.804 850.112,459.904 C835.958,472.004 819.521,481.021 800.8,486.957 C782.08,492.893 762.218,495.861 741.215,495.861 L741.214,495.861 Z"
-                      id="TypeNum-形状"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </span>
+              <path
+                d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"
+              />
+            </svg>
+          </span>
+          <div>
+            数据预览
           </div>
         </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
         <div
-          class="studio-pro-card studio-pro-card-border"
+          class="layoutkit-flexbox emotion-6"
         >
           <div
-            class="studio-pro-card-body studio-pro-card-body-center"
+            class="layoutkit-flexbox emotion-1"
           >
-            <span
-              class="anticon studio-field-icon emotion-0"
-              role="img"
-              style="color: rgb(35, 155, 239);"
+            <button
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-8"
+              type="button"
             >
-              <svg
-                aria-hidden="true"
-                class="pro-editor-icon"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 897 516"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
+              <span
+                class="studio-btn-icon"
               >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="TypeNumArr-页面-1"
-                  stroke="none"
-                  stroke-width="1"
+                <span
+                  aria-label="table"
+                  class="anticon anticon-table"
+                  role="img"
                 >
-                  <g
+                  <svg
+                    aria-hidden="true"
+                    data-icon="table"
                     fill="currentColor"
-                    fill-rule="nonzero"
-                    id="TypeNumArr-icon-icon-test1"
-                    transform="translate(0.500000, 0.000000)"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
                   >
                     <path
-                      d="M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z M223.088,162.53 L159,218.221 L159,156.343 L223.088,100.652 L280.547,100.652 L280.547,415.348 L223.088,415.348 L223.088,162.53 L223.088,162.53 Z M328.85,363.635 L446.42,227.061 C452.312,220.284 456.585,214.096 459.237,208.497 C461.889,202.899 463.215,196.417 463.215,189.05 C463.215,177.263 459.973,167.76 453.491,160.541 C447.008,153.322 437.579,149.713 425.204,149.713 C420.194,149.713 415.406,150.376 410.839,151.702 C406.272,153.028 402.147,155.238 398.463,158.332 C394.78,161.425 391.833,165.551 389.623,170.707 C387.413,175.864 386.309,182.273 386.309,189.934 L328.85,189.934 C328.85,175.495 331.355,162.604 336.364,151.26 C341.374,139.915 348.224,130.265 356.916,122.31 C365.609,114.354 375.774,108.313 387.414,104.188 C399.053,100.063 411.649,98 425.204,98 C439.053,98 451.87,100.136 463.657,104.409 C475.443,108.681 485.535,114.722 493.933,122.53 C502.331,130.339 508.887,139.915 513.601,151.26 C518.316,162.604 520.674,175.348 520.674,189.492 C520.674,197.152 519.937,204.004 518.463,210.044 C517.002664,216.050947 514.774313,221.84466 511.833,227.282 C508.887,232.733 505.277,238.258 501.005,243.856 C496.732,249.455 491.944,255.348 486.64,261.536 L398.684,363.636 L520.674,363.636 L520.674,415.348 L328.85,415.348 L328.85,363.635 Z M637.337,418 C624.372,418 611.923,416.232 599.989,412.696 C588.055,409.16 577.448,403.636 568.166,396.122 C558.884,388.608 551.444,379.032 545.846,367.392 C540.247,355.753 537.3,341.683 537.006,325.182 L594.464,325.182 C594.759,332.254 596.085,338.368 598.442,343.525 C600.8,348.681 603.893,352.954 607.724,356.343 C611.554,359.731 616.048,362.236 621.204,363.856 C626.361,365.477 631.739,366.287 637.337,366.287 C649.713,366.287 659.879,362.604 667.835,355.237 C675.79,347.871 679.768,336.969 679.768,322.53 C679.768,309.27 675.938,298.737 668.277,290.928 C660.615,283.12 649.713,279.215 635.569,279.215 L627.172,279.215 L627.172,229.271 L635.569,229.271 C649.713,229.271 659.879,225.514 666.067,218 C672.254,210.486 675.348,201.13 675.348,189.934 C675.348,176.674 671.518,166.656 663.857,159.878 C656.195,153.101 647.208,149.713 636.895,149.713 C625.993,149.713 616.932,153.028 609.713,159.657 C602.493,166.287 598.59,175.643 598,187.724 L540.542,187.724 C540.836,173.58 543.562,160.984 548.718,149.934 C553.875,138.884 560.799,129.454 569.492,121.646 C578.184,113.838 588.276,107.945 599.768,103.966 C611.26,99.99 623.636,98 636.895,98 C650.745,98 663.562,100.21 675.348,104.63 C687.135,109.05 697.3,115.238 705.846,123.193 C714.391,131.149 721.02,140.652 725.736,151.702 C730.45,162.752 732.806,174.906 732.806,188.166 C732.806,205.256 729.345,218.884 722.42,229.05 C715.496,239.216 706.877,247.098 696.564,252.696 C708.056,258.589 717.706,267.208 725.514,278.552 C733.323,289.897 737.227,305.145 737.227,324.298 C737.227,339.915 734.575,353.617 729.271,365.403 C723.967,377.19 716.748,386.987 707.614,394.796 C698.479,402.604 687.871,408.424 675.79,412.254 C663.71,416.084 650.892,418 637.337,418 L637.337,418 Z"
-                      id="TypeNumArr-形状"
+                      d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 208H676V232h212v136zm0 224H676V432h212v160zM412 432h200v160H412V432zm200-64H412V232h200v136zm-476 64h212v160H136V432zm0-200h212v136H136V232zm0 424h212v136H136V656zm276 0h200v136H412V656zm476 136H676V656h212v136z"
                     />
-                  </g>
-                </g>
-              </svg>
-            </span>
+                  </svg>
+                </span>
+              </span>
+            </button>
           </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
-        <div
-          class="studio-pro-card studio-pro-card-border"
-        >
           <div
-            class="studio-pro-card-body studio-pro-card-body-center"
+            class="studio-divider studio-divider-vertical studio-divider-dashed"
+            role="separator"
+            style="margin: 0px 4px;"
+          />
+          <div
+            class="layoutkit-flexbox emotion-9"
           >
-            <span
-              class="anticon studio-field-icon emotion-0"
-              role="img"
-              style="color: rgb(82, 149, 196);"
+            <button
+              class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-8"
+              type="button"
             >
-              <svg
-                aria-hidden="true"
-                class="pro-editor-icon"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 897 496"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
+              <span
+                class="studio-btn-icon"
               >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="TypeNum-页面-1"
-                  stroke="none"
-                  stroke-width="1"
+                <span
+                  aria-label="rollback"
+                  class="anticon anticon-rollback"
+                  role="img"
                 >
-                  <g
+                  <svg
+                    aria-hidden="true"
+                    data-icon="rollback"
                     fill="currentColor"
-                    fill-rule="nonzero"
-                    id="TypeNum-icon-icon-test3"
-                    transform="translate(0.500000, -0.000000)"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
                   >
                     <path
-                      d="M99.31,99.994 L0,186.29 L0,90.406 L99.31,4.109 L188.345,4.109 L188.345,491.751 L99.309,491.751 L99.309,99.994 L99.31,99.994 Z M263.194,411.619 L445.374,199.989 C454.507,189.486 461.127,179.898 465.236,171.223 C469.346,162.547 471.4,152.503 471.4,141.087 C471.4,122.824 466.378,108.099 456.333,96.912 C446.288,85.725 431.677,80.132 412.5,80.132 C404.738,80.132 397.318,81.16 390.24,83.214 C383.164,85.269 376.771,88.694 371.064,93.488 C365.357,98.282 360.791,104.674 357.366,112.665 C353.942,120.655 352.229,130.585 352.229,142.457 L263.194,142.457 C263.194,120.084 267.074,100.108 274.837,82.529 C282.599,64.95 293.215,49.997 306.684,37.669 C320.154,25.341 335.906,15.981 353.942,9.589 C371.977,3.195 391.496,5.68434189e-14 412.5,5.68434189e-14 C433.96,5.68434189e-14 453.821,3.31 472.085,9.93 C490.349,16.552 505.987,25.912 519,38.011 C532.013,50.111 542.172,64.951 549.478,82.529 C556.783,100.109 560.436,119.856 560.436,141.772 C560.436,153.644 559.295,164.26 557.012,173.62 C554.748868,182.927687 551.295766,191.904944 546.738,200.33 C542.172,208.778 536.579,217.339 529.958,226.014 C523.338,234.689 515.918,243.821 507.7,253.41 L371.406,411.62 L560.436,411.62 L560.436,491.751 L263.194,491.751 L263.194,411.62 L263.194,411.619 Z M741.214,495.861 C721.124,495.861 701.834,493.121 683.341,487.642 C664.849,482.163 648.412,473.602 634.029,461.959 C619.647,450.316 608.118,435.476 599.442,417.441 C590.767,399.405 586.202,377.603 585.745,352.034 L674.78,352.034 C675.237,362.992 677.292,372.466 680.944,380.457 C684.597,388.447 689.391,395.067 695.327,400.319 C701.263,405.569 708.226,409.45 716.217,411.962 C724.207,414.473 732.539,415.729 741.215,415.729 C760.392,415.729 776.145,410.021 788.472,398.606 C800.8,387.191 806.964,370.298 806.964,347.924 C806.964,327.378 801.029,311.054 789.157,298.954 C777.286,286.855 760.392,280.805 738.475,280.805 L725.462,280.805 L725.462,203.413 L738.475,203.413 C760.392,203.413 776.145,197.591 785.733,185.948 C795.321,174.305 800.115,159.808 800.115,142.458 C800.115,121.91 794.18,106.386 782.308,95.885 C770.437,85.383 756.511,80.132 740.53,80.132 C723.636,80.132 709.596,85.269 698.41,95.542 C687.222,105.816 681.173,120.312 680.26,139.032 L591.224,139.032 C591.68,117.116 595.904,97.597 603.894,80.475 C611.884,63.352 622.614,48.741 636.084,36.642 C649.554,24.542 665.192,15.41 682.999,9.246 C700.806,3.082 719.983,0 740.529,0 C761.989,0 781.851,3.424 800.115,10.273 C818.379,17.123 834.131,26.711 847.373,39.039 C860.614,51.367 870.887,66.092 878.193,83.214 C885.498,100.337 889.151,119.171 889.151,139.718 C889.151,166.2 883.786,187.318 873.056,203.07 C862.326,218.823 848.971,231.036 832.99,239.712 C850.797,248.844 865.75,262.199 877.85,279.778 C889.95,297.357 896,320.985 896,350.664 C896,374.864 891.89,396.095 883.672,414.359 C875.453,432.623 864.267,447.804 850.112,459.904 C835.958,472.004 819.521,481.021 800.8,486.957 C782.08,492.893 762.218,495.861 741.215,495.861 L741.214,495.861 Z"
-                      id="TypeNum-形状"
+                      d="M793 242H366v-74c0-6.7-7.7-10.4-12.9-6.3l-142 112a8 8 0 000 12.6l142 112c5.2 4.1 12.9.4 12.9-6.3v-74h415v470H175c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-28.7 64-64V306c0-35.3-28.7-64-64-64z"
                     />
-                  </g>
-                </g>
-              </svg>
-            </span>
+                  </svg>
+                </span>
+              </span>
+            </button>
           </div>
         </div>
       </div>
       <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+        class="studio-divider studio-divider-horizontal studio-divider-dashed"
+        role="separator"
+        style="margin: 4px 0px 12px;"
+      />
+      <div
+        class="layoutkit-flexbox emotion-1"
       >
         <div
-          class="studio-pro-card studio-pro-card-border"
+          class="layoutkit-flexbox emotion-1 studio-data-previewer-json emotion-13"
+          style="overflow: scroll; max-height: 200px; margin-bottom: 8px;"
         >
           <div
-            class="studio-pro-card-body studio-pro-card-body-center"
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 json-viewer-theme-light emotion-14"
           >
-            <span
-              class="anticon studio-field-icon emotion-0"
-              role="img"
-              style="color: rgb(35, 155, 239);"
+            <div
+              class="data-key-pair MuiBox-root emotion-15"
+              data-testid="data-key-pair"
             >
-              <svg
-                aria-hidden="true"
-                class="pro-editor-icon"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 897 516"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
+              <span
+                class="data-key MuiBox-root emotion-16"
               >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="TypeNumArr-页面-1"
-                  stroke="none"
-                  stroke-width="1"
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-17"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                  />
+                </svg>
+                <span
+                  class="MuiBox-root emotion-18"
+                >
+                  "
+                  第1条数据
+                  "
+                </span>
+                <div
+                  class="MuiBox-root emotion-19"
+                >
+                  :
+                </div>
+                <span
+                  class="data-object-start MuiBox-root emotion-20"
+                >
+                  {
+                  <span
+                    class="MuiBox-root emotion-21"
+                  >
+                    13 Items
+                  </span>
+                </span>
+              </span>
+              <div
+                class="data-object MuiBox-root emotion-22"
+              >
+                <div
+                  class="data-key-pair MuiBox-root emotion-15"
+                  data-testid="data-key-pairid"
+                >
+                  <span
+                    class="data-key MuiBox-root emotion-16"
+                  >
+                    <span
+                      class="MuiBox-root emotion-18"
+                    >
+                      "
+                      id
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-19"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-27"
+                  >
+                    <div
+                      class="int-value MuiBox-root emotion-28"
+                    >
+                      624748504
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-15"
+                  data-testid="data-key-pairnumber"
+                >
+                  <span
+                    class="data-key MuiBox-root emotion-16"
+                  >
+                    <span
+                      class="MuiBox-root emotion-18"
+                    >
+                      "
+                      number
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-19"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-27"
+                  >
+                    <div
+                      class="int-value MuiBox-root emotion-28"
+                    >
+                      6689
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-15"
+                  data-testid="data-key-pairtitle"
+                >
+                  <span
+                    class="data-key MuiBox-root emotion-16"
+                  >
+                    <span
+                      class="MuiBox-root emotion-18"
+                    >
+                      "
+                      title
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-19"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-39"
+                  >
+                    <div
+                      class="string-value MuiBox-root emotion-28"
+                    >
+                      <span
+                        class="MuiBox-root emotion-41"
+                      >
+                        "
+                        🐛 [BUG]yarn install命令
+                        <span
+                          class="MuiBox-root emotion-42"
+                        >
+                          …
+                        </span>
+                        "
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-15"
+                  data-testid="data-key-pairlabels"
                 >
-                  <g
-                    fill="currentColor"
-                    fill-rule="nonzero"
-                    id="TypeNumArr-icon-icon-test1"
-                    transform="translate(0.500000, 0.000000)"
+                  <span
+                    class="data-key MuiBox-root emotion-16"
                   >
-                    <path
-                      d="M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z M223.088,162.53 L159,218.221 L159,156.343 L223.088,100.652 L280.547,100.652 L280.547,415.348 L223.088,415.348 L223.088,162.53 L223.088,162.53 Z M328.85,363.635 L446.42,227.061 C452.312,220.284 456.585,214.096 459.237,208.497 C461.889,202.899 463.215,196.417 463.215,189.05 C463.215,177.263 459.973,167.76 453.491,160.541 C447.008,153.322 437.579,149.713 425.204,149.713 C420.194,149.713 415.406,150.376 410.839,151.702 C406.272,153.028 402.147,155.238 398.463,158.332 C394.78,161.425 391.833,165.551 389.623,170.707 C387.413,175.864 386.309,182.273 386.309,189.934 L328.85,189.934 C328.85,175.495 331.355,162.604 336.364,151.26 C341.374,139.915 348.224,130.265 356.916,122.31 C365.609,114.354 375.774,108.313 387.414,104.188 C399.053,100.063 411.649,98 425.204,98 C439.053,98 451.87,100.136 463.657,104.409 C475.443,108.681 485.535,114.722 493.933,122.53 C502.331,130.339 508.887,139.915 513.601,151.26 C518.316,162.604 520.674,175.348 520.674,189.492 C520.674,197.152 519.937,204.004 518.463,210.044 C517.002664,216.050947 514.774313,221.84466 511.833,227.282 C508.887,232.733 505.277,238.258 501.005,243.856 C496.732,249.455 491.944,255.348 486.64,261.536 L398.684,363.636 L520.674,363.636 L520.674,415.348 L328.85,415.348 L328.85,363.635 Z M637.337,418 C624.372,418 611.923,416.232 599.989,412.696 C588.055,409.16 577.448,403.636 568.166,396.122 C558.884,388.608 551.444,379.032 545.846,367.392 C540.247,355.753 537.3,341.683 537.006,325.182 L594.464,325.182 C594.759,332.254 596.085,338.368 598.442,343.525 C600.8,348.681 603.893,352.954 607.724,356.343 C611.554,359.731 616.048,362.236 621.204,363.856 C626.361,365.477 631.739,366.287 637.337,366.287 C649.713,366.287 659.879,362.604 667.835,355.237 C675.79,347.871 679.768,336.969 679.768,322.53 C679.768,309.27 675.938,298.737 668.277,290.928 C660.615,283.12 649.713,279.215 635.569,279.215 L627.172,279.215 L627.172,229.271 L635.569,229.271 C649.713,229.271 659.879,225.514 666.067,218 C672.254,210.486 675.348,201.13 675.348,189.934 C675.348,176.674 671.518,166.656 663.857,159.878 C656.195,153.101 647.208,149.713 636.895,149.713 C625.993,149.713 616.932,153.028 609.713,159.657 C602.493,166.287 598.59,175.643 598,187.724 L540.542,187.724 C540.836,173.58 543.562,160.984 548.718,149.934 C553.875,138.884 560.799,129.454 569.492,121.646 C578.184,113.838 588.276,107.945 599.768,103.966 C611.26,99.99 623.636,98 636.895,98 C650.745,98 663.562,100.21 675.348,104.63 C687.135,109.05 697.3,115.238 705.846,123.193 C714.391,131.149 721.02,140.652 725.736,151.702 C730.45,162.752 732.806,174.906 732.806,188.166 C732.806,205.256 729.345,218.884 722.42,229.05 C715.496,239.216 706.877,247.098 696.564,252.696 C708.056,258.589 717.706,267.208 725.514,278.552 C733.323,289.897 737.227,305.145 737.227,324.298 C737.227,339.915 734.575,353.617 729.271,365.403 C723.967,377.19 716.748,386.987 707.614,394.796 C698.479,402.604 687.871,408.424 675.79,412.254 C663.71,416.084 650.892,418 637.337,418 L637.337,418 Z"
-                      id="TypeNumArr-形状"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
-        <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <span
-              class="anticon studio-field-icon emotion-0"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                class="pro-editor-icon"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 1024 1024"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="TypeObj-type-obj"
-                  stroke="none"
-                  stroke-width="1"
-                >
-                  <g
-                    fill="currentColor"
-                    fill-rule="nonzero"
-                    id="TypeObj-编组"
-                    transform="translate(271.000000, 254.000000)"
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-17"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                      />
+                    </svg>
+                    <span
+                      class="MuiBox-root emotion-18"
+                    >
+                      "
+                      labels
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-19"
+                    >
+                      :
+                    </div>
+                    <span
+                      class="data-object-start MuiBox-root emotion-20"
+                    >
+                      [
+                      <span
+                        class="MuiBox-root emotion-21"
+                      >
+                        1 Items
+                      </span>
+                    </span>
+                  </span>
+                  <div
+                    class="data-object MuiBox-root emotion-22"
                   >
-                    <path
-                      d="M305,444 L334.355,444 C340.495,444 345.387,441.8 349.032,437.4 C352.677,433 354.5,428 354.5,422.4 L354.5,318 C354.5,306.8 355.939,297.6 358.817,290.4 C361.695,283.2 365.244,277.4 369.465,273 C373.686,268.6 377.907,265.4 382.128,263.4 C386.348,261.4 391.145,259.6 396.518,258 C391.145,256.4 386.253,254.5 381.84,252.3 C377.427,250.1 373.302,247 369.465,243 C365.628,239 362.175,233.3 359.105,225.9 C356.035,218.5 354.5,209.2 354.5,198 L354.5,93.6 C354.5,88 352.677,83 349.032,78.6 C345.387,74.2 340.494,72 334.355,72 L305,72 L305,0 L351.622,0 C362.366,0 372.727,1.8 382.703,5.4 C392.68,9 401.506,14.8 409.18,22.8 C415.704,29.6 421.076,38.3 425.297,48.9 C429.517,59.5 431.627,72.2 431.627,87 L431.627,200.4 C431.627,206 433.451,211 437.096,215.4 C440.741,219.8 445.634,222 451.773,222 L481.128,222 L481.128,294 L451.773,294 C445.633,294 440.741,296.2 437.096,300.6 C433.451,305 431.628,310 431.628,315.6 L431.628,429 C431.628,443.8 429.518,456.5 425.297,467.1 C421.076,477.7 415.704,486.4 409.18,493.2 C401.506,501.2 392.68,507 382.703,510.6 C372.727,514.2 362.366,516 351.623,516 L305,516 L305,444 Z M176.128,444 L146.773,444 C140.633,444 135.741,441.8 132.096,437.4 C128.451,433 126.628,428 126.628,422.4 L126.628,318 C126.628,306.8 125.189,297.6 122.311,290.4 C119.433,283.2 115.884,277.4 111.663,273 C107.442,268.6 103.221,265.4 99,263.4 C94.779,261.4 89.983,259.6 84.61,258 C89.983,256.4 94.875,254.5 99.288,252.3 C103.701,250.1 107.826,247 111.663,243 C115.5,239 118.953,233.3 122.023,225.9 C125.093,218.5 126.628,209.2 126.628,198 L126.628,93.6 C126.628,88 128.451,83 132.096,78.6 C135.741,74.2 140.634,72 146.773,72 L176.128,72 L176.128,0 L129.506,0 C118.762,0 108.401,1.8 98.424,5.4 C88.448,9 79.622,14.8 71.948,22.8 C65.424,29.6 60.052,38.3 55.831,48.9 C51.611,59.5 49.5,72.2 49.5,87 L49.5,200.4 C49.5,206 47.677,211 44.032,215.4 C40.387,219.8 35.494,222 29.355,222 L0,222 L0,294 L29.355,294 C35.495,294 40.387,296.2 44.032,300.6 C47.677,305 49.5,310 49.5,315.6 L49.5,429 C49.5,443.8 51.61,456.5 55.831,467.1 C60.052,477.7 65.424,486.4 71.948,493.2 C79.622,501.2 88.448,507 98.424,510.6 C108.401,514.2 118.762,516 129.506,516 L176.128,516 L176.128,444 L176.128,444 Z"
-                      id="TypeObj-形状"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
-        <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <span
-              class="anticon studio-field-icon emotion-0"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                class="pro-editor-icon"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 656 381"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="TypeObjArr-页面-1"
-                  stroke="none"
-                  stroke-width="1"
+                    <div
+                      class="data-key-pair MuiBox-root emotion-15"
+                      data-testid="data-key-pairlabels.0"
+                    >
+                      <span
+                        class="data-key MuiBox-root emotion-16"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-17"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                          />
+                        </svg>
+                        <span
+                          class="MuiBox-root emotion-18"
+                        >
+                          <span
+                            class="MuiBox-root emotion-18"
+                            style="color: rgb(108, 113, 196);"
+                          >
+                            0
+                          </span>
+                        </span>
+                        <div
+                          class="MuiBox-root emotion-19"
+                        >
+                          :
+                        </div>
+                        <span
+                          class="data-object-start MuiBox-root emotion-20"
+                        >
+                          {
+                          <span
+                            class="MuiBox-root emotion-21"
+                          >
+                            2 Items
+                          </span>
+                        </span>
+                      </span>
+                      <div
+                        class="data-object MuiBox-root emotion-22"
+                      >
+                        <div
+                          class="data-key-pair MuiBox-root emotion-15"
+                          data-testid="data-key-pairlabels.0.name"
+                        >
+                          <span
+                            class="data-key MuiBox-root emotion-16"
+                          >
+                            <span
+                              class="MuiBox-root emotion-18"
+                            >
+                              "
+                              name
+                              "
+                            </span>
+                            <div
+                              class="MuiBox-root emotion-19"
+                            >
+                              :
+                            </div>
+                          </span>
+                          <div
+                            class="MuiBox-root emotion-39"
+                          >
+                            <div
+                              class="string-value MuiBox-root emotion-28"
+                            >
+                              <span
+                                class="MuiBox-root emotion-66"
+                              >
+                                "
+                                bug
+                                "
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="data-key-pair MuiBox-root emotion-15"
+                          data-testid="data-key-pairlabels.0.color"
+                        >
+                          <span
+                            class="data-key MuiBox-root emotion-16"
+                          >
+                            <span
+                              class="MuiBox-root emotion-18"
+                            >
+                              "
+                              color
+                              "
+                            </span>
+                            <div
+                              class="MuiBox-root emotion-19"
+                            >
+                              :
+                            </div>
+                          </span>
+                          <div
+                            class="MuiBox-root emotion-39"
+                          >
+                            <div
+                              class="string-value MuiBox-root emotion-28"
+                            >
+                              <span
+                                class="MuiBox-root emotion-66"
+                              >
+                                "
+                                error
+                                "
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <span
+                        class="data-object-end MuiBox-root emotion-18"
+                      >
+                        }
+                      </span>
+                    </div>
+                  </div>
+                  <span
+                    class="data-object-end MuiBox-root emotion-18"
+                  >
+                    ]
+                  </span>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-15"
+                  data-testid="data-key-pairstate"
                 >
-                  <g
-                    fill="currentColor"
-                    fill-rule="nonzero"
-                    id="TypeObjArr-icon-icon-test4"
-                    transform="translate(0.228000, 0.125000)"
+                  <span
+                    class="data-key MuiBox-root emotion-16"
                   >
-                    <path
-                      d="M103.855,53.023 L60.245,53.023 L60.245,326.977 L103.855,326.977 L103.855,380 L0,380 L0,0 L103.855,0 L103.855,53.023 Z M551.145,53.023 L551.145,0 L655,0 L655,380 L551.145,380 L551.145,326.977 L594.755,326.977 L594.755,53.023 L551.145,53.023 Z M389,326.977 L410.991,326.977 C415.591,326.977 419.256,325.357 421.987,322.117 C424.717,318.876 426.083,315.194 426.083,311.07 L426.083,234.186 C426.083,225.938 427.161,219.163 429.317,213.86 C431.473,208.558 434.132,204.287 437.294,201.047 C440.456,197.807 443.618,195.45 446.78,193.977 C449.942,192.504 453.535,191.178 457.56,190 C453.535,188.822 449.87,187.422 446.565,185.802 C443.259,184.182 440.168,181.899 437.294,178.953 C434.419,176.008 431.833,171.81 429.533,166.36 C427.233,160.91 426.083,154.062 426.083,145.814 L426.083,68.93 C426.083,64.806 424.717,61.124 421.987,57.884 C419.256,54.644 415.59,53.024 410.991,53.024 L389,53.024 L389,0 L423.927,0 C431.976,0 439.737,1.326 447.211,3.977 C454.685,6.627 461.297,10.899 467.046,16.791 C471.934,21.798 475.958,28.205 479.12,36.011 C482.282,43.818 483.862,53.171 483.862,64.07 L483.862,147.581 C483.862,151.705 485.229,155.388 487.96,158.628 C490.69,161.868 494.356,163.488 498.955,163.488 L520.946,163.488 L520.946,216.512 L498.955,216.512 C494.355,216.512 490.69,218.132 487.96,221.372 C485.229,224.612 483.863,228.295 483.863,232.419 L483.863,315.93 C483.863,326.83 482.283,336.182 479.12,343.988 C475.958,351.795 471.934,358.202 467.046,363.209 C461.297,369.101 454.686,373.372 447.211,376.023 C439.738,378.674 431.976,380 423.928,380 L389,380 L389,326.977 Z M265.947,326.977 L265.947,380 L231.019,380 C222.97,380 215.209,378.674 207.734,376.023 C200.261,373.373 193.649,369.101 187.9,363.209 C183.012,358.202 178.988,351.795 175.826,343.989 C172.664,336.182 171.083,326.829 171.083,315.93 L171.083,232.42 C171.083,228.296 169.717,224.613 166.987,221.373 C164.256,218.133 160.591,216.513 155.991,216.513 L134,216.513 L134,163.489 L155.991,163.489 C160.591,163.489 164.256,161.869 166.987,158.629 C169.717,155.389 171.083,151.706 171.083,147.582 L171.083,64.07 C171.083,53.17 172.664,43.818 175.826,36.012 C178.988,28.205 183.012,21.798 187.9,16.791 C193.649,10.899 200.26,6.628 207.734,3.977 C215.208,1.326 222.97,0 231.02,0 L265.947,0 L265.947,53.023 L243.956,53.023 C239.356,53.023 235.691,54.643 232.961,57.883 C230.23,61.124 228.864,64.806 228.864,68.93 L228.864,145.814 C228.864,154.062 227.714,160.911 225.414,166.36 C223.114,171.81 220.528,176.008 217.654,178.953 C214.779,181.899 211.688,184.183 208.382,185.803 C205.076,187.423 201.412,188.822 197.386,190 C201.412,191.178 205.005,192.504 208.166,193.977 C211.329,195.45 214.491,197.807 217.653,201.047 C220.815,204.287 223.474,208.558 225.63,213.86 C227.786,219.163 228.864,225.938 228.864,234.186 L228.864,311.07 C228.864,315.194 230.23,318.876 232.961,322.116 C235.691,325.356 239.356,326.976 243.956,326.976 L265.947,326.976 L265.947,326.977 Z"
-                      id="TypeObjArr-形状"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
-        <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <span
-              class="anticon studio-field-icon emotion-0"
-              role="img"
-              style="color: rgb(20, 158, 109);"
-            >
-              <svg
-                aria-hidden="true"
-                class="pro-editor-icon"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 897 496"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="TypeSting-页面-1"
-                  stroke="none"
-                  stroke-width="1"
+                    <span
+                      class="MuiBox-root emotion-18"
+                    >
+                      "
+                      state
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-19"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-39"
+                  >
+                    <div
+                      class="string-value MuiBox-root emotion-28"
+                    >
+                      <span
+                        class="MuiBox-root emotion-66"
+                      >
+                        "
+                        open
+                        "
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-15"
+                  data-testid="data-key-pairlocked"
                 >
-                  <g
-                    fill="currentColor"
-                    fill-rule="nonzero"
-                    id="TypeSting-icon-Abc1"
-                    transform="translate(0.228000, 0.000000)"
+                  <span
+                    class="data-key MuiBox-root emotion-16"
                   >
-                    <path
-                      d="M376.221,490.077 L288.895,490.077 L263.773,403.35 L113.046,403.35 L87.326,490.077 L5.68434189e-14,490.077 L155.513,0 L220.708,0 L376.221,490.077 Z M136.958,323.418 L240.913,323.418 L189.233,145.208 L136.958,323.418 Z M457.57,163.4 C467.977,150.071 479.184,140.763 491.191,135.478 C503.199,130.192 517.408,127.548 533.818,127.548 C549.428,127.548 563.637,130.307 576.445,135.822 C589.253,141.338 600.26,149.382 609.465,159.953 C616.67,168.686 622.474,178.683 626.876,189.944 C631.279,201.206 634.581,213.271 636.783,226.141 C638.984,239.011 640.385,252.57 640.985,266.819 C641.585,281.067 641.885,295.775 641.885,310.944 C641.885,326.112 641.585,340.934 640.985,355.414 C640.385,369.892 638.984,383.566 636.783,396.436 C634.581,409.306 631.279,421.371 626.876,432.632 C622.474,443.893 616.67,453.89 609.466,462.623 C600.26,473.195 589.153,481.239 576.145,486.754 C563.136,492.27 548.828,495.028 533.218,495.028 C516.407,495.028 501.998,492.155 489.991,486.409 C477.983,480.664 466.376,470.897 455.169,457.108 L455.169,490.891 L379.52,490.891 L379.52,0 L457.57,0 L457.57,163.4 L457.57,163.4 Z M509.58,207.912 C498.045,207.912 488.797,210.556 481.836,215.845 C474.876,221.134 469.605,228.377 466.026,237.575 C462.446,246.773 460.059,257.695 458.866,270.342 C457.672,282.989 457.076,296.441 457.076,310.697 C457.076,325.414 457.672,339.096 458.866,351.743 C460.059,364.39 462.446,375.313 466.026,384.51 C469.605,393.708 474.876,400.951 481.836,406.24 C488.797,411.529 498.045,414.173 509.58,414.173 C521.513,414.173 530.96,411.529 537.92,406.24 C544.882,400.951 550.152,393.708 553.732,384.51 C557.312,375.312 559.698,364.39 560.892,351.743 C562.085,339.096 562.682,325.414 562.682,310.697 C562.682,296.441 562.085,282.989 560.892,270.342 C559.698,257.695 557.312,246.772 553.732,237.575 C550.152,228.377 544.882,221.134 537.921,215.845 C530.96,210.556 521.513,207.912 509.581,207.912 L509.58,207.912 Z M792.985,127.057 C814.547,127.057 833.612,130.969 850.182,138.793 C866.752,146.618 882.025,158.814 896,175.383 L842.696,236.137 C834.71,226.011 827.024,218.762 819.637,214.39 C812.251,210.017 803.367,207.831 792.985,207.831 C783.403,207.831 775.018,209.787 767.831,213.699 C760.644,217.611 754.255,223.479 748.665,231.304 C742.675,240.049 738.284,250.634 735.489,263.061 C732.694,275.488 731.296,291.367 731.296,310.697 C731.296,330.027 732.694,346.021 735.489,358.678 C738.284,371.335 742.676,382.036 748.665,390.781 C754.255,398.605 760.644,404.473 767.831,408.385 C775.018,412.298 783.403,414.254 792.985,414.254 C803.367,414.254 812.251,411.952 819.637,407.35 C827.024,402.747 834.71,395.613 842.696,385.948 L896,446.011 C882.025,462.58 866.753,474.891 850.182,482.946 C833.612,491 814.547,495.028 792.985,495.028 C777.413,495.028 761.342,492.266 744.772,486.743 C728.202,481.22 713.129,471.44 699.553,457.403 C685.978,443.364 674.898,424.494 666.313,400.791 C657.729,377.088 653.436,347.057 653.436,310.697 C653.436,274.337 657.729,244.307 666.313,220.603 C674.898,196.9 685.978,178.145 699.553,164.337 C713.129,150.53 728.202,140.865 744.773,135.342 C761.343,129.819 777.413,127.057 792.985,127.057 L792.985,127.057 Z"
-                      id="TypeSting-形状"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
-        <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <span
-              class="anticon studio-field-icon emotion-0"
-              role="img"
-              style="color: rgb(98, 174, 141);"
-            >
-              <svg
-                aria-hidden="true"
-                class="pro-editor-icon"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 896 516"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="TypeStingArr-页面-1"
-                  stroke="none"
-                  stroke-width="1"
+                    <span
+                      class="MuiBox-root emotion-18"
+                    >
+                      "
+                      locked
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-19"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-87"
+                  >
+                    <div
+                      class="bool-value MuiBox-root emotion-28"
+                    >
+                      false
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-15"
+                  data-testid="data-key-paircomments"
                 >
-                  <g
-                    fill="currentColor"
-                    fill-rule="nonzero"
-                    id="TypeStingArr-icon-Abc2"
-                    transform="translate(0.228000, 0.000000)"
+                  <span
+                    class="data-key MuiBox-root emotion-16"
                   >
-                    <path
-                      d="M401.2,414.8 L344.75,414.8 L328.51,358.737 L231.076,358.737 L214.45,414.8 L158,414.8 L258.528,98 L300.672,98 L401.2,414.8 Z M246.533,307.067 L313.733,307.067 L280.325,191.867 L246.533,307.067 Z M453.786,203.627 C460.514,195.01 467.758,188.994 475.52,185.577 C483.282,182.16 492.467,180.451 503.075,180.451 C513.165,180.451 522.351,182.234 530.63,185.799 C538.91,189.365 546.025,194.564 551.976,201.399 C556.633,207.044 560.385,213.506 563.231,220.786 C566.077,228.065 568.211,235.864 569.634,244.184 C571.058,252.504 571.964,261.268 572.351,270.479 C572.739,279.689 572.933,289.198 572.933,299.003 C572.933,308.808 572.739,318.39 572.351,327.749 C571.963,337.109 571.058,345.948 569.634,354.267 C568.211,362.587 566.077,370.387 563.231,377.666 C560.385,384.946 556.633,391.408 551.976,397.053 C546.025,403.887 538.846,409.086 530.436,412.652 C522.027,416.217 512.778,418 502.687,418 C491.82,418 482.506,416.143 474.744,412.429 C466.982,408.715 459.479,402.401 452.234,393.487 L452.234,415.326 L403.334,415.326 L403.334,98 L453.786,98 L453.786,203.627 Z M487.407,232.4 C479.95,232.4 473.972,234.11 469.473,237.528 C464.973,240.947 461.566,245.629 459.252,251.575 C456.938,257.521 455.395,264.581 454.624,272.757 C453.852,280.932 453.467,289.627 453.467,298.844 C453.467,308.357 453.852,317.201 454.624,325.377 C455.395,333.552 456.938,340.613 459.252,346.558 C461.566,352.504 464.973,357.186 469.472,360.605 C473.972,364.024 479.95,365.733 487.407,365.733 C495.121,365.733 501.227,364.023 505.727,360.605 C510.227,357.186 513.634,352.505 515.948,346.558 C518.262,340.613 519.805,333.552 520.576,325.377 C521.348,317.201 521.733,308.357 521.733,298.844 C521.733,289.628 521.348,280.932 520.576,272.757 C519.805,264.581 518.262,257.521 515.948,251.575 C513.634,245.629 510.227,240.947 505.728,237.528 C501.228,234.109 495.121,232.4 487.408,232.4 L487.407,232.4 Z M670.608,180.133 C684.546,180.133 696.871,182.663 707.582,187.72 C718.294,192.778 728.166,200.662 737.2,211.373 L702.743,250.645 C697.581,244.1 692.612,239.415 687.837,236.588 C683.062,233.761 677.319,232.348 670.608,232.348 C664.414,232.348 658.994,233.612 654.348,236.141 C649.702,238.671 645.572,242.464 641.958,247.521 C638.087,253.174 635.248,260.017 633.441,268.051 C631.634,276.083 630.731,286.348 630.731,298.844 C630.731,311.339 631.634,321.678 633.441,329.86 C635.248,338.042 638.087,344.959 641.959,350.612 C645.572,355.67 649.702,359.463 654.348,361.992 C658.994,364.521 664.414,365.785 670.608,365.785 C677.319,365.785 683.062,364.298 687.837,361.323 C692.612,358.347 697.581,353.736 702.743,347.488 L737.2,386.314 C728.166,397.024 718.294,404.984 707.582,410.19 C696.871,415.397 684.546,418 670.608,418 C660.542,418 650.153,416.215 639.442,412.645 C628.73,409.075 618.987,402.752 610.212,393.678 C601.436,384.603 594.273,372.405 588.724,357.083 C583.174,341.761 580.4,322.348 580.4,298.843 C580.4,275.339 583.175,255.926 588.724,240.604 C594.274,225.282 601.436,213.158 610.211,204.232 C618.987,195.307 628.731,189.059 639.442,185.489 C650.153,181.919 660.542,180.133 670.608,180.133 L670.608,180.133 Z M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z"
-                      id="TypeStingArr-形状"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
-        <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <span
-              class="anticon studio-field-icon emotion-0"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                class="pro-editor-icon"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 1024 1024"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="TypeArray-array"
-                  stroke="none"
-                  stroke-width="1"
+                    <span
+                      class="MuiBox-root emotion-18"
+                    >
+                      "
+                      comments
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-19"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-27"
+                  >
+                    <div
+                      class="int-value MuiBox-root emotion-28"
+                    >
+                      1
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-15"
+                  data-testid="data-key-paircreated_at"
                 >
-                  <path
-                    d="M447.6,326 L389.4,326 L389.4,698 L447.6,698 L447.6,770 L309,770 L309,254 L447.6,254 L447.6,326 Z M576,326 L634.2,326 L634.2,698 L576,698 L576,770 L714.6,770 L714.6,254 L576,254 L576,326 Z"
-                    fill="currentColor"
-                    fill-rule="nonzero"
-                    id="TypeArray-形状"
-                  />
-                </g>
-              </svg>
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
-        <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <span
-              class="anticon studio-field-icon emotion-0"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                class="pro-editor-icon"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 17 17"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-              >
-                <g
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                  id="TypeAny-页面-1"
-                  stroke="none"
-                  stroke-width="1"
+                  <span
+                    class="data-key MuiBox-root emotion-16"
+                  >
+                    <span
+                      class="MuiBox-root emotion-18"
+                    >
+                      "
+                      created_at
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-19"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-39"
+                  >
+                    <div
+                      class="string-value MuiBox-root emotion-28"
+                    >
+                      <span
+                        class="MuiBox-root emotion-66"
+                      >
+                        "
+                        2020-05-26T09:42:56Z
+                        "
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-15"
+                  data-testid="data-key-pairupdated_at"
                 >
-                  <g
-                    id="TypeAny-编组-2"
-                    transform="translate(0.210938, 0.644531)"
+                  <span
+                    class="data-key MuiBox-root emotion-16"
                   >
-                    <path
-                      d="M12.1525262,6.06243032 L13.4664705,9.94584615 L13.4878216,9.94584615 L14.7964147,6.06243032 L15.9821628,6.06243032 L13.5946488,12.7555674 C13.441534,13.1722274 13.2296812,13.4606734 12.9590546,13.6209231 C12.6848606,13.7740557 12.3750814,13.8506132 12.0296812,13.8506132 L11.661146,13.8506132 L11.661146,12.7983055 L11.986961,12.7983055 C12.1329409,12.7983055 12.2682542,12.7591349 12.3928829,12.6807759 C12.5175117,12.5988852 12.6047536,12.4777882 12.6546087,12.3175563 L12.9590546,11.3880936 L10.9721293,6.06243032 L12.1525262,6.06243032 Z M2.15714604,6.00053512 C2.85481382,5.9934359 3.41188852,6.12487848 3.82837012,6.39489855 C4.24486957,6.67201784 4.45665106,7.14809365 4.46376812,7.82314381 L4.46376812,11.6016054 L3.34781717,11.6016054 L3.34781717,11.1113133 L3.326466,11.1113133 C3.22324192,11.2996031 3.06306355,11.4381628 2.84593088,11.5269922 C2.63234783,11.6193712 2.33689186,11.6655518 1.95958082,11.6655518 C1.34020067,11.6584526 0.863215162,11.4950279 0.528606466,11.1752598 C0.17619621,10.8626087 0,10.4629119 0,9.97616945 C0,9.51074247 0.153061315,9.12526198 0.459183946,8.81972798 C0.765324415,8.50705909 1.21382386,8.34718395 1.80473579,8.34008473 L3.34783501,8.34008473 L3.34783501,7.75919732 C3.35495206,7.27245485 2.9758573,7.03618283 2.21053289,7.05039911 C1.93287848,7.05039911 1.71394426,7.07881382 1.55376589,7.13566109 C1.38647046,7.20317503 1.25476031,7.31686957 1.15867113,7.4767447 L0.282987737,6.81057748 C0.706586399,6.25633891 1.33128205,5.98631884 2.15714604,6.00053512 Z M8.4790903,6 C8.93836343,6 9.358466,6.16171237 9.73943367,6.48513712 C10.1168161,6.81212932 10.3144169,7.29191527 10.3322185,7.92456633 L10.3322185,11.6031215 L9.21607135,11.6031215 L9.21607135,8.3084058 C9.21607135,7.92101672 9.11282943,7.62602453 8.90632776,7.42342921 C8.70339353,7.21730212 8.44170346,7.11422074 8.12127536,7.11422074 C7.80084727,7.11422074 7.5373913,7.21730212 7.33090747,7.42342921 C7.12083835,7.62602453 7.01581271,7.92101672 7.01581271,8.30842363 L7.01581271,11.6031215 L5.89966555,11.6031215 L5.89966555,6.06929766 L7.01581271,6.06929766 L7.01581271,6.65573244 L7.03718172,6.65573244 C7.4038796,6.21857748 7.88452174,6 8.4790903,6 Z M3.3400223,9.26198439 L2.00618952,9.26198439 C1.35882274,9.27628986 1.03869788,9.4997369 1.04583278,9.93230769 C1.04583278,10.1218105 1.12941806,10.2826845 1.29658863,10.4149833 C1.45664214,10.5615518 1.72163211,10.634845 2.09155853,10.634845 C2.55750279,10.6419799 2.88651059,10.5865775 3.07858194,10.468602 C3.2528874,10.3506087 3.3400223,10.0824794 3.3400223,9.66419621 L3.3400223,9.26198439 Z"
-                      id="TypeAny-形状结合"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<FieldSelect /> > renders basic.tsx correctly 1`] = `
-.emotion-0 {
-  width: 100%;
-}
-
-.emotion-0.studio-select-multiple:not(.emotion-0.studio-select-customize-input) .emotion-0.studio-select.studio-select-selector:hover {
-  color: rgba(0, 0, 0, 0.88);
-  background-color: rgba(0, 0, 0, 0.04);
-  border-color: transparent;
-}
-
-.emotion-0.studio-select-multiple:not(.emotion-0.studio-select-customize-input) .emotion-0.studio-select.studio-select-selector:focus {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background-color: rgba(0, 0, 0, 0.02)!important;
-  border-color: #1677ff!important;
-  box-shadow: none;
-}
-
-.emotion-0.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector {
-  border-color: transparent;
-}
-
-.emotion-0.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:hover {
-  color: rgba(0, 0, 0, 0.88);
-  background-color: rgba(0, 0, 0, 0.04);
-  border-color: transparent;
-}
-
-.emotion-0.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:focus {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background-color: rgba(0, 0, 0, 0.02)!important;
-  border-color: #1677ff!important;
-  box-shadow: none;
-}
-
-.emotion-0.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background-color: rgba(0, 0, 0, 0.02)!important;
-  border-color: #1677ff!important;
-  box-shadow: none;
-}
-
-.emotion-0.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input) .studio-select-selector {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background-color: rgba(0, 0, 0, 0.02)!important;
-  border-color: #1677ff!important;
-  box-shadow: none;
-}
-
-.emotion-0 .studio-select-arrow {
-  top: 13px;
-  right: 8px;
-  width: 10px;
-  height: 10px;
-  font-size: 10px;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  font-size: 12px;
-}
-
-.emotion-2 {
-  font-size: 14px;
-}
-
-.emotion-3 {
-  margin-left: 4px;
-}
-
-<div>
-  <div
-    class="studio-select studio-field-select emotion-0 studio-select-single studio-select-show-arrow"
-  >
-    <div
-      class="studio-select-selector"
-    >
-      <span
-        class="studio-select-selection-search"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-label="Search"
-          aria-owns="rc_select_TEST_OR_SSR_list"
-          autocomplete="off"
-          class="studio-select-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
-          readonly=""
-          role="combobox"
-          style="opacity: 0;"
-          type="search"
-          unselectable="on"
-          value=""
-        />
-      </span>
-      <span
-        class="studio-select-selection-item"
-      >
-        <div
-          class="studio-field-title"
-        >
-          <div
-            class="studio-field-title-content emotion-1"
-          >
-            <span
-              class="anticon studio-field-icon emotion-2"
-              role="img"
-              style="color: rgb(82, 149, 196);"
-            >
-              <svg
-                aria-hidden="true"
-                class="pro-editor-icon"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                style="vertical-align: -0.125em;"
-                viewBox="0 0 897 496"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  id="TypeNum-页面-1"
-                  stroke="none"
-                  stroke-width="1"
+                    <span
+                      class="MuiBox-root emotion-18"
+                    >
+                      "
+                      updated_at
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-19"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-39"
+                  >
+                    <div
+                      class="string-value MuiBox-root emotion-28"
+                    >
+                      <span
+                        class="MuiBox-root emotion-66"
+                      >
+                        "
+                        2020-05-26T10:03:02Z
+                        "
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-15"
+                  data-testid="data-key-pairclosed_at"
                 >
-                  <g
-                    fill="currentColor"
-                    fill-rule="nonzero"
-                    id="TypeNum-icon-icon-test3"
-                    transform="translate(0.500000, -0.000000)"
+                  <span
+                    class="data-key MuiBox-root emotion-16"
                   >
-                    <path
-                      d="M99.31,99.994 L0,186.29 L0,90.406 L99.31,4.109 L188.345,4.109 L188.345,491.751 L99.309,491.751 L99.309,99.994 L99.31,99.994 Z M263.194,411.619 L445.374,199.989 C454.507,189.486 461.127,179.898 465.236,171.223 C469.346,162.547 471.4,152.503 471.4,141.087 C471.4,122.824 466.378,108.099 456.333,96.912 C446.288,85.725 431.677,80.132 412.5,80.132 C404.738,80.132 397.318,81.16 390.24,83.214 C383.164,85.269 376.771,88.694 371.064,93.488 C365.357,98.282 360.791,104.674 357.366,112.665 C353.942,120.655 352.229,130.585 352.229,142.457 L263.194,142.457 C263.194,120.084 267.074,100.108 274.837,82.529 C282.599,64.95 293.215,49.997 306.684,37.669 C320.154,25.341 335.906,15.981 353.942,9.589 C371.977,3.195 391.496,5.68434189e-14 412.5,5.68434189e-14 C433.96,5.68434189e-14 453.821,3.31 472.085,9.93 C490.349,16.552 505.987,25.912 519,38.011 C532.013,50.111 542.172,64.951 549.478,82.529 C556.783,100.109 560.436,119.856 560.436,141.772 C560.436,153.644 559.295,164.26 557.012,173.62 C554.748868,182.927687 551.295766,191.904944 546.738,200.33 C542.172,208.778 536.579,217.339 529.958,226.014 C523.338,234.689 515.918,243.821 507.7,253.41 L371.406,411.62 L560.436,411.62 L560.436,491.751 L263.194,491.751 L263.194,411.62 L263.194,411.619 Z M741.214,495.861 C721.124,495.861 701.834,493.121 683.341,487.642 C664.849,482.163 648.412,473.602 634.029,461.959 C619.647,450.316 608.118,435.476 599.442,417.441 C590.767,399.405 586.202,377.603 585.745,352.034 L674.78,352.034 C675.237,362.992 677.292,372.466 680.944,380.457 C684.597,388.447 689.391,395.067 695.327,400.319 C701.263,405.569 708.226,409.45 716.217,411.962 C724.207,414.473 732.539,415.729 741.215,415.729 C760.392,415.729 776.145,410.021 788.472,398.606 C800.8,387.191 806.964,370.298 806.964,347.924 C806.964,327.378 801.029,311.054 789.157,298.954 C777.286,286.855 760.392,280.805 738.475,280.805 L725.462,280.805 L725.462,203.413 L738.475,203.413 C760.392,203.413 776.145,197.591 785.733,185.948 C795.321,174.305 800.115,159.808 800.115,142.458 C800.115,121.91 794.18,106.386 782.308,95.885 C770.437,85.383 756.511,80.132 740.53,80.132 C723.636,80.132 709.596,85.269 698.41,95.542 C687.222,105.816 681.173,120.312 680.26,139.032 L591.224,139.032 C591.68,117.116 595.904,97.597 603.894,80.475 C611.884,63.352 622.614,48.741 636.084,36.642 C649.554,24.542 665.192,15.41 682.999,9.246 C700.806,3.082 719.983,0 740.529,0 C761.989,0 781.851,3.424 800.115,10.273 C818.379,17.123 834.131,26.711 847.373,39.039 C860.614,51.367 870.887,66.092 878.193,83.214 C885.498,100.337 889.151,119.171 889.151,139.718 C889.151,166.2 883.786,187.318 873.056,203.07 C862.326,218.823 848.971,231.036 832.99,239.712 C850.797,248.844 865.75,262.199 877.85,279.778 C889.95,297.357 896,320.985 896,350.664 C896,374.864 891.89,396.095 883.672,414.359 C875.453,432.623 864.267,447.804 850.112,459.904 C835.958,472.004 819.521,481.021 800.8,486.957 C782.08,492.893 762.218,495.861 741.215,495.861 L741.214,495.861 Z"
-                      id="TypeNum-形状"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </span>
-            <span
-              class="studio-field-title-title emotion-3"
-            >
-              orderId
-            </span>
-          </div>
-        </div>
-      </span>
-    </div>
-    <span
-      aria-hidden="true"
-      class="studio-select-arrow"
-      style="user-select: none;"
-      unselectable="on"
-    >
-      <span
-        aria-label="down"
-        class="anticon anticon-down studio-select-suffix"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="down"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-          />
-        </svg>
-      </span>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`<FieldTitle /> > renders basic.tsx correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  font-size: 12px;
-}
-
-.emotion-1 {
-  font-size: 14px;
-}
-
-.emotion-2 {
-  margin-left: 4px;
-}
-
-<div>
-  <div
-    class="studio-pro-card studio-pro-card-contain-card studio-pro-card-ghost"
-  >
-    <div
-      class="studio-pro-card-body studio-pro-card-body-wrap"
-    >
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
-        <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <div
-              class="studio-field-title"
-            >
-              <div
-                class="studio-field-title-content emotion-0"
-              >
-                <span
-                  class="anticon studio-field-icon emotion-1"
-                  role="img"
+                    <span
+                      class="MuiBox-root emotion-18"
+                    >
+                      "
+                      closed_at
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-19"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-113"
+                  >
+                    <div
+                      class="null-value MuiBox-root emotion-28"
+                    >
+                      <div
+                        class="MuiBox-root emotion-115"
+                      >
+                        NULL
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-15"
+                  data-testid="data-key-pairauthor_association"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pro-editor-icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 17 17"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  <span
+                    class="data-key MuiBox-root emotion-16"
                   >
-                    <g
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                      id="TypeAny-页面-1"
-                      stroke="none"
-                      stroke-width="1"
+                    <span
+                      class="MuiBox-root emotion-18"
                     >
-                      <g
-                        id="TypeAny-编组-2"
-                        transform="translate(0.210938, 0.644531)"
+                      "
+                      author_association
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-19"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-39"
+                  >
+                    <div
+                      class="string-value MuiBox-root emotion-28"
+                    >
+                      <span
+                        class="MuiBox-root emotion-66"
                       >
-                        <path
-                          d="M12.1525262,6.06243032 L13.4664705,9.94584615 L13.4878216,9.94584615 L14.7964147,6.06243032 L15.9821628,6.06243032 L13.5946488,12.7555674 C13.441534,13.1722274 13.2296812,13.4606734 12.9590546,13.6209231 C12.6848606,13.7740557 12.3750814,13.8506132 12.0296812,13.8506132 L11.661146,13.8506132 L11.661146,12.7983055 L11.986961,12.7983055 C12.1329409,12.7983055 12.2682542,12.7591349 12.3928829,12.6807759 C12.5175117,12.5988852 12.6047536,12.4777882 12.6546087,12.3175563 L12.9590546,11.3880936 L10.9721293,6.06243032 L12.1525262,6.06243032 Z M2.15714604,6.00053512 C2.85481382,5.9934359 3.41188852,6.12487848 3.82837012,6.39489855 C4.24486957,6.67201784 4.45665106,7.14809365 4.46376812,7.82314381 L4.46376812,11.6016054 L3.34781717,11.6016054 L3.34781717,11.1113133 L3.326466,11.1113133 C3.22324192,11.2996031 3.06306355,11.4381628 2.84593088,11.5269922 C2.63234783,11.6193712 2.33689186,11.6655518 1.95958082,11.6655518 C1.34020067,11.6584526 0.863215162,11.4950279 0.528606466,11.1752598 C0.17619621,10.8626087 0,10.4629119 0,9.97616945 C0,9.51074247 0.153061315,9.12526198 0.459183946,8.81972798 C0.765324415,8.50705909 1.21382386,8.34718395 1.80473579,8.34008473 L3.34783501,8.34008473 L3.34783501,7.75919732 C3.35495206,7.27245485 2.9758573,7.03618283 2.21053289,7.05039911 C1.93287848,7.05039911 1.71394426,7.07881382 1.55376589,7.13566109 C1.38647046,7.20317503 1.25476031,7.31686957 1.15867113,7.4767447 L0.282987737,6.81057748 C0.706586399,6.25633891 1.33128205,5.98631884 2.15714604,6.00053512 Z M8.4790903,6 C8.93836343,6 9.358466,6.16171237 9.73943367,6.48513712 C10.1168161,6.81212932 10.3144169,7.29191527 10.3322185,7.92456633 L10.3322185,11.6031215 L9.21607135,11.6031215 L9.21607135,8.3084058 C9.21607135,7.92101672 9.11282943,7.62602453 8.90632776,7.42342921 C8.70339353,7.21730212 8.44170346,7.11422074 8.12127536,7.11422074 C7.80084727,7.11422074 7.5373913,7.21730212 7.33090747,7.42342921 C7.12083835,7.62602453 7.01581271,7.92101672 7.01581271,8.30842363 L7.01581271,11.6031215 L5.89966555,11.6031215 L5.89966555,6.06929766 L7.01581271,6.06929766 L7.01581271,6.65573244 L7.03718172,6.65573244 C7.4038796,6.21857748 7.88452174,6 8.4790903,6 Z M3.3400223,9.26198439 L2.00618952,9.26198439 C1.35882274,9.27628986 1.03869788,9.4997369 1.04583278,9.93230769 C1.04583278,10.1218105 1.12941806,10.2826845 1.29658863,10.4149833 C1.45664214,10.5615518 1.72163211,10.634845 2.09155853,10.634845 C2.55750279,10.6419799 2.88651059,10.5865775 3.07858194,10.468602 C3.2528874,10.3506087 3.3400223,10.0824794 3.3400223,9.66419621 L3.3400223,9.26198439 Z"
-                          id="TypeAny-形状结合"
-                        />
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="studio-field-title-title emotion-2"
+                        "
+                        NONE
+                        "
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-15"
+                  data-testid="data-key-pairuser"
                 >
-                  any
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
-        <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <div
-              class="studio-field-title"
-            >
-              <div
-                class="studio-field-title-content emotion-0"
-              >
-                <span
-                  class="anticon studio-field-icon emotion-1"
-                  role="img"
+                  <span
+                    class="data-key MuiBox-root emotion-16"
+                  >
+                    <span
+                      class="MuiBox-root emotion-18"
+                    >
+                      "
+                      user
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-19"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-39"
+                  >
+                    <div
+                      class="string-value MuiBox-root emotion-28"
+                    >
+                      <span
+                        class="MuiBox-root emotion-66"
+                      >
+                        "
+                        chenshuai2144
+                        "
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="data-key-pair MuiBox-root emotion-15"
+                  data-testid="data-key-pairavatar"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pro-editor-icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 17 16"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  <span
+                    class="data-key MuiBox-root emotion-16"
                   >
-                    <defs>
-                      <rect
-                        height="16"
-                        id="TypeAnyArr-path-1"
-                        width="16"
-                        x="0"
-                        y="0"
-                      />
-                    </defs>
-                    <g
-                      fill="none"
-                      fill-rule="evenodd"
-                      id="TypeAnyArr-页面-1"
-                      stroke="none"
-                      stroke-width="1"
+                    <span
+                      class="MuiBox-root emotion-18"
                     >
-                      <g
-                        id="TypeAnyArr-编组"
-                        transform="translate(-156.183593, -18.424879)"
+                      "
+                      avatar
+                      "
+                    </span>
+                    <div
+                      class="MuiBox-root emotion-19"
+                    >
+                      :
+                    </div>
+                  </span>
+                  <div
+                    class="MuiBox-root emotion-39"
+                  >
+                    <div
+                      class="string-value MuiBox-root emotion-28"
+                    >
+                      <span
+                        class="MuiBox-root emotion-41"
                       >
-                        <g
-                          id="TypeAnyArr-svg"
-                          transform="translate(130.328125, 0.000000)"
+                        "
+                        https://gw.alipayobjec
+                        <span
+                          class="MuiBox-root emotion-42"
                         >
-                          <g
-                            transform="translate(26.492188, 17.000000)"
-                          >
-                            <g
-                              transform="translate(0.000000, 1.421875)"
-                            >
-                              <mask
-                                fill="white"
-                                id="TypeAnyArr-mask-2"
-                              >
-                                <use
-                                  xlink:href="#TypeAnyArr-path-1"
-                                />
-                              </mask>
-                              <g
-                                id="TypeAnyArr-容器"
-                              />
-                              <path
-                                d="M2.4793757,4.27432776 L1.43825195,4.27432776 L1.43825195,10.8583367 L2.4793757,10.8583367 L2.4793757,12.1326644 L0,12.1326644 L0,3 L2.4793757,3 L2.4793757,4.27432776 Z M13.5027871,4.27432776 L13.5027871,3 L15.9821628,3 L15.9821628,12.1326644 L13.5027871,12.1326644 L13.5027871,10.8583367 L14.5439108,10.8583367 L14.5439108,4.27432776 L13.5027871,4.27432776 Z M4.76700111,9.02664883 L4.75241026,9.02664883 C4.68186399,9.15472018 4.57241472,9.24893645 4.42402676,9.30933333 C4.27810033,9.37215608 4.07620067,9.40356745 3.81838127,9.40356745 C3.39515719,9.39875139 3.06921739,9.28758974 2.84057971,9.07013601 C2.59977703,8.85751616 2.4793757,8.58571237 2.4793757,8.2547068 C2.4793757,7.9382029 2.58397324,7.67606689 2.79313266,7.4682631 C3.00232776,7.25564326 3.30880713,7.14692531 3.71257079,7.14209142 L4.76700111,7.14209142 L4.76700111,6.747068 C4.77187068,6.41604459 4.51282051,6.25538462 3.98986845,6.2650524 C3.80013378,6.2650524 3.65055072,6.28437012 3.54108361,6.32302341 C3.42678261,6.36893645 3.33677592,6.44626087 3.27109922,6.55497882 L2.67274916,6.10196656 C2.96219398,5.72504794 3.38907469,5.54143144 3.95337347,5.55108138 C4.43012709,5.54626533 4.81077369,5.63564771 5.09536678,5.81928205 C5.37995987,6.00773244 5.52467336,6.33147826 5.52954292,6.79055518 L5.52954292,9.36008027 L4.76700111,9.36008027 L4.76700111,9.02664883 Z M4.76254181,7.76254181 L3.84998885,7.76254181 C3.4070903,7.77219175 3.18808473,7.92309476 3.19293645,8.21525084 C3.19293645,8.34319732 3.25012263,8.45184392 3.36451282,8.5411728 C3.47401561,8.64016945 3.65531327,8.68966778 3.90838796,8.68966778 C4.22717503,8.69448384 4.4522631,8.65707915 4.58368785,8.57740022 C4.70292977,8.49772129 4.76254181,8.31663768 4.76254181,8.03416722 L4.76254181,7.76254181 Z M6.52842809,5.5979398 L7.29198662,5.5979398 L7.29198662,5.99745819 L7.30661315,5.99745819 C7.55745819,5.69962988 7.88626979,5.55072464 8.29301226,5.55072464 C8.60721516,5.55072464 8.89462653,5.6608874 9.15522854,5.88123077 C9.41340468,6.104 9.54857525,6.43086734 9.56075808,6.86185061 L9.56075808,9.36789298 L8.79719955,9.36789298 L8.79719955,7.12336232 C8.79719955,6.85942475 8.7265641,6.65847046 8.5852932,6.52046377 C8.446466,6.38001338 8.26745151,6.30980602 8.04824972,6.30980602 C7.8290301,6.30980602 7.64880268,6.38001338 7.50754961,6.52046377 C7.36383501,6.65847046 7.29198662,6.85942475 7.29198662,7.12336232 L7.29198662,9.36789298 L6.52842809,9.36789298 L6.52842809,5.5979398 Z M10.006689,5.58639911 L10.813592,5.58639911 L11.7117681,8.22796878 L11.726359,8.22796878 L12.6209142,5.58639911 L13.4314381,5.58639911 L11.7993846,10.139175 C11.6947157,10.4226087 11.5498952,10.6188183 11.3649052,10.7278038 C11.1774716,10.8319732 10.9657079,10.884058 10.7296143,10.884058 L10.4776812,10.884058 L10.4776812,10.1682497 L10.7003969,10.1682497 C10.8001962,10.1682497 10.8926823,10.1416187 10.9778907,10.0883211 C11.0630814,10.0325975 11.1227291,9.95026087 11.1567982,9.84123969 L11.3649052,9.20901672 L10.006689,5.58639911 Z"
-                                fill="#000000"
-                                fill-opacity="0.88"
-                                id="TypeAnyArr-shapeGroup"
-                                mask="url(#TypeAnyArr-mask-2)"
-                              />
-                            </g>
-                          </g>
-                        </g>
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  anyArray
-                </span>
+                          …
+                        </span>
+                        "
+                      </span>
+                    </div>
+                  </div>
+                </div>
               </div>
+              <span
+                class="data-object-end MuiBox-root emotion-18"
+              >
+                }
+              </span>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
         <div
-          class="studio-pro-card studio-pro-card-border"
+          class="studio-divider studio-divider-horizontal studio-divider-dashed"
+          role="separator"
+          style="margin: 12px 0px;"
+        />
+        <div
+          class="layoutkit-flexbox emotion-139"
         >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
+          <ul
+            class="studio-pagination studio-pagination-mini"
           >
-            <div
-              class="studio-field-title"
+            <li
+              class="studio-pagination-total-text"
             >
-              <div
-                class="studio-field-title-content emotion-0"
+              共 20 条数据
+            </li>
+            <li
+              aria-disabled="true"
+              class="studio-pagination-prev studio-pagination-disabled"
+              title="Previous Page"
+            >
+              <button
+                class="studio-pagination-item-link"
+                disabled=""
+                tabindex="-1"
+                type="button"
               >
                 <span
-                  class="anticon studio-field-icon emotion-1"
+                  aria-label="left"
+                  class="anticon anticon-left"
                   role="img"
-                  style="color: rgb(216, 193, 82);"
                 >
                   <svg
                     aria-hidden="true"
-                    class="pro-editor-icon"
+                    data-icon="left"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 791 495"
+                    viewBox="64 64 896 896"
                     width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
                   >
-                    <g
-                      fill="none"
-                      fill-rule="evenodd"
-                      id="TypeBool-页面-1"
-                      stroke="none"
-                      stroke-width="1"
-                    >
-                      <g
-                        fill="currentColor"
-                        fill-rule="nonzero"
-                        id="TypeBool-icon-bool1"
-                        transform="translate(0.535000, 0.000000)"
-                      >
-                        <path
-                          d="M5.68434189e-14,490.864 L5.68434189e-14,0 L70.32,0 L70.32,173.043 L71.7,173.043 C79.513,161.553 88.82,152.705 99.62,146.501 C110.421,140.296 122.716,137.194 136.504,137.194 C153.51,137.194 166.724,140.181 176.146,146.156 C185.568,152.131 193.266,159.714 199.241,168.906 C203.837,176.26 206.825,185.912 208.203,197.862 C209.583,209.812 210.272,228.426 210.272,253.705 L210.272,386.762 C210.272,406.066 209.352,421.462 207.514,432.952 C205.675,444.443 202.688,454.095 198.552,461.908 C186.602,483.97 166.149,495 137.194,495 C119.728,495 106.4,491.553 97.208,484.659 C88.015,477.765 79.053,469.262 70.32,459.15 L70.32,490.864 L5.68434189e-14,490.864 Z M139.951,248.879 C139.951,237.849 137.538,228.196 132.712,219.923 C127.886,211.65 118.809,207.513 105.481,207.513 C95.369,207.513 86.981,211.076 80.317,218.2 C73.652,225.324 70.32,234.401 70.32,245.432 L70.32,381.247 C70.32,394.116 73.538,404.572 79.972,412.615 C86.407,420.658 94.909,424.68 105.481,424.68 C117.431,424.68 126.163,420.313 131.678,411.58 C137.194,402.848 139.951,391.358 139.951,377.11 L139.951,248.879 Z M232.431,258.531 C232.431,244.283 233.351,231.184 235.189,219.234 C237.027,207.284 240.475,196.714 245.53,187.521 C253.803,172.354 265.638,160.174 281.035,150.981 C296.432,141.79 315.161,137.194 337.222,137.194 C359.284,137.194 378.012,141.79 393.41,150.982 C408.807,160.174 420.642,172.354 428.915,187.521 C433.97,196.713 437.417,207.284 439.255,219.234 C441.095,231.184 442.014,244.283 442.014,258.531 L442.014,373.663 C442.014,387.911 441.094,401.01 439.256,412.96 C437.417,424.91 433.97,435.48 428.915,444.673 C420.642,459.84 408.807,472.019 393.41,481.212 C378.013,490.404 359.284,495 337.222,495 C315.162,495 296.432,490.404 281.035,481.212 C265.638,472.019 253.803,459.84 245.53,444.672 C240.475,435.48 237.027,424.91 235.189,412.96 C233.351,401.01 232.431,387.91 232.431,373.663 L232.431,258.531 L232.431,258.531 Z M302.751,384.694 C302.751,398.022 305.854,408.019 312.059,414.684 C318.264,421.348 326.651,424.68 337.222,424.68 C347.794,424.68 356.182,421.348 362.386,414.683 C368.591,408.019 371.693,398.023 371.693,384.693 L371.693,247.5 C371.693,234.171 368.591,224.175 362.386,217.51 C356.181,210.846 347.794,207.514 337.222,207.514 C326.652,207.514 318.264,210.846 312.059,217.51 C305.854,224.175 302.752,234.171 302.752,247.5 L302.752,384.694 L302.751,384.694 Z M457.969,258.53 C457.969,244.282 458.889,231.183 460.727,219.233 C462.566,207.283 466.013,196.713 471.068,187.52 C479.341,172.353 491.176,160.173 506.573,150.98 C521.97,141.789 540.699,137.193 562.761,137.193 C584.822,137.193 603.551,141.789 618.948,150.981 C634.345,160.173 646.18,172.353 654.453,187.52 C659.509,196.712 662.956,207.283 664.794,219.233 C666.633,231.183 667.552,244.282 667.552,258.53 L667.552,373.662 C667.552,387.91 666.632,401.009 664.794,412.959 C662.956,424.909 659.509,435.479 654.453,444.672 C646.18,459.839 634.345,472.018 618.948,481.211 C603.55,490.404 584.821,495 562.76,495 C540.698,495 521.97,490.404 506.572,481.212 C491.175,472.019 479.34,459.84 471.067,444.672 C466.012,435.48 462.565,424.91 460.727,412.96 C458.887,401.01 457.969,387.91 457.969,373.663 L457.969,258.531 L457.969,258.53 Z M528.29,384.693 C528.29,398.021 531.392,408.018 537.597,414.683 C543.802,421.347 552.19,424.679 562.761,424.679 C573.331,424.679 581.72,421.347 587.924,414.682 C594.129,408.018 597.231,398.022 597.231,384.692 L597.231,247.5 C597.231,234.171 594.129,224.175 587.924,217.51 C581.72,210.846 573.332,207.514 562.761,207.514 C552.19,207.514 543.801,210.846 537.597,217.51 C531.392,224.175 528.29,234.171 528.29,247.5 L528.29,384.694 L528.29,384.693 Z M685.574,0 L755.894,0 L755.894,392.277 C755.894,405.606 758.307,414.683 763.134,419.509 C767.959,424.335 777.036,427.437 790.365,428.816 L790.365,495 C774.279,495 759.801,493.736 746.932,491.208 C734.062,488.68 723.032,483.74 713.84,476.386 C704.648,469.492 697.639,459.725 692.813,447.086 C687.987,434.446 685.574,417.786 685.574,397.103 L685.574,0 Z"
-                          id="TypeBool-形状"
-                        />
-                      </g>
-                    </g>
+                    <path
+                      d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+                    />
                   </svg>
                 </span>
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  bool
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
-        <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <div
-              class="studio-field-title"
+              </button>
+            </li>
+            <li
+              class="studio-pagination-item studio-pagination-item-1 studio-pagination-item-active"
+              tabindex="0"
+              title="1"
+            >
+              <a
+                rel="nofollow"
+              >
+                1
+              </a>
+            </li>
+            <li
+              class="studio-pagination-item studio-pagination-item-2"
+              tabindex="0"
+              title="2"
+            >
+              <a
+                rel="nofollow"
+              >
+                2
+              </a>
+            </li>
+            <li
+              class="studio-pagination-item studio-pagination-item-3"
+              tabindex="0"
+              title="3"
+            >
+              <a
+                rel="nofollow"
+              >
+                3
+              </a>
+            </li>
+            <li
+              class="studio-pagination-item studio-pagination-item-4"
+              tabindex="0"
+              title="4"
+            >
+              <a
+                rel="nofollow"
+              >
+                4
+              </a>
+            </li>
+            <li
+              class="studio-pagination-item studio-pagination-item-5 studio-pagination-item-before-jump-next"
+              tabindex="0"
+              title="5"
             >
-              <div
-                class="studio-field-title-content emotion-0"
+              <a
+                rel="nofollow"
               >
-                <span
-                  class="anticon studio-field-icon emotion-1"
-                  role="img"
-                  style="color: rgb(216, 193, 82);"
+                5
+              </a>
+            </li>
+            <li
+              class="studio-pagination-jump-next studio-pagination-jump-next-custom-icon"
+              tabindex="0"
+              title="Next 5 Pages"
+            >
+              <a
+                class="studio-pagination-item-link"
+              >
+                <div
+                  class="studio-pagination-item-container"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pro-editor-icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 897 516"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  <span
+                    aria-label="double-right"
+                    class="anticon anticon-double-right studio-pagination-item-link-icon"
+                    role="img"
                   >
-                    <g
-                      fill="none"
-                      fill-rule="evenodd"
-                      id="TypeBoolArr-页面-1"
-                      stroke="none"
-                      stroke-width="1"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="double-right"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
-                      <g
-                        fill="currentColor"
-                        fill-rule="nonzero"
-                        id="TypeBoolArr-icon-bool"
-                        transform="translate(0.900000, 0.000000)"
-                      >
-                        <path
-                          d="M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z M169,430.075 L169,83 L218.721,83 L218.721,205.354 L219.696,205.354 C225.221,197.229 231.802,190.974 239.439,186.586 C247.076,182.199 255.769,180.006 265.519,180.006 C277.542,180.006 286.885,182.118 293.547,186.343 C300.209,190.567 305.653,195.929 309.877,202.429 C313.127,207.629 315.24,214.453 316.214,222.903 C317.189,231.352 317.677,244.513 317.677,262.387 L317.677,356.468 C317.677,370.118 317.027,381.004 315.727,389.128 C314.427,397.253 312.315,404.077 309.39,409.602 C300.94,425.2 286.48,433 266.006,433 C253.656,433 244.232,430.563 237.733,425.688 C231.233,420.813 224.896,414.801 218.721,407.652 L218.721,430.075 L169,430.075 Z M267.955,258.975 C267.955,251.175 266.249,244.351 262.837,238.501 C259.425,232.651 253.007,229.727 243.582,229.727 C236.432,229.727 230.502,232.246 225.79,237.283 C221.078,242.32 218.721,248.738 218.721,256.538 L218.721,352.568 C218.721,361.668 220.996,369.061 225.546,374.748 C230.096,380.435 236.108,383.278 243.582,383.278 C252.032,383.278 258.206,380.191 262.106,374.017 C266.006,367.842 267.956,359.717 267.956,349.643 L267.956,258.975 L267.955,258.975 Z M333.345,265.799 C333.345,255.725 333.995,246.463 335.295,238.014 C336.595,229.564 339.032,222.09 342.607,215.591 C348.457,204.866 356.825,196.254 367.712,189.755 C378.598,183.255 391.842,180.005 407.44,180.005 C423.04,180.005 436.282,183.255 447.169,189.755 C458.055,196.255 466.423,204.866 472.273,215.591 C475.848,222.091 478.285,229.564 479.585,238.014 C480.885,246.464 481.535,255.725 481.535,265.799 L481.535,347.206 C481.535,357.28 480.885,366.542 479.585,374.992 C478.285,383.442 475.848,390.915 472.273,397.415 C466.423,408.139 458.055,416.751 447.169,423.251 C436.282,429.751 423.039,433 407.44,433 C391.841,433 378.598,429.75 367.712,423.25 C356.825,416.751 348.457,408.14 342.607,397.415 C339.032,390.915 336.595,383.441 335.295,374.992 C333.995,366.542 333.345,357.28 333.345,347.206 L333.345,265.8 L333.345,265.799 Z M383.067,355.006 C383.067,364.43 385.26,371.498 389.647,376.21 C394.035,380.922 399.966,383.279 407.44,383.279 C414.915,383.279 420.845,380.922 425.233,376.21 C429.62,371.498 431.813,364.43 431.813,355.006 L431.813,258 C431.813,248.576 429.62,241.507 425.233,236.795 C420.845,232.083 414.915,229.727 407.44,229.727 C399.966,229.727 394.035,232.083 389.648,236.795 C385.26,241.507 383.067,248.575 383.067,258 L383.067,355.006 L383.067,355.006 Z M492.816,265.799 C492.816,255.725 493.467,246.463 494.766,238.014 C496.066,229.564 498.503,222.09 502.078,215.591 C507.928,204.866 516.296,196.254 527.182,189.755 C538.069,183.255 551.312,180.005 566.911,180.005 C582.51,180.005 595.752,183.255 606.639,189.755 C617.526,196.255 625.894,204.866 631.744,215.591 C635.318,222.091 637.756,229.564 639.056,238.014 C640.356,246.464 641.006,255.725 641.006,265.799 L641.006,347.206 C641.006,357.28 640.356,366.542 639.056,374.992 C637.756,383.442 635.318,390.915 631.744,397.415 C625.894,408.139 617.526,416.751 606.639,423.251 C595.752,429.751 582.51,433 566.911,433 C551.311,433 538.069,429.75 527.182,423.25 C516.296,416.751 507.928,408.14 502.078,397.415 C498.503,390.915 496.066,383.441 494.766,374.992 C493.466,366.542 492.816,357.28 492.816,347.206 L492.816,265.8 L492.816,265.799 Z M542.537,355.006 C542.537,364.43 544.731,371.498 549.118,376.21 C553.506,380.922 559.436,383.279 566.911,383.279 C574.385,383.279 580.316,380.922 584.703,376.21 C589.091,371.498 591.284,364.43 591.284,355.006 L591.284,258 C591.284,248.576 589.091,241.507 584.704,236.795 C580.316,232.083 574.385,229.727 566.911,229.727 C559.436,229.727 553.506,232.083 549.118,236.795 C544.731,241.507 542.538,248.575 542.538,258 L542.538,355.006 L542.537,355.006 Z M653.75,83 L703.472,83 L703.472,360.368 C703.472,369.792 705.178,376.21 708.59,379.623 C712.002,383.035 718.42,385.228 727.845,386.203 L727.845,433 C716.471,433 706.235,432.106 697.135,430.319 C688.035,428.532 680.235,425.039 673.736,419.839 C667.236,414.964 662.281,408.059 658.869,399.121 C655.456,390.184 653.75,378.404 653.75,363.78 L653.75,83 Z"
-                          id="TypeBoolArr-形状"
-                        />
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  boolArray
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
-        <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <div
-              class="studio-field-title"
+                      <path
+                        d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="studio-pagination-item-ellipsis"
+                  >
+                    •••
+                  </span>
+                </div>
+              </a>
+            </li>
+            <li
+              class="studio-pagination-item studio-pagination-item-20"
+              tabindex="0"
+              title="20"
             >
-              <div
-                class="studio-field-title-content emotion-0"
+              <a
+                rel="nofollow"
+              >
+                20
+              </a>
+            </li>
+            <li
+              aria-disabled="false"
+              class="studio-pagination-next"
+              tabindex="0"
+              title="Next Page"
+            >
+              <button
+                class="studio-pagination-item-link"
+                tabindex="-1"
+                type="button"
               >
                 <span
-                  class="anticon studio-field-icon emotion-1"
+                  aria-label="right"
+                  class="anticon anticon-right"
                   role="img"
-                  style="color: rgb(82, 149, 196);"
                 >
                   <svg
                     aria-hidden="true"
-                    class="pro-editor-icon"
+                    data-icon="right"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 897 496"
+                    viewBox="64 64 896 896"
                     width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
                   >
-                    <g
-                      fill="none"
-                      fill-rule="evenodd"
-                      id="TypeNum-页面-1"
-                      stroke="none"
-                      stroke-width="1"
-                    >
-                      <g
-                        fill="currentColor"
-                        fill-rule="nonzero"
-                        id="TypeNum-icon-icon-test3"
-                        transform="translate(0.500000, -0.000000)"
-                      >
-                        <path
-                          d="M99.31,99.994 L0,186.29 L0,90.406 L99.31,4.109 L188.345,4.109 L188.345,491.751 L99.309,491.751 L99.309,99.994 L99.31,99.994 Z M263.194,411.619 L445.374,199.989 C454.507,189.486 461.127,179.898 465.236,171.223 C469.346,162.547 471.4,152.503 471.4,141.087 C471.4,122.824 466.378,108.099 456.333,96.912 C446.288,85.725 431.677,80.132 412.5,80.132 C404.738,80.132 397.318,81.16 390.24,83.214 C383.164,85.269 376.771,88.694 371.064,93.488 C365.357,98.282 360.791,104.674 357.366,112.665 C353.942,120.655 352.229,130.585 352.229,142.457 L263.194,142.457 C263.194,120.084 267.074,100.108 274.837,82.529 C282.599,64.95 293.215,49.997 306.684,37.669 C320.154,25.341 335.906,15.981 353.942,9.589 C371.977,3.195 391.496,5.68434189e-14 412.5,5.68434189e-14 C433.96,5.68434189e-14 453.821,3.31 472.085,9.93 C490.349,16.552 505.987,25.912 519,38.011 C532.013,50.111 542.172,64.951 549.478,82.529 C556.783,100.109 560.436,119.856 560.436,141.772 C560.436,153.644 559.295,164.26 557.012,173.62 C554.748868,182.927687 551.295766,191.904944 546.738,200.33 C542.172,208.778 536.579,217.339 529.958,226.014 C523.338,234.689 515.918,243.821 507.7,253.41 L371.406,411.62 L560.436,411.62 L560.436,491.751 L263.194,491.751 L263.194,411.62 L263.194,411.619 Z M741.214,495.861 C721.124,495.861 701.834,493.121 683.341,487.642 C664.849,482.163 648.412,473.602 634.029,461.959 C619.647,450.316 608.118,435.476 599.442,417.441 C590.767,399.405 586.202,377.603 585.745,352.034 L674.78,352.034 C675.237,362.992 677.292,372.466 680.944,380.457 C684.597,388.447 689.391,395.067 695.327,400.319 C701.263,405.569 708.226,409.45 716.217,411.962 C724.207,414.473 732.539,415.729 741.215,415.729 C760.392,415.729 776.145,410.021 788.472,398.606 C800.8,387.191 806.964,370.298 806.964,347.924 C806.964,327.378 801.029,311.054 789.157,298.954 C777.286,286.855 760.392,280.805 738.475,280.805 L725.462,280.805 L725.462,203.413 L738.475,203.413 C760.392,203.413 776.145,197.591 785.733,185.948 C795.321,174.305 800.115,159.808 800.115,142.458 C800.115,121.91 794.18,106.386 782.308,95.885 C770.437,85.383 756.511,80.132 740.53,80.132 C723.636,80.132 709.596,85.269 698.41,95.542 C687.222,105.816 681.173,120.312 680.26,139.032 L591.224,139.032 C591.68,117.116 595.904,97.597 603.894,80.475 C611.884,63.352 622.614,48.741 636.084,36.642 C649.554,24.542 665.192,15.41 682.999,9.246 C700.806,3.082 719.983,0 740.529,0 C761.989,0 781.851,3.424 800.115,10.273 C818.379,17.123 834.131,26.711 847.373,39.039 C860.614,51.367 870.887,66.092 878.193,83.214 C885.498,100.337 889.151,119.171 889.151,139.718 C889.151,166.2 883.786,187.318 873.056,203.07 C862.326,218.823 848.971,231.036 832.99,239.712 C850.797,248.844 865.75,262.199 877.85,279.778 C889.95,297.357 896,320.985 896,350.664 C896,374.864 891.89,396.095 883.672,414.359 C875.453,432.623 864.267,447.804 850.112,459.904 C835.958,472.004 819.521,481.021 800.8,486.957 C782.08,492.893 762.218,495.861 741.215,495.861 L741.214,495.861 Z"
-                          id="TypeNum-形状"
-                        />
-                      </g>
-                    </g>
+                    <path
+                      d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                    />
                   </svg>
                 </span>
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  integer
-                </span>
-              </div>
-            </div>
-          </div>
+              </button>
+            </li>
+          </ul>
         </div>
       </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<DraggablePanel /> > renders basic.tsx correctly 1`] = `
+.emotion-0 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  position: relative;
+  border: 0 solid rgba(5, 5, 5, 0.06);
+}
+
+.emotion-0:hover .studio-draggable-panel-toggle {
+  opacity: 1;
+}
+
+.emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-2 {
+  position: absolute;
+  opacity: 0;
+  z-index: 1001;
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
+  border-radius: 4px;
+  cursor: pointer;
+  background: #ffffff;
+  border-width: 1px;
+  border-style: solid;
+  color: rgba(0, 0, 0, 0.45);
+  border-color: #d9d9d9;
+  width: 16px;
+  height: 40px;
+  left: -17px;
+  top: 50%;
+  margin-top: -20px;
+  border-radius: 4px 0 0 4px;
+  border-right-width: 0;
+}
+
+.emotion-2:hover {
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.emotion-3 {
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.emotion-4 {
+  position: relative;
+}
+
+.emotion-4::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-4:hover::before,
+.emotion-4:active::before {
+  background: #1677ff;
+}
+
+.emotion-4::before {
+  left: 50%;
+  width: 2px;
+  height: 100%;
+}
+
+<div>
+  <div
+    style="background: rgb(241, 241, 241); border: 2px solid #ddd; height: 300px; display: flex;"
+  >
+    <div
+      style="flex: 1; padding: 12px;"
+    >
+      内容
+    </div>
+    <div
+      class="studio-draggable-panel emotion-0"
+      style="border-left-width: 1px;"
+    >
       <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+        class="layoutkit-center emotion-1 studio-draggable-panel-toggle studio-draggable-panel-toggle-left emotion-2"
       >
-        <div
-          class="studio-pro-card studio-pro-card-border"
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
         >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            style="transform: rotate(180deg);"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <div
-              class="studio-field-title"
-            >
-              <div
-                class="studio-field-title-content emotion-0"
-              >
-                <span
-                  class="anticon studio-field-icon emotion-1"
-                  role="img"
-                  style="color: rgb(35, 155, 239);"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pro-editor-icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 897 516"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                  >
-                    <g
-                      fill="none"
-                      fill-rule="evenodd"
-                      id="TypeNumArr-页面-1"
-                      stroke="none"
-                      stroke-width="1"
-                    >
-                      <g
-                        fill="currentColor"
-                        fill-rule="nonzero"
-                        id="TypeNumArr-icon-icon-test1"
-                        transform="translate(0.500000, 0.000000)"
-                      >
-                        <path
-                          d="M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z M223.088,162.53 L159,218.221 L159,156.343 L223.088,100.652 L280.547,100.652 L280.547,415.348 L223.088,415.348 L223.088,162.53 L223.088,162.53 Z M328.85,363.635 L446.42,227.061 C452.312,220.284 456.585,214.096 459.237,208.497 C461.889,202.899 463.215,196.417 463.215,189.05 C463.215,177.263 459.973,167.76 453.491,160.541 C447.008,153.322 437.579,149.713 425.204,149.713 C420.194,149.713 415.406,150.376 410.839,151.702 C406.272,153.028 402.147,155.238 398.463,158.332 C394.78,161.425 391.833,165.551 389.623,170.707 C387.413,175.864 386.309,182.273 386.309,189.934 L328.85,189.934 C328.85,175.495 331.355,162.604 336.364,151.26 C341.374,139.915 348.224,130.265 356.916,122.31 C365.609,114.354 375.774,108.313 387.414,104.188 C399.053,100.063 411.649,98 425.204,98 C439.053,98 451.87,100.136 463.657,104.409 C475.443,108.681 485.535,114.722 493.933,122.53 C502.331,130.339 508.887,139.915 513.601,151.26 C518.316,162.604 520.674,175.348 520.674,189.492 C520.674,197.152 519.937,204.004 518.463,210.044 C517.002664,216.050947 514.774313,221.84466 511.833,227.282 C508.887,232.733 505.277,238.258 501.005,243.856 C496.732,249.455 491.944,255.348 486.64,261.536 L398.684,363.636 L520.674,363.636 L520.674,415.348 L328.85,415.348 L328.85,363.635 Z M637.337,418 C624.372,418 611.923,416.232 599.989,412.696 C588.055,409.16 577.448,403.636 568.166,396.122 C558.884,388.608 551.444,379.032 545.846,367.392 C540.247,355.753 537.3,341.683 537.006,325.182 L594.464,325.182 C594.759,332.254 596.085,338.368 598.442,343.525 C600.8,348.681 603.893,352.954 607.724,356.343 C611.554,359.731 616.048,362.236 621.204,363.856 C626.361,365.477 631.739,366.287 637.337,366.287 C649.713,366.287 659.879,362.604 667.835,355.237 C675.79,347.871 679.768,336.969 679.768,322.53 C679.768,309.27 675.938,298.737 668.277,290.928 C660.615,283.12 649.713,279.215 635.569,279.215 L627.172,279.215 L627.172,229.271 L635.569,229.271 C649.713,229.271 659.879,225.514 666.067,218 C672.254,210.486 675.348,201.13 675.348,189.934 C675.348,176.674 671.518,166.656 663.857,159.878 C656.195,153.101 647.208,149.713 636.895,149.713 C625.993,149.713 616.932,153.028 609.713,159.657 C602.493,166.287 598.59,175.643 598,187.724 L540.542,187.724 C540.836,173.58 543.562,160.984 548.718,149.934 C553.875,138.884 560.799,129.454 569.492,121.646 C578.184,113.838 588.276,107.945 599.768,103.966 C611.26,99.99 623.636,98 636.895,98 C650.745,98 663.562,100.21 675.348,104.63 C687.135,109.05 697.3,115.238 705.846,123.193 C714.391,131.149 721.02,140.652 725.736,151.702 C730.45,162.752 732.806,174.906 732.806,188.166 C732.806,205.256 729.345,218.884 722.42,229.05 C715.496,239.216 706.877,247.098 696.564,252.696 C708.056,258.589 717.706,267.208 725.514,278.552 C733.323,289.897 737.227,305.145 737.227,324.298 C737.227,339.915 734.575,353.617 729.271,365.403 C723.967,377.19 716.748,386.987 707.614,394.796 C698.479,402.604 687.871,408.424 675.79,412.254 C663.71,416.084 650.892,418 637.337,418 L637.337,418 Z"
-                          id="TypeNumArr-形状"
-                        />
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  integerArray
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
       </div>
       <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+        class="studio-draggable-panel-fixed emotion-3"
+        style="position: relative; user-select: auto; background: rgb(255, 255, 255); padding: 12px; width: 400px; height: 100%; min-width: 280px; box-sizing: border-box; flex-shrink: 0;"
       >
-        <div
-          class="studio-pro-card studio-pro-card-border"
-        >
+        可拖面板
+        <div>
           <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <div
-              class="studio-field-title"
-            >
-              <div
-                class="studio-field-title-content emotion-0"
-              >
-                <span
-                  class="anticon studio-field-icon emotion-1"
-                  role="img"
-                  style="color: rgb(82, 149, 196);"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pro-editor-icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 897 496"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                  >
-                    <g
-                      fill="none"
-                      fill-rule="evenodd"
-                      id="TypeNum-页面-1"
-                      stroke="none"
-                      stroke-width="1"
-                    >
-                      <g
-                        fill="currentColor"
-                        fill-rule="nonzero"
-                        id="TypeNum-icon-icon-test3"
-                        transform="translate(0.500000, -0.000000)"
-                      >
-                        <path
-                          d="M99.31,99.994 L0,186.29 L0,90.406 L99.31,4.109 L188.345,4.109 L188.345,491.751 L99.309,491.751 L99.309,99.994 L99.31,99.994 Z M263.194,411.619 L445.374,199.989 C454.507,189.486 461.127,179.898 465.236,171.223 C469.346,162.547 471.4,152.503 471.4,141.087 C471.4,122.824 466.378,108.099 456.333,96.912 C446.288,85.725 431.677,80.132 412.5,80.132 C404.738,80.132 397.318,81.16 390.24,83.214 C383.164,85.269 376.771,88.694 371.064,93.488 C365.357,98.282 360.791,104.674 357.366,112.665 C353.942,120.655 352.229,130.585 352.229,142.457 L263.194,142.457 C263.194,120.084 267.074,100.108 274.837,82.529 C282.599,64.95 293.215,49.997 306.684,37.669 C320.154,25.341 335.906,15.981 353.942,9.589 C371.977,3.195 391.496,5.68434189e-14 412.5,5.68434189e-14 C433.96,5.68434189e-14 453.821,3.31 472.085,9.93 C490.349,16.552 505.987,25.912 519,38.011 C532.013,50.111 542.172,64.951 549.478,82.529 C556.783,100.109 560.436,119.856 560.436,141.772 C560.436,153.644 559.295,164.26 557.012,173.62 C554.748868,182.927687 551.295766,191.904944 546.738,200.33 C542.172,208.778 536.579,217.339 529.958,226.014 C523.338,234.689 515.918,243.821 507.7,253.41 L371.406,411.62 L560.436,411.62 L560.436,491.751 L263.194,491.751 L263.194,411.62 L263.194,411.619 Z M741.214,495.861 C721.124,495.861 701.834,493.121 683.341,487.642 C664.849,482.163 648.412,473.602 634.029,461.959 C619.647,450.316 608.118,435.476 599.442,417.441 C590.767,399.405 586.202,377.603 585.745,352.034 L674.78,352.034 C675.237,362.992 677.292,372.466 680.944,380.457 C684.597,388.447 689.391,395.067 695.327,400.319 C701.263,405.569 708.226,409.45 716.217,411.962 C724.207,414.473 732.539,415.729 741.215,415.729 C760.392,415.729 776.145,410.021 788.472,398.606 C800.8,387.191 806.964,370.298 806.964,347.924 C806.964,327.378 801.029,311.054 789.157,298.954 C777.286,286.855 760.392,280.805 738.475,280.805 L725.462,280.805 L725.462,203.413 L738.475,203.413 C760.392,203.413 776.145,197.591 785.733,185.948 C795.321,174.305 800.115,159.808 800.115,142.458 C800.115,121.91 794.18,106.386 782.308,95.885 C770.437,85.383 756.511,80.132 740.53,80.132 C723.636,80.132 709.596,85.269 698.41,95.542 C687.222,105.816 681.173,120.312 680.26,139.032 L591.224,139.032 C591.68,117.116 595.904,97.597 603.894,80.475 C611.884,63.352 622.614,48.741 636.084,36.642 C649.554,24.542 665.192,15.41 682.999,9.246 C700.806,3.082 719.983,0 740.529,0 C761.989,0 781.851,3.424 800.115,10.273 C818.379,17.123 834.131,26.711 847.373,39.039 C860.614,51.367 870.887,66.092 878.193,83.214 C885.498,100.337 889.151,119.171 889.151,139.718 C889.151,166.2 883.786,187.318 873.056,203.07 C862.326,218.823 848.971,231.036 832.99,239.712 C850.797,248.844 865.75,262.199 877.85,279.778 C889.95,297.357 896,320.985 896,350.664 C896,374.864 891.89,396.095 883.672,414.359 C875.453,432.623 864.267,447.804 850.112,459.904 C835.958,472.004 819.521,481.021 800.8,486.957 C782.08,492.893 762.218,495.861 741.215,495.861 L741.214,495.861 Z"
-                          id="TypeNum-形状"
-                        />
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  number
-                </span>
-              </div>
-            </div>
-          </div>
+            class="emotion-4 studio-draggable-panel-left-handle"
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
+          />
         </div>
       </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<DraggablePanel /> > renders bottom.tsx correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-1 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  position: relative;
+  border: 0 solid rgba(5, 5, 5, 0.06);
+}
+
+.emotion-1:hover .studio-draggable-panel-toggle {
+  opacity: 1;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-3 {
+  position: absolute;
+  opacity: 0;
+  z-index: 1001;
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
+  border-radius: 4px;
+  cursor: pointer;
+  background: #ffffff;
+  border-width: 1px;
+  border-style: solid;
+  color: rgba(0, 0, 0, 0.45);
+  border-color: #d9d9d9;
+  height: 16px;
+  width: 40px;
+  top: -17px;
+  left: 50%;
+  margin-left: -20px;
+  border-radius: 4px 4px 0 0;
+  border-bottom-width: 0;
+}
+
+.emotion-3:hover {
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.emotion-4 {
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.emotion-5 {
+  position: relative;
+}
+
+.emotion-5::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-5:hover::before,
+.emotion-5:active::before {
+  background: #1677ff;
+}
+
+.emotion-5::before {
+  top: 50%;
+  height: 2px;
+  width: 100%;
+}
+
+<div>
+  <div
+    class="layoutkit-flexbox emotion-0"
+    style="background: rgb(241, 241, 241); border: 2px solid #ddd; height: 300px;"
+  >
+    <div
+      style="flex: 1; padding: 12px;"
+    >
+      内容
+    </div>
+    <div
+      class="studio-draggable-panel emotion-1"
+      style="border-top-width: 1px;"
+    >
       <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+        class="layoutkit-center emotion-2 studio-draggable-panel-toggle studio-draggable-panel-toggle-top emotion-3"
       >
-        <div
-          class="studio-pro-card studio-pro-card-border"
+        <span
+          aria-label="up"
+          class="anticon anticon-up"
+          role="img"
         >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
+          <svg
+            aria-hidden="true"
+            data-icon="up"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            style="transform: rotate(180deg);"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <div
-              class="studio-field-title"
-            >
-              <div
-                class="studio-field-title-content emotion-0"
-              >
-                <span
-                  class="anticon studio-field-icon emotion-1"
-                  role="img"
-                  style="color: rgb(35, 155, 239);"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pro-editor-icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 897 516"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                  >
-                    <g
-                      fill="none"
-                      fill-rule="evenodd"
-                      id="TypeNumArr-页面-1"
-                      stroke="none"
-                      stroke-width="1"
-                    >
-                      <g
-                        fill="currentColor"
-                        fill-rule="nonzero"
-                        id="TypeNumArr-icon-icon-test1"
-                        transform="translate(0.500000, 0.000000)"
-                      >
-                        <path
-                          d="M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z M223.088,162.53 L159,218.221 L159,156.343 L223.088,100.652 L280.547,100.652 L280.547,415.348 L223.088,415.348 L223.088,162.53 L223.088,162.53 Z M328.85,363.635 L446.42,227.061 C452.312,220.284 456.585,214.096 459.237,208.497 C461.889,202.899 463.215,196.417 463.215,189.05 C463.215,177.263 459.973,167.76 453.491,160.541 C447.008,153.322 437.579,149.713 425.204,149.713 C420.194,149.713 415.406,150.376 410.839,151.702 C406.272,153.028 402.147,155.238 398.463,158.332 C394.78,161.425 391.833,165.551 389.623,170.707 C387.413,175.864 386.309,182.273 386.309,189.934 L328.85,189.934 C328.85,175.495 331.355,162.604 336.364,151.26 C341.374,139.915 348.224,130.265 356.916,122.31 C365.609,114.354 375.774,108.313 387.414,104.188 C399.053,100.063 411.649,98 425.204,98 C439.053,98 451.87,100.136 463.657,104.409 C475.443,108.681 485.535,114.722 493.933,122.53 C502.331,130.339 508.887,139.915 513.601,151.26 C518.316,162.604 520.674,175.348 520.674,189.492 C520.674,197.152 519.937,204.004 518.463,210.044 C517.002664,216.050947 514.774313,221.84466 511.833,227.282 C508.887,232.733 505.277,238.258 501.005,243.856 C496.732,249.455 491.944,255.348 486.64,261.536 L398.684,363.636 L520.674,363.636 L520.674,415.348 L328.85,415.348 L328.85,363.635 Z M637.337,418 C624.372,418 611.923,416.232 599.989,412.696 C588.055,409.16 577.448,403.636 568.166,396.122 C558.884,388.608 551.444,379.032 545.846,367.392 C540.247,355.753 537.3,341.683 537.006,325.182 L594.464,325.182 C594.759,332.254 596.085,338.368 598.442,343.525 C600.8,348.681 603.893,352.954 607.724,356.343 C611.554,359.731 616.048,362.236 621.204,363.856 C626.361,365.477 631.739,366.287 637.337,366.287 C649.713,366.287 659.879,362.604 667.835,355.237 C675.79,347.871 679.768,336.969 679.768,322.53 C679.768,309.27 675.938,298.737 668.277,290.928 C660.615,283.12 649.713,279.215 635.569,279.215 L627.172,279.215 L627.172,229.271 L635.569,229.271 C649.713,229.271 659.879,225.514 666.067,218 C672.254,210.486 675.348,201.13 675.348,189.934 C675.348,176.674 671.518,166.656 663.857,159.878 C656.195,153.101 647.208,149.713 636.895,149.713 C625.993,149.713 616.932,153.028 609.713,159.657 C602.493,166.287 598.59,175.643 598,187.724 L540.542,187.724 C540.836,173.58 543.562,160.984 548.718,149.934 C553.875,138.884 560.799,129.454 569.492,121.646 C578.184,113.838 588.276,107.945 599.768,103.966 C611.26,99.99 623.636,98 636.895,98 C650.745,98 663.562,100.21 675.348,104.63 C687.135,109.05 697.3,115.238 705.846,123.193 C714.391,131.149 721.02,140.652 725.736,151.702 C730.45,162.752 732.806,174.906 732.806,188.166 C732.806,205.256 729.345,218.884 722.42,229.05 C715.496,239.216 706.877,247.098 696.564,252.696 C708.056,258.589 717.706,267.208 725.514,278.552 C733.323,289.897 737.227,305.145 737.227,324.298 C737.227,339.915 734.575,353.617 729.271,365.403 C723.967,377.19 716.748,386.987 707.614,394.796 C698.479,402.604 687.871,408.424 675.79,412.254 C663.71,416.084 650.892,418 637.337,418 L637.337,418 Z"
-                          id="TypeNumArr-形状"
-                        />
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  numberArray
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
+            <path
+              d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+            />
+          </svg>
+        </span>
       </div>
       <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+        class="studio-draggable-panel-fixed emotion-4"
+        style="position: relative; user-select: auto; background: rgb(255, 255, 255); width: 100%; padding: 12px; height: 150px; min-width: 280px; box-sizing: border-box; flex-shrink: 0;"
       >
+        底部面板
+        <div>
+          <div
+            class="studio-draggable-panel-top-handle emotion-5"
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<DraggablePanel /> > renders controlFloat.tsx correctly 1`] = `
+.emotion-0 {
+  overflow: hidden;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  z-index: 2000;
+}
+
+.emotion-1 {
+  position: relative;
+}
+
+.emotion-1::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-1:hover::before,
+.emotion-1:active::before {
+  background: #1677ff;
+}
+
+.emotion-1::before {
+  top: 50%;
+  height: 2px;
+  width: 100%;
+}
+
+.emotion-2 {
+  position: relative;
+}
+
+.emotion-2::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-2:hover::before,
+.emotion-2:active::before {
+  background: #1677ff;
+}
+
+.emotion-2::before {
+  right: 50%;
+  width: 2px;
+  height: 100%;
+}
+
+.emotion-3 {
+  position: relative;
+}
+
+.emotion-3::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-3:hover::before,
+.emotion-3:active::before {
+  background: #1677ff;
+}
+
+.emotion-3::before {
+  bottom: 50%;
+  height: 2px;
+  width: 100%;
+}
+
+.emotion-4 {
+  position: relative;
+}
+
+.emotion-4::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-4:hover::before,
+.emotion-4:active::before {
+  background: #1677ff;
+}
+
+.emotion-4::before {
+  left: 50%;
+  width: 2px;
+  height: 100%;
+}
+
+<div>
+  <div
+    style="background: rgb(241, 241, 241); border: 2px solid #ddd; height: 500px; display: flex;"
+  >
+    <div
+      style="flex: 1; padding: 12px;"
+    >
+      内容
+    </div>
+    <div
+      bound="parent"
+      class="studio-draggable-panel-float emotion-0 react-draggable"
+      style="position: absolute; user-select: auto; width: 400px; height: 300px; display: inline-block; top: 0px; left: 0px; cursor: move; background: rgb(255, 255, 255); padding: 12px; transform: translate(200px,200px); max-width: 9007199254740991px; max-height: 9007199254740991px; min-width: 280px; min-height: 200px; box-sizing: border-box; flex-shrink: 0;"
+    >
+      悬浮可拖拽面板
+      <div>
+        <div
+          class="studio-draggable-panel-top-handle emotion-1"
+          style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+        />
+        <div
+          class="emotion-2 studio-draggable-panel-right-handle"
+          style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; right: -5px; cursor: col-resize;"
+        />
+        <div
+          class="studio-draggable-panel-bottom-handle emotion-3"
+          style="position: absolute; user-select: none; width: 100%; height: 10px; bottom: -5px; left: 0px; cursor: row-resize;"
+        />
+        <div
+          class="emotion-4 studio-draggable-panel-left-handle"
+          style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+        />
         <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <div
-              class="studio-field-title"
-            >
-              <div
-                class="studio-field-title-content emotion-0"
-              >
-                <span
-                  class="anticon studio-field-icon emotion-1"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pro-editor-icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 1024 1024"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                  >
-                    <g
-                      fill="none"
-                      fill-rule="evenodd"
-                      id="TypeObj-type-obj"
-                      stroke="none"
-                      stroke-width="1"
-                    >
-                      <g
-                        fill="currentColor"
-                        fill-rule="nonzero"
-                        id="TypeObj-编组"
-                        transform="translate(271.000000, 254.000000)"
-                      >
-                        <path
-                          d="M305,444 L334.355,444 C340.495,444 345.387,441.8 349.032,437.4 C352.677,433 354.5,428 354.5,422.4 L354.5,318 C354.5,306.8 355.939,297.6 358.817,290.4 C361.695,283.2 365.244,277.4 369.465,273 C373.686,268.6 377.907,265.4 382.128,263.4 C386.348,261.4 391.145,259.6 396.518,258 C391.145,256.4 386.253,254.5 381.84,252.3 C377.427,250.1 373.302,247 369.465,243 C365.628,239 362.175,233.3 359.105,225.9 C356.035,218.5 354.5,209.2 354.5,198 L354.5,93.6 C354.5,88 352.677,83 349.032,78.6 C345.387,74.2 340.494,72 334.355,72 L305,72 L305,0 L351.622,0 C362.366,0 372.727,1.8 382.703,5.4 C392.68,9 401.506,14.8 409.18,22.8 C415.704,29.6 421.076,38.3 425.297,48.9 C429.517,59.5 431.627,72.2 431.627,87 L431.627,200.4 C431.627,206 433.451,211 437.096,215.4 C440.741,219.8 445.634,222 451.773,222 L481.128,222 L481.128,294 L451.773,294 C445.633,294 440.741,296.2 437.096,300.6 C433.451,305 431.628,310 431.628,315.6 L431.628,429 C431.628,443.8 429.518,456.5 425.297,467.1 C421.076,477.7 415.704,486.4 409.18,493.2 C401.506,501.2 392.68,507 382.703,510.6 C372.727,514.2 362.366,516 351.623,516 L305,516 L305,444 Z M176.128,444 L146.773,444 C140.633,444 135.741,441.8 132.096,437.4 C128.451,433 126.628,428 126.628,422.4 L126.628,318 C126.628,306.8 125.189,297.6 122.311,290.4 C119.433,283.2 115.884,277.4 111.663,273 C107.442,268.6 103.221,265.4 99,263.4 C94.779,261.4 89.983,259.6 84.61,258 C89.983,256.4 94.875,254.5 99.288,252.3 C103.701,250.1 107.826,247 111.663,243 C115.5,239 118.953,233.3 122.023,225.9 C125.093,218.5 126.628,209.2 126.628,198 L126.628,93.6 C126.628,88 128.451,83 132.096,78.6 C135.741,74.2 140.634,72 146.773,72 L176.128,72 L176.128,0 L129.506,0 C118.762,0 108.401,1.8 98.424,5.4 C88.448,9 79.622,14.8 71.948,22.8 C65.424,29.6 60.052,38.3 55.831,48.9 C51.611,59.5 49.5,72.2 49.5,87 L49.5,200.4 C49.5,206 47.677,211 44.032,215.4 C40.387,219.8 35.494,222 29.355,222 L0,222 L0,294 L29.355,294 C35.495,294 40.387,296.2 44.032,300.6 C47.677,305 49.5,310 49.5,315.6 L49.5,429 C49.5,443.8 51.61,456.5 55.831,467.1 C60.052,477.7 65.424,486.4 71.948,493.2 C79.622,501.2 88.448,507 98.424,510.6 C108.401,514.2 118.762,516 129.506,516 L176.128,516 L176.128,444 L176.128,444 Z"
-                          id="TypeObj-形状"
-                        />
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  object
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+        />
       </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<DraggablePanel /> > renders float.tsx correctly 1`] = `
+.emotion-0 {
+  overflow: hidden;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  z-index: 2000;
+}
+
+.emotion-1 {
+  position: relative;
+}
+
+.emotion-1::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-1:hover::before,
+.emotion-1:active::before {
+  background: #1677ff;
+}
+
+.emotion-1::before {
+  top: 50%;
+  height: 2px;
+  width: 100%;
+}
+
+.emotion-2 {
+  position: relative;
+}
+
+.emotion-2::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-2:hover::before,
+.emotion-2:active::before {
+  background: #1677ff;
+}
+
+.emotion-2::before {
+  right: 50%;
+  width: 2px;
+  height: 100%;
+}
+
+.emotion-3 {
+  position: relative;
+}
+
+.emotion-3::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-3:hover::before,
+.emotion-3:active::before {
+  background: #1677ff;
+}
+
+.emotion-3::before {
+  bottom: 50%;
+  height: 2px;
+  width: 100%;
+}
+
+.emotion-4 {
+  position: relative;
+}
+
+.emotion-4::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-4:hover::before,
+.emotion-4:active::before {
+  background: #1677ff;
+}
+
+.emotion-4::before {
+  left: 50%;
+  width: 2px;
+  height: 100%;
+}
+
+<div>
+  <div
+    style="background: rgb(241, 241, 241); border: 2px solid #ddd; height: 500px; display: flex;"
+  >
+    <div
+      style="flex: 1; padding: 12px;"
+    >
+      内容
+    </div>
+    <div
+      bound="parent"
+      class="studio-draggable-panel-float emotion-0 react-draggable"
+      style="position: absolute; user-select: auto; width: 400px; height: 300px; display: inline-block; top: 0px; left: 0px; cursor: move; background: rgb(255, 255, 255); padding: 12px; transform: translate(200px,200px); max-width: 9007199254740991px; max-height: 9007199254740991px; min-width: 280px; min-height: 200px; box-sizing: border-box; flex-shrink: 0;"
+    >
+      悬浮可拖拽面板
+      <div>
         <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <div
-              class="studio-field-title"
-            >
-              <div
-                class="studio-field-title-content emotion-0"
-              >
-                <span
-                  class="anticon studio-field-icon emotion-1"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pro-editor-icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 656 381"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                  >
-                    <g
-                      fill="none"
-                      fill-rule="evenodd"
-                      id="TypeObjArr-页面-1"
-                      stroke="none"
-                      stroke-width="1"
-                    >
-                      <g
-                        fill="currentColor"
-                        fill-rule="nonzero"
-                        id="TypeObjArr-icon-icon-test4"
-                        transform="translate(0.228000, 0.125000)"
-                      >
-                        <path
-                          d="M103.855,53.023 L60.245,53.023 L60.245,326.977 L103.855,326.977 L103.855,380 L0,380 L0,0 L103.855,0 L103.855,53.023 Z M551.145,53.023 L551.145,0 L655,0 L655,380 L551.145,380 L551.145,326.977 L594.755,326.977 L594.755,53.023 L551.145,53.023 Z M389,326.977 L410.991,326.977 C415.591,326.977 419.256,325.357 421.987,322.117 C424.717,318.876 426.083,315.194 426.083,311.07 L426.083,234.186 C426.083,225.938 427.161,219.163 429.317,213.86 C431.473,208.558 434.132,204.287 437.294,201.047 C440.456,197.807 443.618,195.45 446.78,193.977 C449.942,192.504 453.535,191.178 457.56,190 C453.535,188.822 449.87,187.422 446.565,185.802 C443.259,184.182 440.168,181.899 437.294,178.953 C434.419,176.008 431.833,171.81 429.533,166.36 C427.233,160.91 426.083,154.062 426.083,145.814 L426.083,68.93 C426.083,64.806 424.717,61.124 421.987,57.884 C419.256,54.644 415.59,53.024 410.991,53.024 L389,53.024 L389,0 L423.927,0 C431.976,0 439.737,1.326 447.211,3.977 C454.685,6.627 461.297,10.899 467.046,16.791 C471.934,21.798 475.958,28.205 479.12,36.011 C482.282,43.818 483.862,53.171 483.862,64.07 L483.862,147.581 C483.862,151.705 485.229,155.388 487.96,158.628 C490.69,161.868 494.356,163.488 498.955,163.488 L520.946,163.488 L520.946,216.512 L498.955,216.512 C494.355,216.512 490.69,218.132 487.96,221.372 C485.229,224.612 483.863,228.295 483.863,232.419 L483.863,315.93 C483.863,326.83 482.283,336.182 479.12,343.988 C475.958,351.795 471.934,358.202 467.046,363.209 C461.297,369.101 454.686,373.372 447.211,376.023 C439.738,378.674 431.976,380 423.928,380 L389,380 L389,326.977 Z M265.947,326.977 L265.947,380 L231.019,380 C222.97,380 215.209,378.674 207.734,376.023 C200.261,373.373 193.649,369.101 187.9,363.209 C183.012,358.202 178.988,351.795 175.826,343.989 C172.664,336.182 171.083,326.829 171.083,315.93 L171.083,232.42 C171.083,228.296 169.717,224.613 166.987,221.373 C164.256,218.133 160.591,216.513 155.991,216.513 L134,216.513 L134,163.489 L155.991,163.489 C160.591,163.489 164.256,161.869 166.987,158.629 C169.717,155.389 171.083,151.706 171.083,147.582 L171.083,64.07 C171.083,53.17 172.664,43.818 175.826,36.012 C178.988,28.205 183.012,21.798 187.9,16.791 C193.649,10.899 200.26,6.628 207.734,3.977 C215.208,1.326 222.97,0 231.02,0 L265.947,0 L265.947,53.023 L243.956,53.023 C239.356,53.023 235.691,54.643 232.961,57.883 C230.23,61.124 228.864,64.806 228.864,68.93 L228.864,145.814 C228.864,154.062 227.714,160.911 225.414,166.36 C223.114,171.81 220.528,176.008 217.654,178.953 C214.779,181.899 211.688,184.183 208.382,185.803 C205.076,187.423 201.412,188.822 197.386,190 C201.412,191.178 205.005,192.504 208.166,193.977 C211.329,195.45 214.491,197.807 217.653,201.047 C220.815,204.287 223.474,208.558 225.63,213.86 C227.786,219.163 228.864,225.938 228.864,234.186 L228.864,311.07 C228.864,315.194 230.23,318.876 232.961,322.116 C235.691,325.356 239.356,326.976 243.956,326.976 L265.947,326.976 L265.947,326.977 Z"
-                          id="TypeObjArr-形状"
-                        />
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  objectArray
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
+          class="studio-draggable-panel-top-handle emotion-1"
+          style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+        />
+        <div
+          class="emotion-2 studio-draggable-panel-right-handle"
+          style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; right: -5px; cursor: col-resize;"
+        />
         <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <div
-              class="studio-field-title"
-            >
-              <div
-                class="studio-field-title-content emotion-0"
-              >
-                <span
-                  class="anticon studio-field-icon emotion-1"
-                  role="img"
-                  style="color: rgb(20, 158, 109);"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pro-editor-icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 897 496"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                  >
-                    <g
-                      fill="none"
-                      fill-rule="evenodd"
-                      id="TypeSting-页面-1"
-                      stroke="none"
-                      stroke-width="1"
-                    >
-                      <g
-                        fill="currentColor"
-                        fill-rule="nonzero"
-                        id="TypeSting-icon-Abc1"
-                        transform="translate(0.228000, 0.000000)"
-                      >
-                        <path
-                          d="M376.221,490.077 L288.895,490.077 L263.773,403.35 L113.046,403.35 L87.326,490.077 L5.68434189e-14,490.077 L155.513,0 L220.708,0 L376.221,490.077 Z M136.958,323.418 L240.913,323.418 L189.233,145.208 L136.958,323.418 Z M457.57,163.4 C467.977,150.071 479.184,140.763 491.191,135.478 C503.199,130.192 517.408,127.548 533.818,127.548 C549.428,127.548 563.637,130.307 576.445,135.822 C589.253,141.338 600.26,149.382 609.465,159.953 C616.67,168.686 622.474,178.683 626.876,189.944 C631.279,201.206 634.581,213.271 636.783,226.141 C638.984,239.011 640.385,252.57 640.985,266.819 C641.585,281.067 641.885,295.775 641.885,310.944 C641.885,326.112 641.585,340.934 640.985,355.414 C640.385,369.892 638.984,383.566 636.783,396.436 C634.581,409.306 631.279,421.371 626.876,432.632 C622.474,443.893 616.67,453.89 609.466,462.623 C600.26,473.195 589.153,481.239 576.145,486.754 C563.136,492.27 548.828,495.028 533.218,495.028 C516.407,495.028 501.998,492.155 489.991,486.409 C477.983,480.664 466.376,470.897 455.169,457.108 L455.169,490.891 L379.52,490.891 L379.52,0 L457.57,0 L457.57,163.4 L457.57,163.4 Z M509.58,207.912 C498.045,207.912 488.797,210.556 481.836,215.845 C474.876,221.134 469.605,228.377 466.026,237.575 C462.446,246.773 460.059,257.695 458.866,270.342 C457.672,282.989 457.076,296.441 457.076,310.697 C457.076,325.414 457.672,339.096 458.866,351.743 C460.059,364.39 462.446,375.313 466.026,384.51 C469.605,393.708 474.876,400.951 481.836,406.24 C488.797,411.529 498.045,414.173 509.58,414.173 C521.513,414.173 530.96,411.529 537.92,406.24 C544.882,400.951 550.152,393.708 553.732,384.51 C557.312,375.312 559.698,364.39 560.892,351.743 C562.085,339.096 562.682,325.414 562.682,310.697 C562.682,296.441 562.085,282.989 560.892,270.342 C559.698,257.695 557.312,246.772 553.732,237.575 C550.152,228.377 544.882,221.134 537.921,215.845 C530.96,210.556 521.513,207.912 509.581,207.912 L509.58,207.912 Z M792.985,127.057 C814.547,127.057 833.612,130.969 850.182,138.793 C866.752,146.618 882.025,158.814 896,175.383 L842.696,236.137 C834.71,226.011 827.024,218.762 819.637,214.39 C812.251,210.017 803.367,207.831 792.985,207.831 C783.403,207.831 775.018,209.787 767.831,213.699 C760.644,217.611 754.255,223.479 748.665,231.304 C742.675,240.049 738.284,250.634 735.489,263.061 C732.694,275.488 731.296,291.367 731.296,310.697 C731.296,330.027 732.694,346.021 735.489,358.678 C738.284,371.335 742.676,382.036 748.665,390.781 C754.255,398.605 760.644,404.473 767.831,408.385 C775.018,412.298 783.403,414.254 792.985,414.254 C803.367,414.254 812.251,411.952 819.637,407.35 C827.024,402.747 834.71,395.613 842.696,385.948 L896,446.011 C882.025,462.58 866.753,474.891 850.182,482.946 C833.612,491 814.547,495.028 792.985,495.028 C777.413,495.028 761.342,492.266 744.772,486.743 C728.202,481.22 713.129,471.44 699.553,457.403 C685.978,443.364 674.898,424.494 666.313,400.791 C657.729,377.088 653.436,347.057 653.436,310.697 C653.436,274.337 657.729,244.307 666.313,220.603 C674.898,196.9 685.978,178.145 699.553,164.337 C713.129,150.53 728.202,140.865 744.773,135.342 C761.343,129.819 777.413,127.057 792.985,127.057 L792.985,127.057 Z"
-                          id="TypeSting-形状"
-                        />
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  string
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
+          class="studio-draggable-panel-bottom-handle emotion-3"
+          style="position: absolute; user-select: none; width: 100%; height: 10px; bottom: -5px; left: 0px; cursor: row-resize;"
+        />
         <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <div
-              class="studio-field-title"
-            >
-              <div
-                class="studio-field-title-content emotion-0"
-              >
-                <span
-                  class="anticon studio-field-icon emotion-1"
-                  role="img"
-                  style="color: rgb(98, 174, 141);"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pro-editor-icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 896 516"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                  >
-                    <g
-                      fill="none"
-                      fill-rule="evenodd"
-                      id="TypeStingArr-页面-1"
-                      stroke="none"
-                      stroke-width="1"
-                    >
-                      <g
-                        fill="currentColor"
-                        fill-rule="nonzero"
-                        id="TypeStingArr-icon-Abc2"
-                        transform="translate(0.228000, 0.000000)"
-                      >
-                        <path
-                          d="M401.2,414.8 L344.75,414.8 L328.51,358.737 L231.076,358.737 L214.45,414.8 L158,414.8 L258.528,98 L300.672,98 L401.2,414.8 Z M246.533,307.067 L313.733,307.067 L280.325,191.867 L246.533,307.067 Z M453.786,203.627 C460.514,195.01 467.758,188.994 475.52,185.577 C483.282,182.16 492.467,180.451 503.075,180.451 C513.165,180.451 522.351,182.234 530.63,185.799 C538.91,189.365 546.025,194.564 551.976,201.399 C556.633,207.044 560.385,213.506 563.231,220.786 C566.077,228.065 568.211,235.864 569.634,244.184 C571.058,252.504 571.964,261.268 572.351,270.479 C572.739,279.689 572.933,289.198 572.933,299.003 C572.933,308.808 572.739,318.39 572.351,327.749 C571.963,337.109 571.058,345.948 569.634,354.267 C568.211,362.587 566.077,370.387 563.231,377.666 C560.385,384.946 556.633,391.408 551.976,397.053 C546.025,403.887 538.846,409.086 530.436,412.652 C522.027,416.217 512.778,418 502.687,418 C491.82,418 482.506,416.143 474.744,412.429 C466.982,408.715 459.479,402.401 452.234,393.487 L452.234,415.326 L403.334,415.326 L403.334,98 L453.786,98 L453.786,203.627 Z M487.407,232.4 C479.95,232.4 473.972,234.11 469.473,237.528 C464.973,240.947 461.566,245.629 459.252,251.575 C456.938,257.521 455.395,264.581 454.624,272.757 C453.852,280.932 453.467,289.627 453.467,298.844 C453.467,308.357 453.852,317.201 454.624,325.377 C455.395,333.552 456.938,340.613 459.252,346.558 C461.566,352.504 464.973,357.186 469.472,360.605 C473.972,364.024 479.95,365.733 487.407,365.733 C495.121,365.733 501.227,364.023 505.727,360.605 C510.227,357.186 513.634,352.505 515.948,346.558 C518.262,340.613 519.805,333.552 520.576,325.377 C521.348,317.201 521.733,308.357 521.733,298.844 C521.733,289.628 521.348,280.932 520.576,272.757 C519.805,264.581 518.262,257.521 515.948,251.575 C513.634,245.629 510.227,240.947 505.728,237.528 C501.228,234.109 495.121,232.4 487.408,232.4 L487.407,232.4 Z M670.608,180.133 C684.546,180.133 696.871,182.663 707.582,187.72 C718.294,192.778 728.166,200.662 737.2,211.373 L702.743,250.645 C697.581,244.1 692.612,239.415 687.837,236.588 C683.062,233.761 677.319,232.348 670.608,232.348 C664.414,232.348 658.994,233.612 654.348,236.141 C649.702,238.671 645.572,242.464 641.958,247.521 C638.087,253.174 635.248,260.017 633.441,268.051 C631.634,276.083 630.731,286.348 630.731,298.844 C630.731,311.339 631.634,321.678 633.441,329.86 C635.248,338.042 638.087,344.959 641.959,350.612 C645.572,355.67 649.702,359.463 654.348,361.992 C658.994,364.521 664.414,365.785 670.608,365.785 C677.319,365.785 683.062,364.298 687.837,361.323 C692.612,358.347 697.581,353.736 702.743,347.488 L737.2,386.314 C728.166,397.024 718.294,404.984 707.582,410.19 C696.871,415.397 684.546,418 670.608,418 C660.542,418 650.153,416.215 639.442,412.645 C628.73,409.075 618.987,402.752 610.212,393.678 C601.436,384.603 594.273,372.405 588.724,357.083 C583.174,341.761 580.4,322.348 580.4,298.843 C580.4,275.339 583.175,255.926 588.724,240.604 C594.274,225.282 601.436,213.158 610.211,204.232 C618.987,195.307 628.731,189.059 639.442,185.489 C650.153,181.919 660.542,180.133 670.608,180.133 L670.608,180.133 Z M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z"
-                          id="TypeStingArr-形状"
-                        />
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  stringArray
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
+          class="emotion-4 studio-draggable-panel-left-handle"
+          style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
+        />
         <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <div
-              class="studio-field-title"
-            >
-              <div
-                class="studio-field-title-content emotion-0"
-              >
-                <span
-                  class="anticon studio-field-icon emotion-1"
-                  role="img"
-                  style="color: rgb(216, 193, 82);"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pro-editor-icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 791 495"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                  >
-                    <g
-                      fill="none"
-                      fill-rule="evenodd"
-                      id="TypeBool-页面-1"
-                      stroke="none"
-                      stroke-width="1"
-                    >
-                      <g
-                        fill="currentColor"
-                        fill-rule="nonzero"
-                        id="TypeBool-icon-bool1"
-                        transform="translate(0.535000, 0.000000)"
-                      >
-                        <path
-                          d="M5.68434189e-14,490.864 L5.68434189e-14,0 L70.32,0 L70.32,173.043 L71.7,173.043 C79.513,161.553 88.82,152.705 99.62,146.501 C110.421,140.296 122.716,137.194 136.504,137.194 C153.51,137.194 166.724,140.181 176.146,146.156 C185.568,152.131 193.266,159.714 199.241,168.906 C203.837,176.26 206.825,185.912 208.203,197.862 C209.583,209.812 210.272,228.426 210.272,253.705 L210.272,386.762 C210.272,406.066 209.352,421.462 207.514,432.952 C205.675,444.443 202.688,454.095 198.552,461.908 C186.602,483.97 166.149,495 137.194,495 C119.728,495 106.4,491.553 97.208,484.659 C88.015,477.765 79.053,469.262 70.32,459.15 L70.32,490.864 L5.68434189e-14,490.864 Z M139.951,248.879 C139.951,237.849 137.538,228.196 132.712,219.923 C127.886,211.65 118.809,207.513 105.481,207.513 C95.369,207.513 86.981,211.076 80.317,218.2 C73.652,225.324 70.32,234.401 70.32,245.432 L70.32,381.247 C70.32,394.116 73.538,404.572 79.972,412.615 C86.407,420.658 94.909,424.68 105.481,424.68 C117.431,424.68 126.163,420.313 131.678,411.58 C137.194,402.848 139.951,391.358 139.951,377.11 L139.951,248.879 Z M232.431,258.531 C232.431,244.283 233.351,231.184 235.189,219.234 C237.027,207.284 240.475,196.714 245.53,187.521 C253.803,172.354 265.638,160.174 281.035,150.981 C296.432,141.79 315.161,137.194 337.222,137.194 C359.284,137.194 378.012,141.79 393.41,150.982 C408.807,160.174 420.642,172.354 428.915,187.521 C433.97,196.713 437.417,207.284 439.255,219.234 C441.095,231.184 442.014,244.283 442.014,258.531 L442.014,373.663 C442.014,387.911 441.094,401.01 439.256,412.96 C437.417,424.91 433.97,435.48 428.915,444.673 C420.642,459.84 408.807,472.019 393.41,481.212 C378.013,490.404 359.284,495 337.222,495 C315.162,495 296.432,490.404 281.035,481.212 C265.638,472.019 253.803,459.84 245.53,444.672 C240.475,435.48 237.027,424.91 235.189,412.96 C233.351,401.01 232.431,387.91 232.431,373.663 L232.431,258.531 L232.431,258.531 Z M302.751,384.694 C302.751,398.022 305.854,408.019 312.059,414.684 C318.264,421.348 326.651,424.68 337.222,424.68 C347.794,424.68 356.182,421.348 362.386,414.683 C368.591,408.019 371.693,398.023 371.693,384.693 L371.693,247.5 C371.693,234.171 368.591,224.175 362.386,217.51 C356.181,210.846 347.794,207.514 337.222,207.514 C326.652,207.514 318.264,210.846 312.059,217.51 C305.854,224.175 302.752,234.171 302.752,247.5 L302.752,384.694 L302.751,384.694 Z M457.969,258.53 C457.969,244.282 458.889,231.183 460.727,219.233 C462.566,207.283 466.013,196.713 471.068,187.52 C479.341,172.353 491.176,160.173 506.573,150.98 C521.97,141.789 540.699,137.193 562.761,137.193 C584.822,137.193 603.551,141.789 618.948,150.981 C634.345,160.173 646.18,172.353 654.453,187.52 C659.509,196.712 662.956,207.283 664.794,219.233 C666.633,231.183 667.552,244.282 667.552,258.53 L667.552,373.662 C667.552,387.91 666.632,401.009 664.794,412.959 C662.956,424.909 659.509,435.479 654.453,444.672 C646.18,459.839 634.345,472.018 618.948,481.211 C603.55,490.404 584.821,495 562.76,495 C540.698,495 521.97,490.404 506.572,481.212 C491.175,472.019 479.34,459.84 471.067,444.672 C466.012,435.48 462.565,424.91 460.727,412.96 C458.887,401.01 457.969,387.91 457.969,373.663 L457.969,258.531 L457.969,258.53 Z M528.29,384.693 C528.29,398.021 531.392,408.018 537.597,414.683 C543.802,421.347 552.19,424.679 562.761,424.679 C573.331,424.679 581.72,421.347 587.924,414.682 C594.129,408.018 597.231,398.022 597.231,384.692 L597.231,247.5 C597.231,234.171 594.129,224.175 587.924,217.51 C581.72,210.846 573.332,207.514 562.761,207.514 C552.19,207.514 543.801,210.846 537.597,217.51 C531.392,224.175 528.29,234.171 528.29,247.5 L528.29,384.694 L528.29,384.693 Z M685.574,0 L755.894,0 L755.894,392.277 C755.894,405.606 758.307,414.683 763.134,419.509 C767.959,424.335 777.036,427.437 790.365,428.816 L790.365,495 C774.279,495 759.801,493.736 746.932,491.208 C734.062,488.68 723.032,483.74 713.84,476.386 C704.648,469.492 697.639,459.725 692.813,447.086 C687.987,434.446 685.574,417.786 685.574,397.103 L685.574,0 Z"
-                          id="TypeBool-形状"
-                        />
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  boolean
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-4"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+        />
         <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <div
-              class="studio-field-title"
-            >
-              <div
-                class="studio-field-title-content emotion-0"
-              >
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  empty
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+        />
       </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`<FieldTitle /> > renders description.tsx correctly 1`] = `
+exports[`<DraggablePanel /> > renders left.tsx correctly 1`] = `
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.emotion-1 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  position: relative;
+  border: 0 solid rgba(5, 5, 5, 0.06);
+}
+
+.emotion-1:hover .studio-draggable-panel-toggle {
+  opacity: 1;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  font-size: 12px;
 }
 
-.emotion-1 {
-  font-size: 14px;
+.emotion-3 {
+  position: absolute;
+  opacity: 0;
+  z-index: 1001;
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
+  border-radius: 4px;
+  cursor: pointer;
+  background: #ffffff;
+  border-width: 1px;
+  border-style: solid;
+  color: rgba(0, 0, 0, 0.45);
+  border-color: #d9d9d9;
+  width: 16px;
+  height: 40px;
+  right: -17px;
+  top: 50%;
+  margin-top: -20px;
+  border-radius: 0 4px 4px 0;
+  border-left-width: 0;
 }
 
-.emotion-2 {
-  margin-left: 4px;
+.emotion-3:hover {
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
 }
 
-.emotion-7 {
-  padding-left: 16px;
+.emotion-4 {
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.emotion-5 {
+  position: relative;
+}
+
+.emotion-5::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-5:hover::before,
+.emotion-5:active::before {
+  background: #1677ff;
+}
+
+.emotion-5::before {
+  right: 50%;
+  width: 2px;
+  height: 100%;
 }
 
 <div>
   <div
-    class="studio-pro-card studio-pro-card-contain-card studio-pro-card-ghost"
+    class="layoutkit-flexbox emotion-0"
+    style="background: rgb(241, 241, 241); border: 2px solid #ddd; height: 300px;"
   >
     <div
-      class="studio-pro-card-body studio-pro-card-body-wrap"
+      class="studio-draggable-panel emotion-1"
+      style="border-right-width: 1px;"
     >
       <div
-        class="studio-pro-card-col studio-pro-card-col-24"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
-      >
-        <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-header"
-          >
-            <div
-              class="studio-pro-card-title"
-            >
-              <div
-                class="studio-pro-core-label-tip"
-              >
-                <div
-                  class="studio-pro-core-label-tip-title"
-                >
-                  描述
-                </div>
-                <div
-                  class="studio-pro-core-label-tip-subtitle"
-                >
-                  描述在标题右边
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <div
-              class="studio-field-title"
-            >
-              <div
-                class="studio-field-title-content emotion-0"
-              >
-                <span
-                  class="anticon studio-field-icon emotion-1"
-                  role="img"
-                  style="color: rgb(216, 193, 82);"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pro-editor-icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 791 495"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                  >
-                    <g
-                      fill="none"
-                      fill-rule="evenodd"
-                      id="TypeBool-页面-1"
-                      stroke="none"
-                      stroke-width="1"
-                    >
-                      <g
-                        fill="currentColor"
-                        fill-rule="nonzero"
-                        id="TypeBool-icon-bool1"
-                        transform="translate(0.535000, 0.000000)"
-                      >
-                        <path
-                          d="M5.68434189e-14,490.864 L5.68434189e-14,0 L70.32,0 L70.32,173.043 L71.7,173.043 C79.513,161.553 88.82,152.705 99.62,146.501 C110.421,140.296 122.716,137.194 136.504,137.194 C153.51,137.194 166.724,140.181 176.146,146.156 C185.568,152.131 193.266,159.714 199.241,168.906 C203.837,176.26 206.825,185.912 208.203,197.862 C209.583,209.812 210.272,228.426 210.272,253.705 L210.272,386.762 C210.272,406.066 209.352,421.462 207.514,432.952 C205.675,444.443 202.688,454.095 198.552,461.908 C186.602,483.97 166.149,495 137.194,495 C119.728,495 106.4,491.553 97.208,484.659 C88.015,477.765 79.053,469.262 70.32,459.15 L70.32,490.864 L5.68434189e-14,490.864 Z M139.951,248.879 C139.951,237.849 137.538,228.196 132.712,219.923 C127.886,211.65 118.809,207.513 105.481,207.513 C95.369,207.513 86.981,211.076 80.317,218.2 C73.652,225.324 70.32,234.401 70.32,245.432 L70.32,381.247 C70.32,394.116 73.538,404.572 79.972,412.615 C86.407,420.658 94.909,424.68 105.481,424.68 C117.431,424.68 126.163,420.313 131.678,411.58 C137.194,402.848 139.951,391.358 139.951,377.11 L139.951,248.879 Z M232.431,258.531 C232.431,244.283 233.351,231.184 235.189,219.234 C237.027,207.284 240.475,196.714 245.53,187.521 C253.803,172.354 265.638,160.174 281.035,150.981 C296.432,141.79 315.161,137.194 337.222,137.194 C359.284,137.194 378.012,141.79 393.41,150.982 C408.807,160.174 420.642,172.354 428.915,187.521 C433.97,196.713 437.417,207.284 439.255,219.234 C441.095,231.184 442.014,244.283 442.014,258.531 L442.014,373.663 C442.014,387.911 441.094,401.01 439.256,412.96 C437.417,424.91 433.97,435.48 428.915,444.673 C420.642,459.84 408.807,472.019 393.41,481.212 C378.013,490.404 359.284,495 337.222,495 C315.162,495 296.432,490.404 281.035,481.212 C265.638,472.019 253.803,459.84 245.53,444.672 C240.475,435.48 237.027,424.91 235.189,412.96 C233.351,401.01 232.431,387.91 232.431,373.663 L232.431,258.531 L232.431,258.531 Z M302.751,384.694 C302.751,398.022 305.854,408.019 312.059,414.684 C318.264,421.348 326.651,424.68 337.222,424.68 C347.794,424.68 356.182,421.348 362.386,414.683 C368.591,408.019 371.693,398.023 371.693,384.693 L371.693,247.5 C371.693,234.171 368.591,224.175 362.386,217.51 C356.181,210.846 347.794,207.514 337.222,207.514 C326.652,207.514 318.264,210.846 312.059,217.51 C305.854,224.175 302.752,234.171 302.752,247.5 L302.752,384.694 L302.751,384.694 Z M457.969,258.53 C457.969,244.282 458.889,231.183 460.727,219.233 C462.566,207.283 466.013,196.713 471.068,187.52 C479.341,172.353 491.176,160.173 506.573,150.98 C521.97,141.789 540.699,137.193 562.761,137.193 C584.822,137.193 603.551,141.789 618.948,150.981 C634.345,160.173 646.18,172.353 654.453,187.52 C659.509,196.712 662.956,207.283 664.794,219.233 C666.633,231.183 667.552,244.282 667.552,258.53 L667.552,373.662 C667.552,387.91 666.632,401.009 664.794,412.959 C662.956,424.909 659.509,435.479 654.453,444.672 C646.18,459.839 634.345,472.018 618.948,481.211 C603.55,490.404 584.821,495 562.76,495 C540.698,495 521.97,490.404 506.572,481.212 C491.175,472.019 479.34,459.84 471.067,444.672 C466.012,435.48 462.565,424.91 460.727,412.96 C458.887,401.01 457.969,387.91 457.969,373.663 L457.969,258.531 L457.969,258.53 Z M528.29,384.693 C528.29,398.021 531.392,408.018 537.597,414.683 C543.802,421.347 552.19,424.679 562.761,424.679 C573.331,424.679 581.72,421.347 587.924,414.682 C594.129,408.018 597.231,398.022 597.231,384.692 L597.231,247.5 C597.231,234.171 594.129,224.175 587.924,217.51 C581.72,210.846 573.332,207.514 562.761,207.514 C552.19,207.514 543.801,210.846 537.597,217.51 C531.392,224.175 528.29,234.171 528.29,247.5 L528.29,384.694 L528.29,384.693 Z M685.574,0 L755.894,0 L755.894,392.277 C755.894,405.606 758.307,414.683 763.134,419.509 C767.959,424.335 777.036,427.437 790.365,428.816 L790.365,495 C774.279,495 759.801,493.736 746.932,491.208 C734.062,488.68 723.032,483.74 713.84,476.386 C704.648,469.492 697.639,459.725 692.813,447.086 C687.987,434.446 685.574,417.786 685.574,397.103 L685.574,0 Z"
-                          id="TypeBool-形状"
-                        />
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  success
-                </span>
-                <span
-                  class="studio-field-title-description emotion-2"
-                >
-                  成功标识
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-pro-card-col studio-pro-card-col-24"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+        class="layoutkit-center emotion-2 studio-draggable-panel-toggle studio-draggable-panel-toggle-right emotion-3"
       >
-        <div
-          class="studio-pro-card studio-pro-card-border"
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
         >
-          <div
-            class="studio-pro-card-header"
-          >
-            <div
-              class="studio-pro-card-title"
-            >
-              <div
-                class="studio-pro-core-label-tip"
-              >
-                <div
-                  class="studio-pro-core-label-tip-title"
-                >
-                  额外
-                </div>
-                <div
-                  class="studio-pro-core-label-tip-subtitle"
-                >
-                  额外内容在字段下面
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <div
-              class="studio-field-title"
-            >
-              <div
-                class="studio-field-title-content emotion-0"
-              >
-                <span
-                  class="anticon studio-field-icon emotion-1"
-                  role="img"
-                  style="color: rgb(216, 193, 82);"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pro-editor-icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 791 495"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                  >
-                    <g
-                      fill="none"
-                      fill-rule="evenodd"
-                      id="TypeBool-页面-1"
-                      stroke="none"
-                      stroke-width="1"
-                    >
-                      <g
-                        fill="currentColor"
-                        fill-rule="nonzero"
-                        id="TypeBool-icon-bool1"
-                        transform="translate(0.535000, 0.000000)"
-                      >
-                        <path
-                          d="M5.68434189e-14,490.864 L5.68434189e-14,0 L70.32,0 L70.32,173.043 L71.7,173.043 C79.513,161.553 88.82,152.705 99.62,146.501 C110.421,140.296 122.716,137.194 136.504,137.194 C153.51,137.194 166.724,140.181 176.146,146.156 C185.568,152.131 193.266,159.714 199.241,168.906 C203.837,176.26 206.825,185.912 208.203,197.862 C209.583,209.812 210.272,228.426 210.272,253.705 L210.272,386.762 C210.272,406.066 209.352,421.462 207.514,432.952 C205.675,444.443 202.688,454.095 198.552,461.908 C186.602,483.97 166.149,495 137.194,495 C119.728,495 106.4,491.553 97.208,484.659 C88.015,477.765 79.053,469.262 70.32,459.15 L70.32,490.864 L5.68434189e-14,490.864 Z M139.951,248.879 C139.951,237.849 137.538,228.196 132.712,219.923 C127.886,211.65 118.809,207.513 105.481,207.513 C95.369,207.513 86.981,211.076 80.317,218.2 C73.652,225.324 70.32,234.401 70.32,245.432 L70.32,381.247 C70.32,394.116 73.538,404.572 79.972,412.615 C86.407,420.658 94.909,424.68 105.481,424.68 C117.431,424.68 126.163,420.313 131.678,411.58 C137.194,402.848 139.951,391.358 139.951,377.11 L139.951,248.879 Z M232.431,258.531 C232.431,244.283 233.351,231.184 235.189,219.234 C237.027,207.284 240.475,196.714 245.53,187.521 C253.803,172.354 265.638,160.174 281.035,150.981 C296.432,141.79 315.161,137.194 337.222,137.194 C359.284,137.194 378.012,141.79 393.41,150.982 C408.807,160.174 420.642,172.354 428.915,187.521 C433.97,196.713 437.417,207.284 439.255,219.234 C441.095,231.184 442.014,244.283 442.014,258.531 L442.014,373.663 C442.014,387.911 441.094,401.01 439.256,412.96 C437.417,424.91 433.97,435.48 428.915,444.673 C420.642,459.84 408.807,472.019 393.41,481.212 C378.013,490.404 359.284,495 337.222,495 C315.162,495 296.432,490.404 281.035,481.212 C265.638,472.019 253.803,459.84 245.53,444.672 C240.475,435.48 237.027,424.91 235.189,412.96 C233.351,401.01 232.431,387.91 232.431,373.663 L232.431,258.531 L232.431,258.531 Z M302.751,384.694 C302.751,398.022 305.854,408.019 312.059,414.684 C318.264,421.348 326.651,424.68 337.222,424.68 C347.794,424.68 356.182,421.348 362.386,414.683 C368.591,408.019 371.693,398.023 371.693,384.693 L371.693,247.5 C371.693,234.171 368.591,224.175 362.386,217.51 C356.181,210.846 347.794,207.514 337.222,207.514 C326.652,207.514 318.264,210.846 312.059,217.51 C305.854,224.175 302.752,234.171 302.752,247.5 L302.752,384.694 L302.751,384.694 Z M457.969,258.53 C457.969,244.282 458.889,231.183 460.727,219.233 C462.566,207.283 466.013,196.713 471.068,187.52 C479.341,172.353 491.176,160.173 506.573,150.98 C521.97,141.789 540.699,137.193 562.761,137.193 C584.822,137.193 603.551,141.789 618.948,150.981 C634.345,160.173 646.18,172.353 654.453,187.52 C659.509,196.712 662.956,207.283 664.794,219.233 C666.633,231.183 667.552,244.282 667.552,258.53 L667.552,373.662 C667.552,387.91 666.632,401.009 664.794,412.959 C662.956,424.909 659.509,435.479 654.453,444.672 C646.18,459.839 634.345,472.018 618.948,481.211 C603.55,490.404 584.821,495 562.76,495 C540.698,495 521.97,490.404 506.572,481.212 C491.175,472.019 479.34,459.84 471.067,444.672 C466.012,435.48 462.565,424.91 460.727,412.96 C458.887,401.01 457.969,387.91 457.969,373.663 L457.969,258.531 L457.969,258.53 Z M528.29,384.693 C528.29,398.021 531.392,408.018 537.597,414.683 C543.802,421.347 552.19,424.679 562.761,424.679 C573.331,424.679 581.72,421.347 587.924,414.682 C594.129,408.018 597.231,398.022 597.231,384.692 L597.231,247.5 C597.231,234.171 594.129,224.175 587.924,217.51 C581.72,210.846 573.332,207.514 562.761,207.514 C552.19,207.514 543.801,210.846 537.597,217.51 C531.392,224.175 528.29,234.171 528.29,247.5 L528.29,384.694 L528.29,384.693 Z M685.574,0 L755.894,0 L755.894,392.277 C755.894,405.606 758.307,414.683 763.134,419.509 C767.959,424.335 777.036,427.437 790.365,428.816 L790.365,495 C774.279,495 759.801,493.736 746.932,491.208 C734.062,488.68 723.032,483.74 713.84,476.386 C704.648,469.492 697.639,459.725 692.813,447.086 C687.987,434.446 685.574,417.786 685.574,397.103 L685.574,0 Z"
-                          id="TypeBool-形状"
-                        />
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  success
-                </span>
-              </div>
-              <div
-                class="studio-field-title-extra emotion-7"
-              >
-                额外内容
-              </div>
-            </div>
-          </div>
-        </div>
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            style="transform: rotate(180deg);"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
       </div>
       <div
-        class="studio-pro-card-col studio-pro-card-col-24"
-        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+        class="studio-draggable-panel-fixed emotion-4"
+        style="position: relative; user-select: auto; background: rgb(255, 255, 255); width: 400px; padding: 12px; height: 100%; min-width: 280px; box-sizing: border-box; flex-shrink: 0;"
       >
-        <div
-          class="studio-pro-card studio-pro-card-border"
-        >
-          <div
-            class="studio-pro-card-header"
-          >
-            <div
-              class="studio-pro-card-title"
-            >
-              <div
-                class="studio-pro-core-label-tip"
-              >
-                <div
-                  class="studio-pro-core-label-tip-title"
-                >
-                  可选
-                </div>
-                <div
-                  class="studio-pro-core-label-tip-subtitle"
-                >
-                  可选为false 则额外内容左侧有 padding
-                </div>
-              </div>
-            </div>
-          </div>
+        左侧面板
+        <div>
           <div
-            class="studio-pro-card-body studio-pro-card-body-center"
-          >
-            <div
-              class="studio-field-title"
-            >
-              <div
-                class="studio-field-title-content emotion-0"
-              >
-                <span
-                  class="anticon studio-field-icon emotion-1"
-                  role="img"
-                  style="color: rgb(216, 193, 82);"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pro-editor-icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 791 495"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                  >
-                    <g
-                      fill="none"
-                      fill-rule="evenodd"
-                      id="TypeBool-页面-1"
-                      stroke="none"
-                      stroke-width="1"
-                    >
-                      <g
-                        fill="currentColor"
-                        fill-rule="nonzero"
-                        id="TypeBool-icon-bool1"
-                        transform="translate(0.535000, 0.000000)"
-                      >
-                        <path
-                          d="M5.68434189e-14,490.864 L5.68434189e-14,0 L70.32,0 L70.32,173.043 L71.7,173.043 C79.513,161.553 88.82,152.705 99.62,146.501 C110.421,140.296 122.716,137.194 136.504,137.194 C153.51,137.194 166.724,140.181 176.146,146.156 C185.568,152.131 193.266,159.714 199.241,168.906 C203.837,176.26 206.825,185.912 208.203,197.862 C209.583,209.812 210.272,228.426 210.272,253.705 L210.272,386.762 C210.272,406.066 209.352,421.462 207.514,432.952 C205.675,444.443 202.688,454.095 198.552,461.908 C186.602,483.97 166.149,495 137.194,495 C119.728,495 106.4,491.553 97.208,484.659 C88.015,477.765 79.053,469.262 70.32,459.15 L70.32,490.864 L5.68434189e-14,490.864 Z M139.951,248.879 C139.951,237.849 137.538,228.196 132.712,219.923 C127.886,211.65 118.809,207.513 105.481,207.513 C95.369,207.513 86.981,211.076 80.317,218.2 C73.652,225.324 70.32,234.401 70.32,245.432 L70.32,381.247 C70.32,394.116 73.538,404.572 79.972,412.615 C86.407,420.658 94.909,424.68 105.481,424.68 C117.431,424.68 126.163,420.313 131.678,411.58 C137.194,402.848 139.951,391.358 139.951,377.11 L139.951,248.879 Z M232.431,258.531 C232.431,244.283 233.351,231.184 235.189,219.234 C237.027,207.284 240.475,196.714 245.53,187.521 C253.803,172.354 265.638,160.174 281.035,150.981 C296.432,141.79 315.161,137.194 337.222,137.194 C359.284,137.194 378.012,141.79 393.41,150.982 C408.807,160.174 420.642,172.354 428.915,187.521 C433.97,196.713 437.417,207.284 439.255,219.234 C441.095,231.184 442.014,244.283 442.014,258.531 L442.014,373.663 C442.014,387.911 441.094,401.01 439.256,412.96 C437.417,424.91 433.97,435.48 428.915,444.673 C420.642,459.84 408.807,472.019 393.41,481.212 C378.013,490.404 359.284,495 337.222,495 C315.162,495 296.432,490.404 281.035,481.212 C265.638,472.019 253.803,459.84 245.53,444.672 C240.475,435.48 237.027,424.91 235.189,412.96 C233.351,401.01 232.431,387.91 232.431,373.663 L232.431,258.531 L232.431,258.531 Z M302.751,384.694 C302.751,398.022 305.854,408.019 312.059,414.684 C318.264,421.348 326.651,424.68 337.222,424.68 C347.794,424.68 356.182,421.348 362.386,414.683 C368.591,408.019 371.693,398.023 371.693,384.693 L371.693,247.5 C371.693,234.171 368.591,224.175 362.386,217.51 C356.181,210.846 347.794,207.514 337.222,207.514 C326.652,207.514 318.264,210.846 312.059,217.51 C305.854,224.175 302.752,234.171 302.752,247.5 L302.752,384.694 L302.751,384.694 Z M457.969,258.53 C457.969,244.282 458.889,231.183 460.727,219.233 C462.566,207.283 466.013,196.713 471.068,187.52 C479.341,172.353 491.176,160.173 506.573,150.98 C521.97,141.789 540.699,137.193 562.761,137.193 C584.822,137.193 603.551,141.789 618.948,150.981 C634.345,160.173 646.18,172.353 654.453,187.52 C659.509,196.712 662.956,207.283 664.794,219.233 C666.633,231.183 667.552,244.282 667.552,258.53 L667.552,373.662 C667.552,387.91 666.632,401.009 664.794,412.959 C662.956,424.909 659.509,435.479 654.453,444.672 C646.18,459.839 634.345,472.018 618.948,481.211 C603.55,490.404 584.821,495 562.76,495 C540.698,495 521.97,490.404 506.572,481.212 C491.175,472.019 479.34,459.84 471.067,444.672 C466.012,435.48 462.565,424.91 460.727,412.96 C458.887,401.01 457.969,387.91 457.969,373.663 L457.969,258.531 L457.969,258.53 Z M528.29,384.693 C528.29,398.021 531.392,408.018 537.597,414.683 C543.802,421.347 552.19,424.679 562.761,424.679 C573.331,424.679 581.72,421.347 587.924,414.682 C594.129,408.018 597.231,398.022 597.231,384.692 L597.231,247.5 C597.231,234.171 594.129,224.175 587.924,217.51 C581.72,210.846 573.332,207.514 562.761,207.514 C552.19,207.514 543.801,210.846 537.597,217.51 C531.392,224.175 528.29,234.171 528.29,247.5 L528.29,384.694 L528.29,384.693 Z M685.574,0 L755.894,0 L755.894,392.277 C755.894,405.606 758.307,414.683 763.134,419.509 C767.959,424.335 777.036,427.437 790.365,428.816 L790.365,495 C774.279,495 759.801,493.736 746.932,491.208 C734.062,488.68 723.032,483.74 713.84,476.386 C704.648,469.492 697.639,459.725 692.813,447.086 C687.987,434.446 685.574,417.786 685.574,397.103 L685.574,0 Z"
-                          id="TypeBool-形状"
-                        />
-                      </g>
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="studio-field-title-title emotion-2"
-                >
-                  success
-                </span>
-              </div>
-              <div
-                class="studio-field-title-extra emotion-11"
-              >
-                额外内容
-              </div>
-            </div>
-          </div>
+            class="emotion-5 studio-draggable-panel-right-handle"
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+          />
         </div>
       </div>
     </div>
+    <div
+      style="flex: 1; padding: 12px;"
+    >
+      内容
+    </div>
   </div>
 </div>
 `;
 
-exports[`<FreeCanvas /> > renders basic.tsx correctly 1`] = `
-.emotion-0 .react-flow__attribution {
-  display: none;
-}
-
-.emotion-0 .react-flow__pane,
-.emotion-0 .react-flow__node {
-  cursor: auto;
+exports[`<DraggablePanel /> > renders top.tsx correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 
 .emotion-1 {
-  height: 100%;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  position: relative;
+  border: 0 solid rgba(5, 5, 5, 0.06);
 }
 
-.emotion-2 {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  z-index: 100;
+.emotion-1:hover .studio-draggable-panel-toggle {
+  opacity: 1;
 }
 
-.emotion-3 {
+.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -19482,808 +14292,1061 @@ exports[`<FreeCanvas /> > renders basic.tsx correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 8px;
+}
+
+.emotion-3 {
+  position: absolute;
+  opacity: 0;
+  z-index: 1001;
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
+  border-radius: 4px;
+  cursor: pointer;
+  background: #ffffff;
+  border-width: 1px;
+  border-style: solid;
+  color: rgba(0, 0, 0, 0.45);
+  border-color: #d9d9d9;
+  height: 16px;
+  width: 40px;
+  bottom: -17px;
+  left: 50%;
+  margin-left: -20px;
+  border-radius: 0 0 4px 4px;
+  border-top-width: 0;
+}
+
+.emotion-3:hover {
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.emotion-4 {
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.emotion-5 {
+  position: relative;
+}
+
+.emotion-5::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
+}
+
+.emotion-5:hover::before,
+.emotion-5:active::before {
+  background: #1677ff;
+}
+
+.emotion-5::before {
+  bottom: 50%;
+  height: 2px;
+  width: 100%;
 }
 
 <div>
   <div
-    style="height: 100vh;"
+    class="layoutkit-flexbox emotion-0"
+    style="background: rgb(241, 241, 241); border: 2px solid #ddd; height: 300px;"
+  >
+    <div
+      class="studio-draggable-panel emotion-1"
+      style="border-bottom-width: 1px;"
+    >
+      <div
+        class="layoutkit-center emotion-2 studio-draggable-panel-toggle studio-draggable-panel-toggle-bottom emotion-3"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            style="transform: rotate(180deg);"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="studio-draggable-panel-fixed emotion-4"
+        style="position: relative; user-select: auto; background: rgb(255, 255, 255); width: 100%; padding: 12px; height: 150px; min-width: 280px; box-sizing: border-box; flex-shrink: 0;"
+      >
+        顶部面板
+        <div>
+          <div
+            class="studio-draggable-panel-bottom-handle emotion-5"
+            style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      style="flex: 1; padding: 12px;"
+    >
+      内容
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<FieldIcon /> > renders basic.tsx correctly 1`] = `
+.emotion-0 {
+  font-size: 14px;
+}
+
+<div>
+  <div
+    class="studio-pro-card studio-pro-card-contain-card studio-pro-card-ghost"
   >
     <div
-      class="react-flow emotion-0"
-      data-testid="rf__wrapper"
-      style="width: 100%; height: 100%; overflow: hidden; position: relative; z-index: 0;"
+      class="studio-pro-card-body studio-pro-card-body-wrap"
     >
       <div
-        class="react-flow__renderer"
-        style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;"
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
         <div
-          class="react-flow__pane"
-          style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;"
+          class="studio-pro-card studio-pro-card-border"
         >
           <div
-            class="react-flow__viewport react-flow__container"
-            style="transform: translate(0px,0px) scale(1);"
+            class="studio-pro-card-body studio-pro-card-body-center"
           >
-            <svg
-              class="react-flow__edges react-flow__container"
-              height="500"
-              style="z-index: 0;"
-              width="500"
-            >
-              <defs />
-              <g />
-            </svg>
-            <div
-              class="react-flow__edgelabel-renderer"
-            />
-            <div
-              class="react-flow__nodes"
-              style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;"
+            <span
+              class="anticon studio-field-icon emotion-0"
+              role="img"
             >
-              <div
-                aria-describedby="react-flow__node-desc-1"
-                class="react-flow__node react-flow__node-artboard selectable"
-                data-id="artboard"
-                data-testid="rf__node-artboard"
-                role="button"
-                style="z-index: 0; transform: translate(0px,0px); pointer-events: all; visibility: hidden;"
-                tabindex="0"
+              <svg
+                aria-hidden="true"
+                class="pro-editor-icon"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 17 17"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
               >
-                <div
-                  class="emotion-1"
+                <g
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  id="TypeAny-页面-1"
+                  stroke="none"
+                  stroke-width="1"
                 >
-                  <button
-                    class="studio-btn studio-btn-default"
-                    type="button"
+                  <g
+                    id="TypeAny-编组-2"
+                    transform="translate(0.210938, 0.644531)"
                   >
-                    <span>
-                      按 钮
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
+                    <path
+                      d="M12.1525262,6.06243032 L13.4664705,9.94584615 L13.4878216,9.94584615 L14.7964147,6.06243032 L15.9821628,6.06243032 L13.5946488,12.7555674 C13.441534,13.1722274 13.2296812,13.4606734 12.9590546,13.6209231 C12.6848606,13.7740557 12.3750814,13.8506132 12.0296812,13.8506132 L11.661146,13.8506132 L11.661146,12.7983055 L11.986961,12.7983055 C12.1329409,12.7983055 12.2682542,12.7591349 12.3928829,12.6807759 C12.5175117,12.5988852 12.6047536,12.4777882 12.6546087,12.3175563 L12.9590546,11.3880936 L10.9721293,6.06243032 L12.1525262,6.06243032 Z M2.15714604,6.00053512 C2.85481382,5.9934359 3.41188852,6.12487848 3.82837012,6.39489855 C4.24486957,6.67201784 4.45665106,7.14809365 4.46376812,7.82314381 L4.46376812,11.6016054 L3.34781717,11.6016054 L3.34781717,11.1113133 L3.326466,11.1113133 C3.22324192,11.2996031 3.06306355,11.4381628 2.84593088,11.5269922 C2.63234783,11.6193712 2.33689186,11.6655518 1.95958082,11.6655518 C1.34020067,11.6584526 0.863215162,11.4950279 0.528606466,11.1752598 C0.17619621,10.8626087 0,10.4629119 0,9.97616945 C0,9.51074247 0.153061315,9.12526198 0.459183946,8.81972798 C0.765324415,8.50705909 1.21382386,8.34718395 1.80473579,8.34008473 L3.34783501,8.34008473 L3.34783501,7.75919732 C3.35495206,7.27245485 2.9758573,7.03618283 2.21053289,7.05039911 C1.93287848,7.05039911 1.71394426,7.07881382 1.55376589,7.13566109 C1.38647046,7.20317503 1.25476031,7.31686957 1.15867113,7.4767447 L0.282987737,6.81057748 C0.706586399,6.25633891 1.33128205,5.98631884 2.15714604,6.00053512 Z M8.4790903,6 C8.93836343,6 9.358466,6.16171237 9.73943367,6.48513712 C10.1168161,6.81212932 10.3144169,7.29191527 10.3322185,7.92456633 L10.3322185,11.6031215 L9.21607135,11.6031215 L9.21607135,8.3084058 C9.21607135,7.92101672 9.11282943,7.62602453 8.90632776,7.42342921 C8.70339353,7.21730212 8.44170346,7.11422074 8.12127536,7.11422074 C7.80084727,7.11422074 7.5373913,7.21730212 7.33090747,7.42342921 C7.12083835,7.62602453 7.01581271,7.92101672 7.01581271,8.30842363 L7.01581271,11.6031215 L5.89966555,11.6031215 L5.89966555,6.06929766 L7.01581271,6.06929766 L7.01581271,6.65573244 L7.03718172,6.65573244 C7.4038796,6.21857748 7.88452174,6 8.4790903,6 Z M3.3400223,9.26198439 L2.00618952,9.26198439 C1.35882274,9.27628986 1.03869788,9.4997369 1.04583278,9.93230769 C1.04583278,10.1218105 1.12941806,10.2826845 1.29658863,10.4149833 C1.45664214,10.5615518 1.72163211,10.634845 2.09155853,10.634845 C2.55750279,10.6419799 2.88651059,10.5865775 3.07858194,10.468602 C3.2528874,10.3506087 3.3400223,10.0824794 3.3400223,9.66419621 L3.3400223,9.26198439 Z"
+                      id="TypeAny-形状结合"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </span>
           </div>
         </div>
       </div>
       <div
-        class="emotion-2"
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
         <div
-          class="layoutkit-center emotion-3"
+          class="studio-pro-card studio-pro-card-border"
         >
           <div
-            class="studio-space studio-space-horizontal studio-space-align-center"
+            class="studio-pro-card-body studio-pro-card-body-center"
           >
-            <div
-              class="studio-space-item"
-              style="margin-right: 8px;"
-            >
-              <button
-                class="studio-btn studio-btn-default studio-btn-icon-only"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <span
-                    aria-label="minus"
-                    class="anticon anticon-minus"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="minus"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-            <div
-              class="studio-space-item"
-              style="margin-right: 8px;"
-            >
-              <button
-                class="studio-btn studio-btn-default"
-                style="width: 64px;"
-                type="button"
-              >
-                <span>
-                  100%
-                </span>
-              </button>
-            </div>
-            <div
-              class="studio-space-item"
-              style="margin-right: 8px;"
+            <span
+              class="anticon studio-field-icon emotion-0"
+              role="img"
             >
-              <button
-                class="studio-btn studio-btn-default studio-btn-icon-only"
-                type="button"
+              <svg
+                aria-hidden="true"
+                class="pro-editor-icon"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 17 16"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
               >
-                <span
-                  class="studio-btn-icon"
+                <defs>
+                  <rect
+                    height="16"
+                    id="TypeAnyArr-path-1"
+                    width="16"
+                    x="0"
+                    y="0"
+                  />
+                </defs>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  id="TypeAnyArr-页面-1"
+                  stroke="none"
+                  stroke-width="1"
                 >
-                  <span
-                    aria-label="plus"
-                    class="anticon anticon-plus"
-                    role="img"
+                  <g
+                    id="TypeAnyArr-编组"
+                    transform="translate(-156.183593, -18.424879)"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="plus"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
+                    <g
+                      id="TypeAnyArr-svg"
+                      transform="translate(130.328125, 0.000000)"
                     >
-                      <path
-                        d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                      />
-                      <path
-                        d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-            <div
-              class="studio-space-item"
-              style="margin-right: 8px;"
-            >
-              <button
-                class="studio-btn studio-btn-default studio-btn-icon-only"
-                type="button"
+                      <g
+                        transform="translate(26.492188, 17.000000)"
+                      >
+                        <g
+                          transform="translate(0.000000, 1.421875)"
+                        >
+                          <mask
+                            fill="white"
+                            id="TypeAnyArr-mask-2"
+                          >
+                            <use
+                              xlink:href="#TypeAnyArr-path-1"
+                            />
+                          </mask>
+                          <g
+                            id="TypeAnyArr-容器"
+                          />
+                          <path
+                            d="M2.4793757,4.27432776 L1.43825195,4.27432776 L1.43825195,10.8583367 L2.4793757,10.8583367 L2.4793757,12.1326644 L0,12.1326644 L0,3 L2.4793757,3 L2.4793757,4.27432776 Z M13.5027871,4.27432776 L13.5027871,3 L15.9821628,3 L15.9821628,12.1326644 L13.5027871,12.1326644 L13.5027871,10.8583367 L14.5439108,10.8583367 L14.5439108,4.27432776 L13.5027871,4.27432776 Z M4.76700111,9.02664883 L4.75241026,9.02664883 C4.68186399,9.15472018 4.57241472,9.24893645 4.42402676,9.30933333 C4.27810033,9.37215608 4.07620067,9.40356745 3.81838127,9.40356745 C3.39515719,9.39875139 3.06921739,9.28758974 2.84057971,9.07013601 C2.59977703,8.85751616 2.4793757,8.58571237 2.4793757,8.2547068 C2.4793757,7.9382029 2.58397324,7.67606689 2.79313266,7.4682631 C3.00232776,7.25564326 3.30880713,7.14692531 3.71257079,7.14209142 L4.76700111,7.14209142 L4.76700111,6.747068 C4.77187068,6.41604459 4.51282051,6.25538462 3.98986845,6.2650524 C3.80013378,6.2650524 3.65055072,6.28437012 3.54108361,6.32302341 C3.42678261,6.36893645 3.33677592,6.44626087 3.27109922,6.55497882 L2.67274916,6.10196656 C2.96219398,5.72504794 3.38907469,5.54143144 3.95337347,5.55108138 C4.43012709,5.54626533 4.81077369,5.63564771 5.09536678,5.81928205 C5.37995987,6.00773244 5.52467336,6.33147826 5.52954292,6.79055518 L5.52954292,9.36008027 L4.76700111,9.36008027 L4.76700111,9.02664883 Z M4.76254181,7.76254181 L3.84998885,7.76254181 C3.4070903,7.77219175 3.18808473,7.92309476 3.19293645,8.21525084 C3.19293645,8.34319732 3.25012263,8.45184392 3.36451282,8.5411728 C3.47401561,8.64016945 3.65531327,8.68966778 3.90838796,8.68966778 C4.22717503,8.69448384 4.4522631,8.65707915 4.58368785,8.57740022 C4.70292977,8.49772129 4.76254181,8.31663768 4.76254181,8.03416722 L4.76254181,7.76254181 Z M6.52842809,5.5979398 L7.29198662,5.5979398 L7.29198662,5.99745819 L7.30661315,5.99745819 C7.55745819,5.69962988 7.88626979,5.55072464 8.29301226,5.55072464 C8.60721516,5.55072464 8.89462653,5.6608874 9.15522854,5.88123077 C9.41340468,6.104 9.54857525,6.43086734 9.56075808,6.86185061 L9.56075808,9.36789298 L8.79719955,9.36789298 L8.79719955,7.12336232 C8.79719955,6.85942475 8.7265641,6.65847046 8.5852932,6.52046377 C8.446466,6.38001338 8.26745151,6.30980602 8.04824972,6.30980602 C7.8290301,6.30980602 7.64880268,6.38001338 7.50754961,6.52046377 C7.36383501,6.65847046 7.29198662,6.85942475 7.29198662,7.12336232 L7.29198662,9.36789298 L6.52842809,9.36789298 L6.52842809,5.5979398 Z M10.006689,5.58639911 L10.813592,5.58639911 L11.7117681,8.22796878 L11.726359,8.22796878 L12.6209142,5.58639911 L13.4314381,5.58639911 L11.7993846,10.139175 C11.6947157,10.4226087 11.5498952,10.6188183 11.3649052,10.7278038 C11.1774716,10.8319732 10.9657079,10.884058 10.7296143,10.884058 L10.4776812,10.884058 L10.4776812,10.1682497 L10.7003969,10.1682497 C10.8001962,10.1682497 10.8926823,10.1416187 10.9778907,10.0883211 C11.0630814,10.0325975 11.1227291,9.95026087 11.1567982,9.84123969 L11.3649052,9.20901672 L10.006689,5.58639911 Z"
+                            fill="#000000"
+                            fill-opacity="0.88"
+                            id="TypeAnyArr-shapeGroup"
+                            mask="url(#TypeAnyArr-mask-2)"
+                          />
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+      >
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <span
+              class="anticon studio-field-icon emotion-0"
+              role="img"
+              style="color: rgb(216, 193, 82);"
+            >
+              <svg
+                aria-hidden="true"
+                class="pro-editor-icon"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 791 495"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
               >
-                <span
-                  class="studio-btn-icon"
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  id="TypeBool-页面-1"
+                  stroke="none"
+                  stroke-width="1"
                 >
-                  <span
-                    aria-label="expand"
-                    class="anticon anticon-expand"
-                    role="img"
+                  <g
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                    id="TypeBool-icon-bool1"
+                    transform="translate(0.535000, 0.000000)"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="expand"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <defs>
-                        <style />
-                      </defs>
-                      <path
-                        d="M342 88H120c-17.7 0-32 14.3-32 32v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V168h174c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zm578 576h-48c-8.8 0-16 7.2-16 16v176H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h222c17.7 0 32-14.3 32-32V680c0-8.8-7.2-16-16-16zM342 856H168V680c0-8.8-7.2-16-16-16h-48c-8.8 0-16 7.2-16 16v224c0 17.7 14.3 32 32 32h222c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zM904 88H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h174v176c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V120c0-17.7-14.3-32-32-32z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-            <div
-              class="studio-space-item"
-            >
-              <button
-                class="studio-btn studio-btn-default"
-                type="button"
-              >
-                <span>
-                  自定义
-                </span>
-              </button>
-            </div>
+                    <path
+                      d="M5.68434189e-14,490.864 L5.68434189e-14,0 L70.32,0 L70.32,173.043 L71.7,173.043 C79.513,161.553 88.82,152.705 99.62,146.501 C110.421,140.296 122.716,137.194 136.504,137.194 C153.51,137.194 166.724,140.181 176.146,146.156 C185.568,152.131 193.266,159.714 199.241,168.906 C203.837,176.26 206.825,185.912 208.203,197.862 C209.583,209.812 210.272,228.426 210.272,253.705 L210.272,386.762 C210.272,406.066 209.352,421.462 207.514,432.952 C205.675,444.443 202.688,454.095 198.552,461.908 C186.602,483.97 166.149,495 137.194,495 C119.728,495 106.4,491.553 97.208,484.659 C88.015,477.765 79.053,469.262 70.32,459.15 L70.32,490.864 L5.68434189e-14,490.864 Z M139.951,248.879 C139.951,237.849 137.538,228.196 132.712,219.923 C127.886,211.65 118.809,207.513 105.481,207.513 C95.369,207.513 86.981,211.076 80.317,218.2 C73.652,225.324 70.32,234.401 70.32,245.432 L70.32,381.247 C70.32,394.116 73.538,404.572 79.972,412.615 C86.407,420.658 94.909,424.68 105.481,424.68 C117.431,424.68 126.163,420.313 131.678,411.58 C137.194,402.848 139.951,391.358 139.951,377.11 L139.951,248.879 Z M232.431,258.531 C232.431,244.283 233.351,231.184 235.189,219.234 C237.027,207.284 240.475,196.714 245.53,187.521 C253.803,172.354 265.638,160.174 281.035,150.981 C296.432,141.79 315.161,137.194 337.222,137.194 C359.284,137.194 378.012,141.79 393.41,150.982 C408.807,160.174 420.642,172.354 428.915,187.521 C433.97,196.713 437.417,207.284 439.255,219.234 C441.095,231.184 442.014,244.283 442.014,258.531 L442.014,373.663 C442.014,387.911 441.094,401.01 439.256,412.96 C437.417,424.91 433.97,435.48 428.915,444.673 C420.642,459.84 408.807,472.019 393.41,481.212 C378.013,490.404 359.284,495 337.222,495 C315.162,495 296.432,490.404 281.035,481.212 C265.638,472.019 253.803,459.84 245.53,444.672 C240.475,435.48 237.027,424.91 235.189,412.96 C233.351,401.01 232.431,387.91 232.431,373.663 L232.431,258.531 L232.431,258.531 Z M302.751,384.694 C302.751,398.022 305.854,408.019 312.059,414.684 C318.264,421.348 326.651,424.68 337.222,424.68 C347.794,424.68 356.182,421.348 362.386,414.683 C368.591,408.019 371.693,398.023 371.693,384.693 L371.693,247.5 C371.693,234.171 368.591,224.175 362.386,217.51 C356.181,210.846 347.794,207.514 337.222,207.514 C326.652,207.514 318.264,210.846 312.059,217.51 C305.854,224.175 302.752,234.171 302.752,247.5 L302.752,384.694 L302.751,384.694 Z M457.969,258.53 C457.969,244.282 458.889,231.183 460.727,219.233 C462.566,207.283 466.013,196.713 471.068,187.52 C479.341,172.353 491.176,160.173 506.573,150.98 C521.97,141.789 540.699,137.193 562.761,137.193 C584.822,137.193 603.551,141.789 618.948,150.981 C634.345,160.173 646.18,172.353 654.453,187.52 C659.509,196.712 662.956,207.283 664.794,219.233 C666.633,231.183 667.552,244.282 667.552,258.53 L667.552,373.662 C667.552,387.91 666.632,401.009 664.794,412.959 C662.956,424.909 659.509,435.479 654.453,444.672 C646.18,459.839 634.345,472.018 618.948,481.211 C603.55,490.404 584.821,495 562.76,495 C540.698,495 521.97,490.404 506.572,481.212 C491.175,472.019 479.34,459.84 471.067,444.672 C466.012,435.48 462.565,424.91 460.727,412.96 C458.887,401.01 457.969,387.91 457.969,373.663 L457.969,258.531 L457.969,258.53 Z M528.29,384.693 C528.29,398.021 531.392,408.018 537.597,414.683 C543.802,421.347 552.19,424.679 562.761,424.679 C573.331,424.679 581.72,421.347 587.924,414.682 C594.129,408.018 597.231,398.022 597.231,384.692 L597.231,247.5 C597.231,234.171 594.129,224.175 587.924,217.51 C581.72,210.846 573.332,207.514 562.761,207.514 C552.19,207.514 543.801,210.846 537.597,217.51 C531.392,224.175 528.29,234.171 528.29,247.5 L528.29,384.694 L528.29,384.693 Z M685.574,0 L755.894,0 L755.894,392.277 C755.894,405.606 758.307,414.683 763.134,419.509 C767.959,424.335 777.036,427.437 790.365,428.816 L790.365,495 C774.279,495 759.801,493.736 746.932,491.208 C734.062,488.68 723.032,483.74 713.84,476.386 C704.648,469.492 697.639,459.725 692.813,447.086 C687.987,434.446 685.574,417.786 685.574,397.103 L685.574,0 Z"
+                      id="TypeBool-形状"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </span>
           </div>
         </div>
       </div>
-      <svg
-        class="react-flow__background"
-        data-testid="rf__background"
-        style="z-index: -1; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;"
-      >
-        <pattern
-          height="16"
-          id="pattern-1undefined"
-          patternTransform="translate(-0.5,-0.5)"
-          patternUnits="userSpaceOnUse"
-          width="16"
-          x="0"
-          y="0"
-        >
-          <circle
-            cx="0.5"
-            cy="0.5"
-            fill="#aaa"
-            r="0.5"
-          />
-        </pattern>
-        <rect
-          fill="url(#pattern-1undefined)"
-          height="100%"
-          width="100%"
-          x="0"
-          y="0"
-        />
-      </svg>
       <div
-        class="react-flow__panel react-flow__attribution bottom right"
-        data-message="Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev"
-        style="pointer-events: all;"
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
-        <a
-          aria-label="React Flow attribution"
-          href="https://reactflow.dev"
-          rel="noopener noreferrer"
-          target="_blank"
+        <div
+          class="studio-pro-card studio-pro-card-border"
         >
-          React Flow
-        </a>
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <span
+              class="anticon studio-field-icon emotion-0"
+              role="img"
+              style="color: rgb(216, 193, 82);"
+            >
+              <svg
+                aria-hidden="true"
+                class="pro-editor-icon"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 897 516"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  id="TypeBoolArr-页面-1"
+                  stroke="none"
+                  stroke-width="1"
+                >
+                  <g
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                    id="TypeBoolArr-icon-bool"
+                    transform="translate(0.900000, 0.000000)"
+                  >
+                    <path
+                      d="M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z M169,430.075 L169,83 L218.721,83 L218.721,205.354 L219.696,205.354 C225.221,197.229 231.802,190.974 239.439,186.586 C247.076,182.199 255.769,180.006 265.519,180.006 C277.542,180.006 286.885,182.118 293.547,186.343 C300.209,190.567 305.653,195.929 309.877,202.429 C313.127,207.629 315.24,214.453 316.214,222.903 C317.189,231.352 317.677,244.513 317.677,262.387 L317.677,356.468 C317.677,370.118 317.027,381.004 315.727,389.128 C314.427,397.253 312.315,404.077 309.39,409.602 C300.94,425.2 286.48,433 266.006,433 C253.656,433 244.232,430.563 237.733,425.688 C231.233,420.813 224.896,414.801 218.721,407.652 L218.721,430.075 L169,430.075 Z M267.955,258.975 C267.955,251.175 266.249,244.351 262.837,238.501 C259.425,232.651 253.007,229.727 243.582,229.727 C236.432,229.727 230.502,232.246 225.79,237.283 C221.078,242.32 218.721,248.738 218.721,256.538 L218.721,352.568 C218.721,361.668 220.996,369.061 225.546,374.748 C230.096,380.435 236.108,383.278 243.582,383.278 C252.032,383.278 258.206,380.191 262.106,374.017 C266.006,367.842 267.956,359.717 267.956,349.643 L267.956,258.975 L267.955,258.975 Z M333.345,265.799 C333.345,255.725 333.995,246.463 335.295,238.014 C336.595,229.564 339.032,222.09 342.607,215.591 C348.457,204.866 356.825,196.254 367.712,189.755 C378.598,183.255 391.842,180.005 407.44,180.005 C423.04,180.005 436.282,183.255 447.169,189.755 C458.055,196.255 466.423,204.866 472.273,215.591 C475.848,222.091 478.285,229.564 479.585,238.014 C480.885,246.464 481.535,255.725 481.535,265.799 L481.535,347.206 C481.535,357.28 480.885,366.542 479.585,374.992 C478.285,383.442 475.848,390.915 472.273,397.415 C466.423,408.139 458.055,416.751 447.169,423.251 C436.282,429.751 423.039,433 407.44,433 C391.841,433 378.598,429.75 367.712,423.25 C356.825,416.751 348.457,408.14 342.607,397.415 C339.032,390.915 336.595,383.441 335.295,374.992 C333.995,366.542 333.345,357.28 333.345,347.206 L333.345,265.8 L333.345,265.799 Z M383.067,355.006 C383.067,364.43 385.26,371.498 389.647,376.21 C394.035,380.922 399.966,383.279 407.44,383.279 C414.915,383.279 420.845,380.922 425.233,376.21 C429.62,371.498 431.813,364.43 431.813,355.006 L431.813,258 C431.813,248.576 429.62,241.507 425.233,236.795 C420.845,232.083 414.915,229.727 407.44,229.727 C399.966,229.727 394.035,232.083 389.648,236.795 C385.26,241.507 383.067,248.575 383.067,258 L383.067,355.006 L383.067,355.006 Z M492.816,265.799 C492.816,255.725 493.467,246.463 494.766,238.014 C496.066,229.564 498.503,222.09 502.078,215.591 C507.928,204.866 516.296,196.254 527.182,189.755 C538.069,183.255 551.312,180.005 566.911,180.005 C582.51,180.005 595.752,183.255 606.639,189.755 C617.526,196.255 625.894,204.866 631.744,215.591 C635.318,222.091 637.756,229.564 639.056,238.014 C640.356,246.464 641.006,255.725 641.006,265.799 L641.006,347.206 C641.006,357.28 640.356,366.542 639.056,374.992 C637.756,383.442 635.318,390.915 631.744,397.415 C625.894,408.139 617.526,416.751 606.639,423.251 C595.752,429.751 582.51,433 566.911,433 C551.311,433 538.069,429.75 527.182,423.25 C516.296,416.751 507.928,408.14 502.078,397.415 C498.503,390.915 496.066,383.441 494.766,374.992 C493.466,366.542 492.816,357.28 492.816,347.206 L492.816,265.8 L492.816,265.799 Z M542.537,355.006 C542.537,364.43 544.731,371.498 549.118,376.21 C553.506,380.922 559.436,383.279 566.911,383.279 C574.385,383.279 580.316,380.922 584.703,376.21 C589.091,371.498 591.284,364.43 591.284,355.006 L591.284,258 C591.284,248.576 589.091,241.507 584.704,236.795 C580.316,232.083 574.385,229.727 566.911,229.727 C559.436,229.727 553.506,232.083 549.118,236.795 C544.731,241.507 542.538,248.575 542.538,258 L542.538,355.006 L542.537,355.006 Z M653.75,83 L703.472,83 L703.472,360.368 C703.472,369.792 705.178,376.21 708.59,379.623 C712.002,383.035 718.42,385.228 727.845,386.203 L727.845,433 C716.471,433 706.235,432.106 697.135,430.319 C688.035,428.532 680.235,425.039 673.736,419.839 C667.236,414.964 662.281,408.059 658.869,399.121 C655.456,390.184 653.75,378.404 653.75,363.78 L653.75,83 Z"
+                      id="TypeBoolArr-形状"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
       </div>
       <div
-        id="react-flow__node-desc-1"
-        style="display: none;"
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
-        Press enter or space to select a node.
-        You can then use the arrow keys to move the node around.
-         Press delete to remove it and escape to cancel.
-         
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <span
+              class="anticon studio-field-icon emotion-0"
+              role="img"
+              style="color: rgb(82, 149, 196);"
+            >
+              <svg
+                aria-hidden="true"
+                class="pro-editor-icon"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 897 496"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  id="TypeNum-页面-1"
+                  stroke="none"
+                  stroke-width="1"
+                >
+                  <g
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                    id="TypeNum-icon-icon-test3"
+                    transform="translate(0.500000, -0.000000)"
+                  >
+                    <path
+                      d="M99.31,99.994 L0,186.29 L0,90.406 L99.31,4.109 L188.345,4.109 L188.345,491.751 L99.309,491.751 L99.309,99.994 L99.31,99.994 Z M263.194,411.619 L445.374,199.989 C454.507,189.486 461.127,179.898 465.236,171.223 C469.346,162.547 471.4,152.503 471.4,141.087 C471.4,122.824 466.378,108.099 456.333,96.912 C446.288,85.725 431.677,80.132 412.5,80.132 C404.738,80.132 397.318,81.16 390.24,83.214 C383.164,85.269 376.771,88.694 371.064,93.488 C365.357,98.282 360.791,104.674 357.366,112.665 C353.942,120.655 352.229,130.585 352.229,142.457 L263.194,142.457 C263.194,120.084 267.074,100.108 274.837,82.529 C282.599,64.95 293.215,49.997 306.684,37.669 C320.154,25.341 335.906,15.981 353.942,9.589 C371.977,3.195 391.496,5.68434189e-14 412.5,5.68434189e-14 C433.96,5.68434189e-14 453.821,3.31 472.085,9.93 C490.349,16.552 505.987,25.912 519,38.011 C532.013,50.111 542.172,64.951 549.478,82.529 C556.783,100.109 560.436,119.856 560.436,141.772 C560.436,153.644 559.295,164.26 557.012,173.62 C554.748868,182.927687 551.295766,191.904944 546.738,200.33 C542.172,208.778 536.579,217.339 529.958,226.014 C523.338,234.689 515.918,243.821 507.7,253.41 L371.406,411.62 L560.436,411.62 L560.436,491.751 L263.194,491.751 L263.194,411.62 L263.194,411.619 Z M741.214,495.861 C721.124,495.861 701.834,493.121 683.341,487.642 C664.849,482.163 648.412,473.602 634.029,461.959 C619.647,450.316 608.118,435.476 599.442,417.441 C590.767,399.405 586.202,377.603 585.745,352.034 L674.78,352.034 C675.237,362.992 677.292,372.466 680.944,380.457 C684.597,388.447 689.391,395.067 695.327,400.319 C701.263,405.569 708.226,409.45 716.217,411.962 C724.207,414.473 732.539,415.729 741.215,415.729 C760.392,415.729 776.145,410.021 788.472,398.606 C800.8,387.191 806.964,370.298 806.964,347.924 C806.964,327.378 801.029,311.054 789.157,298.954 C777.286,286.855 760.392,280.805 738.475,280.805 L725.462,280.805 L725.462,203.413 L738.475,203.413 C760.392,203.413 776.145,197.591 785.733,185.948 C795.321,174.305 800.115,159.808 800.115,142.458 C800.115,121.91 794.18,106.386 782.308,95.885 C770.437,85.383 756.511,80.132 740.53,80.132 C723.636,80.132 709.596,85.269 698.41,95.542 C687.222,105.816 681.173,120.312 680.26,139.032 L591.224,139.032 C591.68,117.116 595.904,97.597 603.894,80.475 C611.884,63.352 622.614,48.741 636.084,36.642 C649.554,24.542 665.192,15.41 682.999,9.246 C700.806,3.082 719.983,0 740.529,0 C761.989,0 781.851,3.424 800.115,10.273 C818.379,17.123 834.131,26.711 847.373,39.039 C860.614,51.367 870.887,66.092 878.193,83.214 C885.498,100.337 889.151,119.171 889.151,139.718 C889.151,166.2 883.786,187.318 873.056,203.07 C862.326,218.823 848.971,231.036 832.99,239.712 C850.797,248.844 865.75,262.199 877.85,279.778 C889.95,297.357 896,320.985 896,350.664 C896,374.864 891.89,396.095 883.672,414.359 C875.453,432.623 864.267,447.804 850.112,459.904 C835.958,472.004 819.521,481.021 800.8,486.957 C782.08,492.893 762.218,495.861 741.215,495.861 L741.214,495.861 Z"
+                      id="TypeNum-形状"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
       </div>
       <div
-        id="react-flow__edge-desc-1"
-        style="display: none;"
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
-        Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <span
+              class="anticon studio-field-icon emotion-0"
+              role="img"
+              style="color: rgb(35, 155, 239);"
+            >
+              <svg
+                aria-hidden="true"
+                class="pro-editor-icon"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 897 516"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  id="TypeNumArr-页面-1"
+                  stroke="none"
+                  stroke-width="1"
+                >
+                  <g
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                    id="TypeNumArr-icon-icon-test1"
+                    transform="translate(0.500000, 0.000000)"
+                  >
+                    <path
+                      d="M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z M223.088,162.53 L159,218.221 L159,156.343 L223.088,100.652 L280.547,100.652 L280.547,415.348 L223.088,415.348 L223.088,162.53 L223.088,162.53 Z M328.85,363.635 L446.42,227.061 C452.312,220.284 456.585,214.096 459.237,208.497 C461.889,202.899 463.215,196.417 463.215,189.05 C463.215,177.263 459.973,167.76 453.491,160.541 C447.008,153.322 437.579,149.713 425.204,149.713 C420.194,149.713 415.406,150.376 410.839,151.702 C406.272,153.028 402.147,155.238 398.463,158.332 C394.78,161.425 391.833,165.551 389.623,170.707 C387.413,175.864 386.309,182.273 386.309,189.934 L328.85,189.934 C328.85,175.495 331.355,162.604 336.364,151.26 C341.374,139.915 348.224,130.265 356.916,122.31 C365.609,114.354 375.774,108.313 387.414,104.188 C399.053,100.063 411.649,98 425.204,98 C439.053,98 451.87,100.136 463.657,104.409 C475.443,108.681 485.535,114.722 493.933,122.53 C502.331,130.339 508.887,139.915 513.601,151.26 C518.316,162.604 520.674,175.348 520.674,189.492 C520.674,197.152 519.937,204.004 518.463,210.044 C517.002664,216.050947 514.774313,221.84466 511.833,227.282 C508.887,232.733 505.277,238.258 501.005,243.856 C496.732,249.455 491.944,255.348 486.64,261.536 L398.684,363.636 L520.674,363.636 L520.674,415.348 L328.85,415.348 L328.85,363.635 Z M637.337,418 C624.372,418 611.923,416.232 599.989,412.696 C588.055,409.16 577.448,403.636 568.166,396.122 C558.884,388.608 551.444,379.032 545.846,367.392 C540.247,355.753 537.3,341.683 537.006,325.182 L594.464,325.182 C594.759,332.254 596.085,338.368 598.442,343.525 C600.8,348.681 603.893,352.954 607.724,356.343 C611.554,359.731 616.048,362.236 621.204,363.856 C626.361,365.477 631.739,366.287 637.337,366.287 C649.713,366.287 659.879,362.604 667.835,355.237 C675.79,347.871 679.768,336.969 679.768,322.53 C679.768,309.27 675.938,298.737 668.277,290.928 C660.615,283.12 649.713,279.215 635.569,279.215 L627.172,279.215 L627.172,229.271 L635.569,229.271 C649.713,229.271 659.879,225.514 666.067,218 C672.254,210.486 675.348,201.13 675.348,189.934 C675.348,176.674 671.518,166.656 663.857,159.878 C656.195,153.101 647.208,149.713 636.895,149.713 C625.993,149.713 616.932,153.028 609.713,159.657 C602.493,166.287 598.59,175.643 598,187.724 L540.542,187.724 C540.836,173.58 543.562,160.984 548.718,149.934 C553.875,138.884 560.799,129.454 569.492,121.646 C578.184,113.838 588.276,107.945 599.768,103.966 C611.26,99.99 623.636,98 636.895,98 C650.745,98 663.562,100.21 675.348,104.63 C687.135,109.05 697.3,115.238 705.846,123.193 C714.391,131.149 721.02,140.652 725.736,151.702 C730.45,162.752 732.806,174.906 732.806,188.166 C732.806,205.256 729.345,218.884 722.42,229.05 C715.496,239.216 706.877,247.098 696.564,252.696 C708.056,258.589 717.706,267.208 725.514,278.552 C733.323,289.897 737.227,305.145 737.227,324.298 C737.227,339.915 734.575,353.617 729.271,365.403 C723.967,377.19 716.748,386.987 707.614,394.796 C698.479,402.604 687.871,408.424 675.79,412.254 C663.71,416.084 650.892,418 637.337,418 L637.337,418 Z"
+                      id="TypeNumArr-形状"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
       </div>
       <div
-        aria-atomic="true"
-        aria-live="assertive"
-        id="react-flow__aria-live-1"
-        style="position: absolute; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%);"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Highlight /> > renders basic.tsx correctly 1`] = `
-.emotion-0 {
-  background-color: #2b303b;
-  border: 1px solid #2b303b;
-  position: relative;
-  overflow: auto;
-  margin: 0;
-  border-radius: 6px;
-  -webkit-transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-0 pre {
-  margin: 0!important;
-  padding: 16px 24px!important;
-  background: none!important;
-}
-
-.emotion-0 code {
-  background: transparent!important;
-}
-
-.emotion-1 {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  outline: none;
-  cursor: pointer;
-  opacity: 0.6;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-  background-color: #2b303b;
-}
-
-.emotion-1:hover {
-  opacity: 0.8;
-}
-
-.emotion-2 {
-  width: 16px;
-  color: #dddddd;
-  height: 16px;
-  font-size: 16px;
-}
-
-.emotion-2.scoll {
-  -webkit-animation: copy-button-trans 2s;
-  animation: copy-button-trans 2s;
-  -webkit-animation-play-state: running;
-  animation-play-state: running;
-}
-
-.emotion-4 {
-  display: block;
-  overflow-x: auto;
-  color: #dddddd;
-  background-color: #777777;
-}
-
-.emotion-4 .hljs-comment,
-.emotion-4 .hljs-quote {
-  color: #555555;
-}
-
-.emotion-4 .hljs-variable,
-.emotion-4 .hljs-attribute,
-.emotion-4 .hljs-template-variable,
-.emotion-4 .hljs-tag,
-.emotion-4 .hljs-name,
-.emotion-4 .hljs-selector-id,
-.emotion-4 .hljs-selector-class,
-.emotion-4 .hljs-regexp,
-.emotion-4 .hljs-title,
-.emotion-4 .hljs-deletion {
-  color: #f04f88;
-}
-
-.emotion-4 .hljs-builtin-name,
-.emotion-4 .hljs-literal,
-.emotion-4 .hljs-type,
-.emotion-4 .hljs-params,
-.emotion-4 .hljs-meta,
-.emotion-4 .hljs-link {
-  color: #ffcb47;
-}
-
-.emotion-4 .hljs-string,
-.emotion-4 .hljs-number,
-.emotion-4 .hljs-symbol,
-.emotion-4 .hljs-bullet,
-.emotion-4 .hljs-addition {
-  color: #c4f042;
-}
-
-.emotion-4 .hljs-keyword,
-.emotion-4 .hljs-doctag,
-.emotion-4 .hljs-built_in,
-.emotion-4 .hljs-selector-tag,
-.emotion-4 .hljs-section {
-  color: #8ae8ff;
-}
-
-.emotion-4 .hljs-emphasis {
-  font-style: italic;
-}
-
-.emotion-4 .hljs-strong {
-  font-weight: bold;
-}
-
-.emotion-5 {
-  width: 100%;
-}
-
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 8px;
-}
-
-.emotion-11 {
-  -webkit-backdrop-filter: saturate(180%) blur(10px);
-  backdrop-filter: saturate(180%) blur(10px);
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  height: 36px;
-  padding: 0 8px;
-  font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
-  color: #555555;
-  border-radius: 6;
-}
-
-.emotion-12 {
-  color: #555555;
-}
-
-<div>
-  <div
-    class="studio-highlight-container emotion-0"
-    tabindex="-1"
-  >
-    <button
-      class="studio-highlight-copy emotion-1"
-      type="button"
-    >
-      <span
-        aria-label="copy"
-        class="anticon anticon-copy studio-highlight-copy-icon emotion-2"
-        role="img"
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
-        <svg
-          aria-hidden="true"
-          data-icon="copy"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
+        <div
+          class="studio-pro-card studio-pro-card-border"
         >
-          <path
-            d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
-          />
-        </svg>
-      </span>
-      <span
-        aria-label="check"
-        class="anticon anticon-check studio-highlight-copy-icon emotion-2"
-        role="img"
-        style="color: rgb(63, 177, 99);"
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <span
+              class="anticon studio-field-icon emotion-0"
+              role="img"
+              style="color: rgb(82, 149, 196);"
+            >
+              <svg
+                aria-hidden="true"
+                class="pro-editor-icon"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 897 496"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  id="TypeNum-页面-1"
+                  stroke="none"
+                  stroke-width="1"
+                >
+                  <g
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                    id="TypeNum-icon-icon-test3"
+                    transform="translate(0.500000, -0.000000)"
+                  >
+                    <path
+                      d="M99.31,99.994 L0,186.29 L0,90.406 L99.31,4.109 L188.345,4.109 L188.345,491.751 L99.309,491.751 L99.309,99.994 L99.31,99.994 Z M263.194,411.619 L445.374,199.989 C454.507,189.486 461.127,179.898 465.236,171.223 C469.346,162.547 471.4,152.503 471.4,141.087 C471.4,122.824 466.378,108.099 456.333,96.912 C446.288,85.725 431.677,80.132 412.5,80.132 C404.738,80.132 397.318,81.16 390.24,83.214 C383.164,85.269 376.771,88.694 371.064,93.488 C365.357,98.282 360.791,104.674 357.366,112.665 C353.942,120.655 352.229,130.585 352.229,142.457 L263.194,142.457 C263.194,120.084 267.074,100.108 274.837,82.529 C282.599,64.95 293.215,49.997 306.684,37.669 C320.154,25.341 335.906,15.981 353.942,9.589 C371.977,3.195 391.496,5.68434189e-14 412.5,5.68434189e-14 C433.96,5.68434189e-14 453.821,3.31 472.085,9.93 C490.349,16.552 505.987,25.912 519,38.011 C532.013,50.111 542.172,64.951 549.478,82.529 C556.783,100.109 560.436,119.856 560.436,141.772 C560.436,153.644 559.295,164.26 557.012,173.62 C554.748868,182.927687 551.295766,191.904944 546.738,200.33 C542.172,208.778 536.579,217.339 529.958,226.014 C523.338,234.689 515.918,243.821 507.7,253.41 L371.406,411.62 L560.436,411.62 L560.436,491.751 L263.194,491.751 L263.194,411.62 L263.194,411.619 Z M741.214,495.861 C721.124,495.861 701.834,493.121 683.341,487.642 C664.849,482.163 648.412,473.602 634.029,461.959 C619.647,450.316 608.118,435.476 599.442,417.441 C590.767,399.405 586.202,377.603 585.745,352.034 L674.78,352.034 C675.237,362.992 677.292,372.466 680.944,380.457 C684.597,388.447 689.391,395.067 695.327,400.319 C701.263,405.569 708.226,409.45 716.217,411.962 C724.207,414.473 732.539,415.729 741.215,415.729 C760.392,415.729 776.145,410.021 788.472,398.606 C800.8,387.191 806.964,370.298 806.964,347.924 C806.964,327.378 801.029,311.054 789.157,298.954 C777.286,286.855 760.392,280.805 738.475,280.805 L725.462,280.805 L725.462,203.413 L738.475,203.413 C760.392,203.413 776.145,197.591 785.733,185.948 C795.321,174.305 800.115,159.808 800.115,142.458 C800.115,121.91 794.18,106.386 782.308,95.885 C770.437,85.383 756.511,80.132 740.53,80.132 C723.636,80.132 709.596,85.269 698.41,95.542 C687.222,105.816 681.173,120.312 680.26,139.032 L591.224,139.032 C591.68,117.116 595.904,97.597 603.894,80.475 C611.884,63.352 622.614,48.741 636.084,36.642 C649.554,24.542 665.192,15.41 682.999,9.246 C700.806,3.082 719.983,0 740.529,0 C761.989,0 781.851,3.424 800.115,10.273 C818.379,17.123 834.131,26.711 847.373,39.039 C860.614,51.367 870.887,66.092 878.193,83.214 C885.498,100.337 889.151,119.171 889.151,139.718 C889.151,166.2 883.786,187.318 873.056,203.07 C862.326,218.823 848.971,231.036 832.99,239.712 C850.797,248.844 865.75,262.199 877.85,279.778 C889.95,297.357 896,320.985 896,350.664 C896,374.864 891.89,396.095 883.672,414.359 C875.453,432.623 864.267,447.804 850.112,459.904 C835.958,472.004 819.521,481.021 800.8,486.957 C782.08,492.893 762.218,495.861 741.215,495.861 L741.214,495.861 Z"
+                      id="TypeNum-形状"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
-        <svg
-          aria-hidden="true"
-          data-icon="check"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
+        <div
+          class="studio-pro-card studio-pro-card-border"
         >
-          <path
-            d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-          />
-        </svg>
-      </span>
-    </button>
-    <pre
-      class="emotion-4"
-    >
-      <table
-        border="0"
-        cellpadding="0"
-        cellspacing="0"
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <span
+              class="anticon studio-field-icon emotion-0"
+              role="img"
+              style="color: rgb(35, 155, 239);"
+            >
+              <svg
+                aria-hidden="true"
+                class="pro-editor-icon"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 897 516"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  id="TypeNumArr-页面-1"
+                  stroke="none"
+                  stroke-width="1"
+                >
+                  <g
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                    id="TypeNumArr-icon-icon-test1"
+                    transform="translate(0.500000, 0.000000)"
+                  >
+                    <path
+                      d="M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z M223.088,162.53 L159,218.221 L159,156.343 L223.088,100.652 L280.547,100.652 L280.547,415.348 L223.088,415.348 L223.088,162.53 L223.088,162.53 Z M328.85,363.635 L446.42,227.061 C452.312,220.284 456.585,214.096 459.237,208.497 C461.889,202.899 463.215,196.417 463.215,189.05 C463.215,177.263 459.973,167.76 453.491,160.541 C447.008,153.322 437.579,149.713 425.204,149.713 C420.194,149.713 415.406,150.376 410.839,151.702 C406.272,153.028 402.147,155.238 398.463,158.332 C394.78,161.425 391.833,165.551 389.623,170.707 C387.413,175.864 386.309,182.273 386.309,189.934 L328.85,189.934 C328.85,175.495 331.355,162.604 336.364,151.26 C341.374,139.915 348.224,130.265 356.916,122.31 C365.609,114.354 375.774,108.313 387.414,104.188 C399.053,100.063 411.649,98 425.204,98 C439.053,98 451.87,100.136 463.657,104.409 C475.443,108.681 485.535,114.722 493.933,122.53 C502.331,130.339 508.887,139.915 513.601,151.26 C518.316,162.604 520.674,175.348 520.674,189.492 C520.674,197.152 519.937,204.004 518.463,210.044 C517.002664,216.050947 514.774313,221.84466 511.833,227.282 C508.887,232.733 505.277,238.258 501.005,243.856 C496.732,249.455 491.944,255.348 486.64,261.536 L398.684,363.636 L520.674,363.636 L520.674,415.348 L328.85,415.348 L328.85,363.635 Z M637.337,418 C624.372,418 611.923,416.232 599.989,412.696 C588.055,409.16 577.448,403.636 568.166,396.122 C558.884,388.608 551.444,379.032 545.846,367.392 C540.247,355.753 537.3,341.683 537.006,325.182 L594.464,325.182 C594.759,332.254 596.085,338.368 598.442,343.525 C600.8,348.681 603.893,352.954 607.724,356.343 C611.554,359.731 616.048,362.236 621.204,363.856 C626.361,365.477 631.739,366.287 637.337,366.287 C649.713,366.287 659.879,362.604 667.835,355.237 C675.79,347.871 679.768,336.969 679.768,322.53 C679.768,309.27 675.938,298.737 668.277,290.928 C660.615,283.12 649.713,279.215 635.569,279.215 L627.172,279.215 L627.172,229.271 L635.569,229.271 C649.713,229.271 659.879,225.514 666.067,218 C672.254,210.486 675.348,201.13 675.348,189.934 C675.348,176.674 671.518,166.656 663.857,159.878 C656.195,153.101 647.208,149.713 636.895,149.713 C625.993,149.713 616.932,153.028 609.713,159.657 C602.493,166.287 598.59,175.643 598,187.724 L540.542,187.724 C540.836,173.58 543.562,160.984 548.718,149.934 C553.875,138.884 560.799,129.454 569.492,121.646 C578.184,113.838 588.276,107.945 599.768,103.966 C611.26,99.99 623.636,98 636.895,98 C650.745,98 663.562,100.21 675.348,104.63 C687.135,109.05 697.3,115.238 705.846,123.193 C714.391,131.149 721.02,140.652 725.736,151.702 C730.45,162.752 732.806,174.906 732.806,188.166 C732.806,205.256 729.345,218.884 722.42,229.05 C715.496,239.216 706.877,247.098 696.564,252.696 C708.056,258.589 717.706,267.208 725.514,278.552 C733.323,289.897 737.227,305.145 737.227,324.298 C737.227,339.915 734.575,353.617 729.271,365.403 C723.967,377.19 716.748,386.987 707.614,394.796 C698.479,402.604 687.871,408.424 675.79,412.254 C663.71,416.084 650.892,418 637.337,418 L637.337,418 Z"
+                      id="TypeNumArr-形状"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
-        <tbody>
-          <tr>
-            <td
-              class="undefined-content emotion-5"
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <span
+              class="anticon studio-field-icon emotion-0"
+              role="img"
             >
-              <span
-                class="hljs-keyword"
+              <svg
+                aria-hidden="true"
+                class="pro-editor-icon"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 1024 1024"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
               >
-                public
-              </span>
-               
-              <span
-                class="hljs-class"
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  id="TypeObj-type-obj"
+                  stroke="none"
+                  stroke-width="1"
+                >
+                  <g
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                    id="TypeObj-编组"
+                    transform="translate(271.000000, 254.000000)"
+                  >
+                    <path
+                      d="M305,444 L334.355,444 C340.495,444 345.387,441.8 349.032,437.4 C352.677,433 354.5,428 354.5,422.4 L354.5,318 C354.5,306.8 355.939,297.6 358.817,290.4 C361.695,283.2 365.244,277.4 369.465,273 C373.686,268.6 377.907,265.4 382.128,263.4 C386.348,261.4 391.145,259.6 396.518,258 C391.145,256.4 386.253,254.5 381.84,252.3 C377.427,250.1 373.302,247 369.465,243 C365.628,239 362.175,233.3 359.105,225.9 C356.035,218.5 354.5,209.2 354.5,198 L354.5,93.6 C354.5,88 352.677,83 349.032,78.6 C345.387,74.2 340.494,72 334.355,72 L305,72 L305,0 L351.622,0 C362.366,0 372.727,1.8 382.703,5.4 C392.68,9 401.506,14.8 409.18,22.8 C415.704,29.6 421.076,38.3 425.297,48.9 C429.517,59.5 431.627,72.2 431.627,87 L431.627,200.4 C431.627,206 433.451,211 437.096,215.4 C440.741,219.8 445.634,222 451.773,222 L481.128,222 L481.128,294 L451.773,294 C445.633,294 440.741,296.2 437.096,300.6 C433.451,305 431.628,310 431.628,315.6 L431.628,429 C431.628,443.8 429.518,456.5 425.297,467.1 C421.076,477.7 415.704,486.4 409.18,493.2 C401.506,501.2 392.68,507 382.703,510.6 C372.727,514.2 362.366,516 351.623,516 L305,516 L305,444 Z M176.128,444 L146.773,444 C140.633,444 135.741,441.8 132.096,437.4 C128.451,433 126.628,428 126.628,422.4 L126.628,318 C126.628,306.8 125.189,297.6 122.311,290.4 C119.433,283.2 115.884,277.4 111.663,273 C107.442,268.6 103.221,265.4 99,263.4 C94.779,261.4 89.983,259.6 84.61,258 C89.983,256.4 94.875,254.5 99.288,252.3 C103.701,250.1 107.826,247 111.663,243 C115.5,239 118.953,233.3 122.023,225.9 C125.093,218.5 126.628,209.2 126.628,198 L126.628,93.6 C126.628,88 128.451,83 132.096,78.6 C135.741,74.2 140.634,72 146.773,72 L176.128,72 L176.128,0 L129.506,0 C118.762,0 108.401,1.8 98.424,5.4 C88.448,9 79.622,14.8 71.948,22.8 C65.424,29.6 60.052,38.3 55.831,48.9 C51.611,59.5 49.5,72.2 49.5,87 L49.5,200.4 C49.5,206 47.677,211 44.032,215.4 C40.387,219.8 35.494,222 29.355,222 L0,222 L0,294 L29.355,294 C35.495,294 40.387,296.2 44.032,300.6 C47.677,305 49.5,310 49.5,315.6 L49.5,429 C49.5,443.8 51.61,456.5 55.831,467.1 C60.052,477.7 65.424,486.4 71.948,493.2 C79.622,501.2 88.448,507 98.424,510.6 C108.401,514.2 118.762,516 129.506,516 L176.128,516 L176.128,444 L176.128,444 Z"
+                      id="TypeObj-形状"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+      >
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <span
+              class="anticon studio-field-icon emotion-0"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class="pro-editor-icon"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 656 381"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
               >
-                <span
-                  class="hljs-keyword"
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  id="TypeObjArr-页面-1"
+                  stroke="none"
+                  stroke-width="1"
                 >
-                  class
-                </span>
-                 
-                <span
-                  class="hljs-title"
+                  <g
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                    id="TypeObjArr-icon-icon-test4"
+                    transform="translate(0.228000, 0.125000)"
+                  >
+                    <path
+                      d="M103.855,53.023 L60.245,53.023 L60.245,326.977 L103.855,326.977 L103.855,380 L0,380 L0,0 L103.855,0 L103.855,53.023 Z M551.145,53.023 L551.145,0 L655,0 L655,380 L551.145,380 L551.145,326.977 L594.755,326.977 L594.755,53.023 L551.145,53.023 Z M389,326.977 L410.991,326.977 C415.591,326.977 419.256,325.357 421.987,322.117 C424.717,318.876 426.083,315.194 426.083,311.07 L426.083,234.186 C426.083,225.938 427.161,219.163 429.317,213.86 C431.473,208.558 434.132,204.287 437.294,201.047 C440.456,197.807 443.618,195.45 446.78,193.977 C449.942,192.504 453.535,191.178 457.56,190 C453.535,188.822 449.87,187.422 446.565,185.802 C443.259,184.182 440.168,181.899 437.294,178.953 C434.419,176.008 431.833,171.81 429.533,166.36 C427.233,160.91 426.083,154.062 426.083,145.814 L426.083,68.93 C426.083,64.806 424.717,61.124 421.987,57.884 C419.256,54.644 415.59,53.024 410.991,53.024 L389,53.024 L389,0 L423.927,0 C431.976,0 439.737,1.326 447.211,3.977 C454.685,6.627 461.297,10.899 467.046,16.791 C471.934,21.798 475.958,28.205 479.12,36.011 C482.282,43.818 483.862,53.171 483.862,64.07 L483.862,147.581 C483.862,151.705 485.229,155.388 487.96,158.628 C490.69,161.868 494.356,163.488 498.955,163.488 L520.946,163.488 L520.946,216.512 L498.955,216.512 C494.355,216.512 490.69,218.132 487.96,221.372 C485.229,224.612 483.863,228.295 483.863,232.419 L483.863,315.93 C483.863,326.83 482.283,336.182 479.12,343.988 C475.958,351.795 471.934,358.202 467.046,363.209 C461.297,369.101 454.686,373.372 447.211,376.023 C439.738,378.674 431.976,380 423.928,380 L389,380 L389,326.977 Z M265.947,326.977 L265.947,380 L231.019,380 C222.97,380 215.209,378.674 207.734,376.023 C200.261,373.373 193.649,369.101 187.9,363.209 C183.012,358.202 178.988,351.795 175.826,343.989 C172.664,336.182 171.083,326.829 171.083,315.93 L171.083,232.42 C171.083,228.296 169.717,224.613 166.987,221.373 C164.256,218.133 160.591,216.513 155.991,216.513 L134,216.513 L134,163.489 L155.991,163.489 C160.591,163.489 164.256,161.869 166.987,158.629 C169.717,155.389 171.083,151.706 171.083,147.582 L171.083,64.07 C171.083,53.17 172.664,43.818 175.826,36.012 C178.988,28.205 183.012,21.798 187.9,16.791 C193.649,10.899 200.26,6.628 207.734,3.977 C215.208,1.326 222.97,0 231.02,0 L265.947,0 L265.947,53.023 L243.956,53.023 C239.356,53.023 235.691,54.643 232.961,57.883 C230.23,61.124 228.864,64.806 228.864,68.93 L228.864,145.814 C228.864,154.062 227.714,160.911 225.414,166.36 C223.114,171.81 220.528,176.008 217.654,178.953 C214.779,181.899 211.688,184.183 208.382,185.803 C205.076,187.423 201.412,188.822 197.386,190 C201.412,191.178 205.005,192.504 208.166,193.977 C211.329,195.45 214.491,197.807 217.653,201.047 C220.815,204.287 223.474,208.558 225.63,213.86 C227.786,219.163 228.864,225.938 228.864,234.186 L228.864,311.07 C228.864,315.194 230.23,318.876 232.961,322.116 C235.691,325.356 239.356,326.976 243.956,326.976 L265.947,326.976 L265.947,326.977 Z"
+                      id="TypeObjArr-形状"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+      >
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <span
+              class="anticon studio-field-icon emotion-0"
+              role="img"
+              style="color: rgb(20, 158, 109);"
+            >
+              <svg
+                aria-hidden="true"
+                class="pro-editor-icon"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 897 496"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  id="TypeSting-页面-1"
+                  stroke="none"
+                  stroke-width="1"
                 >
-                  HelloWorld
-                </span>
-                 
-              </span>
-              {
-            </td>
-          </tr>
-          <tr>
-            <td
-              class="undefined-content emotion-5"
+                  <g
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                    id="TypeSting-icon-Abc1"
+                    transform="translate(0.228000, 0.000000)"
+                  >
+                    <path
+                      d="M376.221,490.077 L288.895,490.077 L263.773,403.35 L113.046,403.35 L87.326,490.077 L5.68434189e-14,490.077 L155.513,0 L220.708,0 L376.221,490.077 Z M136.958,323.418 L240.913,323.418 L189.233,145.208 L136.958,323.418 Z M457.57,163.4 C467.977,150.071 479.184,140.763 491.191,135.478 C503.199,130.192 517.408,127.548 533.818,127.548 C549.428,127.548 563.637,130.307 576.445,135.822 C589.253,141.338 600.26,149.382 609.465,159.953 C616.67,168.686 622.474,178.683 626.876,189.944 C631.279,201.206 634.581,213.271 636.783,226.141 C638.984,239.011 640.385,252.57 640.985,266.819 C641.585,281.067 641.885,295.775 641.885,310.944 C641.885,326.112 641.585,340.934 640.985,355.414 C640.385,369.892 638.984,383.566 636.783,396.436 C634.581,409.306 631.279,421.371 626.876,432.632 C622.474,443.893 616.67,453.89 609.466,462.623 C600.26,473.195 589.153,481.239 576.145,486.754 C563.136,492.27 548.828,495.028 533.218,495.028 C516.407,495.028 501.998,492.155 489.991,486.409 C477.983,480.664 466.376,470.897 455.169,457.108 L455.169,490.891 L379.52,490.891 L379.52,0 L457.57,0 L457.57,163.4 L457.57,163.4 Z M509.58,207.912 C498.045,207.912 488.797,210.556 481.836,215.845 C474.876,221.134 469.605,228.377 466.026,237.575 C462.446,246.773 460.059,257.695 458.866,270.342 C457.672,282.989 457.076,296.441 457.076,310.697 C457.076,325.414 457.672,339.096 458.866,351.743 C460.059,364.39 462.446,375.313 466.026,384.51 C469.605,393.708 474.876,400.951 481.836,406.24 C488.797,411.529 498.045,414.173 509.58,414.173 C521.513,414.173 530.96,411.529 537.92,406.24 C544.882,400.951 550.152,393.708 553.732,384.51 C557.312,375.312 559.698,364.39 560.892,351.743 C562.085,339.096 562.682,325.414 562.682,310.697 C562.682,296.441 562.085,282.989 560.892,270.342 C559.698,257.695 557.312,246.772 553.732,237.575 C550.152,228.377 544.882,221.134 537.921,215.845 C530.96,210.556 521.513,207.912 509.581,207.912 L509.58,207.912 Z M792.985,127.057 C814.547,127.057 833.612,130.969 850.182,138.793 C866.752,146.618 882.025,158.814 896,175.383 L842.696,236.137 C834.71,226.011 827.024,218.762 819.637,214.39 C812.251,210.017 803.367,207.831 792.985,207.831 C783.403,207.831 775.018,209.787 767.831,213.699 C760.644,217.611 754.255,223.479 748.665,231.304 C742.675,240.049 738.284,250.634 735.489,263.061 C732.694,275.488 731.296,291.367 731.296,310.697 C731.296,330.027 732.694,346.021 735.489,358.678 C738.284,371.335 742.676,382.036 748.665,390.781 C754.255,398.605 760.644,404.473 767.831,408.385 C775.018,412.298 783.403,414.254 792.985,414.254 C803.367,414.254 812.251,411.952 819.637,407.35 C827.024,402.747 834.71,395.613 842.696,385.948 L896,446.011 C882.025,462.58 866.753,474.891 850.182,482.946 C833.612,491 814.547,495.028 792.985,495.028 C777.413,495.028 761.342,492.266 744.772,486.743 C728.202,481.22 713.129,471.44 699.553,457.403 C685.978,443.364 674.898,424.494 666.313,400.791 C657.729,377.088 653.436,347.057 653.436,310.697 C653.436,274.337 657.729,244.307 666.313,220.603 C674.898,196.9 685.978,178.145 699.553,164.337 C713.129,150.53 728.202,140.865 744.773,135.342 C761.343,129.819 777.413,127.057 792.985,127.057 L792.985,127.057 Z"
+                      id="TypeSting-形状"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+      >
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <span
+              class="anticon studio-field-icon emotion-0"
+              role="img"
+              style="color: rgb(98, 174, 141);"
             >
-                  
-              <span
-                class="hljs-function"
+              <svg
+                aria-hidden="true"
+                class="pro-editor-icon"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 896 516"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
               >
-                <span
-                  class="hljs-keyword"
-                >
-                  public
-                </span>
-                 
-                <span
-                  class="hljs-keyword"
-                >
-                  static
-                </span>
-                 
-                <span
-                  class="hljs-keyword"
-                >
-                  void
-                </span>
-                 
-                <span
-                  class="hljs-title"
-                >
-                  main
-                </span>
-                <span
-                  class="hljs-params"
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  id="TypeStingArr-页面-1"
+                  stroke="none"
+                  stroke-width="1"
                 >
-                  (String[] args)
-                </span>
-                 
-              </span>
-              {
-            </td>
-          </tr>
-          <tr>
-            <td
-              class="undefined-content emotion-5"
+                  <g
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                    id="TypeStingArr-icon-Abc2"
+                    transform="translate(0.228000, 0.000000)"
+                  >
+                    <path
+                      d="M401.2,414.8 L344.75,414.8 L328.51,358.737 L231.076,358.737 L214.45,414.8 L158,414.8 L258.528,98 L300.672,98 L401.2,414.8 Z M246.533,307.067 L313.733,307.067 L280.325,191.867 L246.533,307.067 Z M453.786,203.627 C460.514,195.01 467.758,188.994 475.52,185.577 C483.282,182.16 492.467,180.451 503.075,180.451 C513.165,180.451 522.351,182.234 530.63,185.799 C538.91,189.365 546.025,194.564 551.976,201.399 C556.633,207.044 560.385,213.506 563.231,220.786 C566.077,228.065 568.211,235.864 569.634,244.184 C571.058,252.504 571.964,261.268 572.351,270.479 C572.739,279.689 572.933,289.198 572.933,299.003 C572.933,308.808 572.739,318.39 572.351,327.749 C571.963,337.109 571.058,345.948 569.634,354.267 C568.211,362.587 566.077,370.387 563.231,377.666 C560.385,384.946 556.633,391.408 551.976,397.053 C546.025,403.887 538.846,409.086 530.436,412.652 C522.027,416.217 512.778,418 502.687,418 C491.82,418 482.506,416.143 474.744,412.429 C466.982,408.715 459.479,402.401 452.234,393.487 L452.234,415.326 L403.334,415.326 L403.334,98 L453.786,98 L453.786,203.627 Z M487.407,232.4 C479.95,232.4 473.972,234.11 469.473,237.528 C464.973,240.947 461.566,245.629 459.252,251.575 C456.938,257.521 455.395,264.581 454.624,272.757 C453.852,280.932 453.467,289.627 453.467,298.844 C453.467,308.357 453.852,317.201 454.624,325.377 C455.395,333.552 456.938,340.613 459.252,346.558 C461.566,352.504 464.973,357.186 469.472,360.605 C473.972,364.024 479.95,365.733 487.407,365.733 C495.121,365.733 501.227,364.023 505.727,360.605 C510.227,357.186 513.634,352.505 515.948,346.558 C518.262,340.613 519.805,333.552 520.576,325.377 C521.348,317.201 521.733,308.357 521.733,298.844 C521.733,289.628 521.348,280.932 520.576,272.757 C519.805,264.581 518.262,257.521 515.948,251.575 C513.634,245.629 510.227,240.947 505.728,237.528 C501.228,234.109 495.121,232.4 487.408,232.4 L487.407,232.4 Z M670.608,180.133 C684.546,180.133 696.871,182.663 707.582,187.72 C718.294,192.778 728.166,200.662 737.2,211.373 L702.743,250.645 C697.581,244.1 692.612,239.415 687.837,236.588 C683.062,233.761 677.319,232.348 670.608,232.348 C664.414,232.348 658.994,233.612 654.348,236.141 C649.702,238.671 645.572,242.464 641.958,247.521 C638.087,253.174 635.248,260.017 633.441,268.051 C631.634,276.083 630.731,286.348 630.731,298.844 C630.731,311.339 631.634,321.678 633.441,329.86 C635.248,338.042 638.087,344.959 641.959,350.612 C645.572,355.67 649.702,359.463 654.348,361.992 C658.994,364.521 664.414,365.785 670.608,365.785 C677.319,365.785 683.062,364.298 687.837,361.323 C692.612,358.347 697.581,353.736 702.743,347.488 L737.2,386.314 C728.166,397.024 718.294,404.984 707.582,410.19 C696.871,415.397 684.546,418 670.608,418 C660.542,418 650.153,416.215 639.442,412.645 C628.73,409.075 618.987,402.752 610.212,393.678 C601.436,384.603 594.273,372.405 588.724,357.083 C583.174,341.761 580.4,322.348 580.4,298.843 C580.4,275.339 583.175,255.926 588.724,240.604 C594.274,225.282 601.436,213.158 610.211,204.232 C618.987,195.307 628.731,189.059 639.442,185.489 C650.153,181.919 660.542,180.133 670.608,180.133 L670.608,180.133 Z M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z"
+                      id="TypeStingArr-形状"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+      >
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <span
+              class="anticon studio-field-icon emotion-0"
+              role="img"
             >
-                    System.out.println(
-              <span
-                class="hljs-string"
+              <svg
+                aria-hidden="true"
+                class="pro-editor-icon"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 1024 1024"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
               >
-                "Hello World!"
-              </span>
-              );
-            </td>
-          </tr>
-          <tr>
-            <td
-              class="undefined-content emotion-5"
-            >
-                  }
-            </td>
-          </tr>
-          <tr>
-            <td
-              class="undefined-content emotion-5"
-            >
-                }
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </pre>
-    <div
-      class="layoutkit-center emotion-10 emotion-11"
-    >
-      <span
-        aria-label="loading-3-quarters"
-        class="anticon anticon-loading-3-quarters anticon-spin emotion-12"
-        role="img"
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  id="TypeArray-array"
+                  stroke="none"
+                  stroke-width="1"
+                >
+                  <path
+                    d="M447.6,326 L389.4,326 L389.4,698 L447.6,698 L447.6,770 L309,770 L309,254 L447.6,254 L447.6,326 Z M576,326 L634.2,326 L634.2,698 L576,698 L576,770 L714.6,770 L714.6,254 L576,254 L576,326 Z"
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                    id="TypeArray-形状"
+                  />
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
-        <svg
-          aria-hidden="true"
-          data-icon="loading-3-quarters"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="0 0 1024 1024"
-          width="1em"
+        <div
+          class="studio-pro-card studio-pro-card-border"
         >
-          <path
-            d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
-          />
-        </svg>
-      </span>
-      Highlighting...
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Highlight /> > renders lineNumber.tsx correctly 1`] = `
-.emotion-0 {
-  background-color: #fafafa;
-  border: 1px solid #fafafa;
-  position: relative;
-  overflow: auto;
-  margin: 0;
-  border-radius: 6px;
-  -webkit-transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-0 pre {
-  margin: 0!important;
-  padding: 16px 24px!important;
-  background: none!important;
-}
-
-.emotion-0 code {
-  background: transparent!important;
-}
-
-.emotion-1 {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  outline: none;
-  cursor: pointer;
-  opacity: 0.6;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-  background-color: #fafafa;
-}
-
-.emotion-1:hover {
-  opacity: 0.8;
-}
-
-.emotion-2 {
-  width: 16px;
-  color: #333333;
-  height: 16px;
-  font-size: 16px;
-}
-
-.emotion-2.scoll {
-  -webkit-animation: copy-button-trans 2s;
-  animation: copy-button-trans 2s;
-  -webkit-animation-play-state: running;
-  animation-play-state: running;
-}
-
-.emotion-4 {
-  display: block;
-  overflow-x: auto;
-  color: #333333;
-  background-color: #666666;
-}
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <span
+              class="anticon studio-field-icon emotion-0"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class="pro-editor-icon"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 17 17"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  id="TypeAny-页面-1"
+                  stroke="none"
+                  stroke-width="1"
+                >
+                  <g
+                    id="TypeAny-编组-2"
+                    transform="translate(0.210938, 0.644531)"
+                  >
+                    <path
+                      d="M12.1525262,6.06243032 L13.4664705,9.94584615 L13.4878216,9.94584615 L14.7964147,6.06243032 L15.9821628,6.06243032 L13.5946488,12.7555674 C13.441534,13.1722274 13.2296812,13.4606734 12.9590546,13.6209231 C12.6848606,13.7740557 12.3750814,13.8506132 12.0296812,13.8506132 L11.661146,13.8506132 L11.661146,12.7983055 L11.986961,12.7983055 C12.1329409,12.7983055 12.2682542,12.7591349 12.3928829,12.6807759 C12.5175117,12.5988852 12.6047536,12.4777882 12.6546087,12.3175563 L12.9590546,11.3880936 L10.9721293,6.06243032 L12.1525262,6.06243032 Z M2.15714604,6.00053512 C2.85481382,5.9934359 3.41188852,6.12487848 3.82837012,6.39489855 C4.24486957,6.67201784 4.45665106,7.14809365 4.46376812,7.82314381 L4.46376812,11.6016054 L3.34781717,11.6016054 L3.34781717,11.1113133 L3.326466,11.1113133 C3.22324192,11.2996031 3.06306355,11.4381628 2.84593088,11.5269922 C2.63234783,11.6193712 2.33689186,11.6655518 1.95958082,11.6655518 C1.34020067,11.6584526 0.863215162,11.4950279 0.528606466,11.1752598 C0.17619621,10.8626087 0,10.4629119 0,9.97616945 C0,9.51074247 0.153061315,9.12526198 0.459183946,8.81972798 C0.765324415,8.50705909 1.21382386,8.34718395 1.80473579,8.34008473 L3.34783501,8.34008473 L3.34783501,7.75919732 C3.35495206,7.27245485 2.9758573,7.03618283 2.21053289,7.05039911 C1.93287848,7.05039911 1.71394426,7.07881382 1.55376589,7.13566109 C1.38647046,7.20317503 1.25476031,7.31686957 1.15867113,7.4767447 L0.282987737,6.81057748 C0.706586399,6.25633891 1.33128205,5.98631884 2.15714604,6.00053512 Z M8.4790903,6 C8.93836343,6 9.358466,6.16171237 9.73943367,6.48513712 C10.1168161,6.81212932 10.3144169,7.29191527 10.3322185,7.92456633 L10.3322185,11.6031215 L9.21607135,11.6031215 L9.21607135,8.3084058 C9.21607135,7.92101672 9.11282943,7.62602453 8.90632776,7.42342921 C8.70339353,7.21730212 8.44170346,7.11422074 8.12127536,7.11422074 C7.80084727,7.11422074 7.5373913,7.21730212 7.33090747,7.42342921 C7.12083835,7.62602453 7.01581271,7.92101672 7.01581271,8.30842363 L7.01581271,11.6031215 L5.89966555,11.6031215 L5.89966555,6.06929766 L7.01581271,6.06929766 L7.01581271,6.65573244 L7.03718172,6.65573244 C7.4038796,6.21857748 7.88452174,6 8.4790903,6 Z M3.3400223,9.26198439 L2.00618952,9.26198439 C1.35882274,9.27628986 1.03869788,9.4997369 1.04583278,9.93230769 C1.04583278,10.1218105 1.12941806,10.2826845 1.29658863,10.4149833 C1.45664214,10.5615518 1.72163211,10.634845 2.09155853,10.634845 C2.55750279,10.6419799 2.88651059,10.5865775 3.07858194,10.468602 C3.2528874,10.3506087 3.3400223,10.0824794 3.3400223,9.66419621 L3.3400223,9.26198439 Z"
+                      id="TypeAny-形状结合"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
 
-.emotion-4 .hljs-comment,
-.emotion-4 .hljs-quote {
-  color: #aaaaaa;
+exports[`<FieldSelect /> > renders basic.tsx correctly 1`] = `
+.emotion-0 {
+  width: 100%;
 }
 
-.emotion-4 .hljs-variable,
-.emotion-4 .hljs-attribute,
-.emotion-4 .hljs-template-variable,
-.emotion-4 .hljs-tag,
-.emotion-4 .hljs-name,
-.emotion-4 .hljs-selector-id,
-.emotion-4 .hljs-selector-class,
-.emotion-4 .hljs-regexp,
-.emotion-4 .hljs-title,
-.emotion-4 .hljs-deletion {
-  color: #ec5e41;
+.emotion-0.studio-select-multiple:not(.emotion-0.studio-select-customize-input) .emotion-0.studio-select.studio-select-selector:hover {
+  color: rgba(0, 0, 0, 0.88);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: transparent;
 }
 
-.emotion-4 .hljs-builtin-name,
-.emotion-4 .hljs-literal,
-.emotion-4 .hljs-type,
-.emotion-4 .hljs-params,
-.emotion-4 .hljs-meta,
-.emotion-4 .hljs-link {
-  color: #ff802b;
+.emotion-0.studio-select-multiple:not(.emotion-0.studio-select-customize-input) .emotion-0.studio-select.studio-select-selector:focus {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background-color: rgba(0, 0, 0, 0.02)!important;
+  border-color: #1677ff!important;
+  box-shadow: none;
 }
 
-.emotion-4 .hljs-string,
-.emotion-4 .hljs-number,
-.emotion-4 .hljs-symbol,
-.emotion-4 .hljs-bullet,
-.emotion-4 .hljs-addition {
-  color: #55b467;
+.emotion-0.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector {
+  border-color: transparent;
 }
 
-.emotion-4 .hljs-keyword,
-.emotion-4 .hljs-doctag,
-.emotion-4 .hljs-built_in,
-.emotion-4 .hljs-selector-tag,
-.emotion-4 .hljs-section {
-  color: #369eff;
+.emotion-0.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:hover {
+  color: rgba(0, 0, 0, 0.88);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: transparent;
 }
 
-.emotion-4 .hljs-emphasis {
-  font-style: italic;
+.emotion-0.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:focus {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background-color: rgba(0, 0, 0, 0.02)!important;
+  border-color: #1677ff!important;
+  box-shadow: none;
 }
 
-.emotion-4 .hljs-strong {
-  font-weight: bold;
+.emotion-0.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background-color: rgba(0, 0, 0, 0.02)!important;
+  border-color: #1677ff!important;
+  box-shadow: none;
 }
 
-.emotion-5 {
-  box-sizing: border-box;
-  width: 1rem;
-  margin-right: 1.5rem;
-  display: inline-block;
-  color: rgba(115, 138, 148, 0.4);
-  text-align: right;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+.emotion-0.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input) .studio-select-selector {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background-color: rgba(0, 0, 0, 0.02)!important;
+  border-color: #1677ff!important;
+  box-shadow: none;
 }
 
-.emotion-6 {
-  width: 100%;
+.emotion-0 .studio-select-arrow {
+  top: 13px;
+  right: 8px;
+  width: 10px;
+  height: 10px;
+  font-size: 10px;
 }
 
-.emotion-15 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  gap: 8px;
+  font-size: 12px;
+}
+
+.emotion-2 {
+  font-size: 14px;
+}
+
+.emotion-3 {
+  margin-left: 4px;
 }
 
-.emotion-16 {
-  -webkit-backdrop-filter: saturate(180%) blur(10px);
-  backdrop-filter: saturate(180%) blur(10px);
-  position: absolute;
-  top: 0;
-  right: 0;
+<div>
+  <div
+    class="studio-select studio-field-select emotion-0 studio-select-single studio-select-show-arrow"
+  >
+    <div
+      class="studio-select-selector"
+    >
+      <span
+        class="studio-select-selection-search"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Search"
+          aria-owns="rc_select_TEST_OR_SSR_list"
+          autocomplete="off"
+          class="studio-select-selection-search-input"
+          id="rc_select_TEST_OR_SSR"
+          readonly=""
+          role="combobox"
+          style="opacity: 0;"
+          type="search"
+          unselectable="on"
+          value=""
+        />
+      </span>
+      <span
+        class="studio-select-selection-item"
+      >
+        <div
+          class="studio-field-title"
+        >
+          <div
+            class="studio-field-title-content emotion-1"
+          >
+            <span
+              class="anticon studio-field-icon emotion-2"
+              role="img"
+              style="color: rgb(82, 149, 196);"
+            >
+              <svg
+                aria-hidden="true"
+                class="pro-editor-icon"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 897 496"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  id="TypeNum-页面-1"
+                  stroke="none"
+                  stroke-width="1"
+                >
+                  <g
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                    id="TypeNum-icon-icon-test3"
+                    transform="translate(0.500000, -0.000000)"
+                  >
+                    <path
+                      d="M99.31,99.994 L0,186.29 L0,90.406 L99.31,4.109 L188.345,4.109 L188.345,491.751 L99.309,491.751 L99.309,99.994 L99.31,99.994 Z M263.194,411.619 L445.374,199.989 C454.507,189.486 461.127,179.898 465.236,171.223 C469.346,162.547 471.4,152.503 471.4,141.087 C471.4,122.824 466.378,108.099 456.333,96.912 C446.288,85.725 431.677,80.132 412.5,80.132 C404.738,80.132 397.318,81.16 390.24,83.214 C383.164,85.269 376.771,88.694 371.064,93.488 C365.357,98.282 360.791,104.674 357.366,112.665 C353.942,120.655 352.229,130.585 352.229,142.457 L263.194,142.457 C263.194,120.084 267.074,100.108 274.837,82.529 C282.599,64.95 293.215,49.997 306.684,37.669 C320.154,25.341 335.906,15.981 353.942,9.589 C371.977,3.195 391.496,5.68434189e-14 412.5,5.68434189e-14 C433.96,5.68434189e-14 453.821,3.31 472.085,9.93 C490.349,16.552 505.987,25.912 519,38.011 C532.013,50.111 542.172,64.951 549.478,82.529 C556.783,100.109 560.436,119.856 560.436,141.772 C560.436,153.644 559.295,164.26 557.012,173.62 C554.748868,182.927687 551.295766,191.904944 546.738,200.33 C542.172,208.778 536.579,217.339 529.958,226.014 C523.338,234.689 515.918,243.821 507.7,253.41 L371.406,411.62 L560.436,411.62 L560.436,491.751 L263.194,491.751 L263.194,411.62 L263.194,411.619 Z M741.214,495.861 C721.124,495.861 701.834,493.121 683.341,487.642 C664.849,482.163 648.412,473.602 634.029,461.959 C619.647,450.316 608.118,435.476 599.442,417.441 C590.767,399.405 586.202,377.603 585.745,352.034 L674.78,352.034 C675.237,362.992 677.292,372.466 680.944,380.457 C684.597,388.447 689.391,395.067 695.327,400.319 C701.263,405.569 708.226,409.45 716.217,411.962 C724.207,414.473 732.539,415.729 741.215,415.729 C760.392,415.729 776.145,410.021 788.472,398.606 C800.8,387.191 806.964,370.298 806.964,347.924 C806.964,327.378 801.029,311.054 789.157,298.954 C777.286,286.855 760.392,280.805 738.475,280.805 L725.462,280.805 L725.462,203.413 L738.475,203.413 C760.392,203.413 776.145,197.591 785.733,185.948 C795.321,174.305 800.115,159.808 800.115,142.458 C800.115,121.91 794.18,106.386 782.308,95.885 C770.437,85.383 756.511,80.132 740.53,80.132 C723.636,80.132 709.596,85.269 698.41,95.542 C687.222,105.816 681.173,120.312 680.26,139.032 L591.224,139.032 C591.68,117.116 595.904,97.597 603.894,80.475 C611.884,63.352 622.614,48.741 636.084,36.642 C649.554,24.542 665.192,15.41 682.999,9.246 C700.806,3.082 719.983,0 740.529,0 C761.989,0 781.851,3.424 800.115,10.273 C818.379,17.123 834.131,26.711 847.373,39.039 C860.614,51.367 870.887,66.092 878.193,83.214 C885.498,100.337 889.151,119.171 889.151,139.718 C889.151,166.2 883.786,187.318 873.056,203.07 C862.326,218.823 848.971,231.036 832.99,239.712 C850.797,248.844 865.75,262.199 877.85,279.778 C889.95,297.357 896,320.985 896,350.664 C896,374.864 891.89,396.095 883.672,414.359 C875.453,432.623 864.267,447.804 850.112,459.904 C835.958,472.004 819.521,481.021 800.8,486.957 C782.08,492.893 762.218,495.861 741.215,495.861 L741.214,495.861 Z"
+                      id="TypeNum-形状"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </span>
+            <span
+              class="studio-field-title-title emotion-3"
+            >
+              orderId
+            </span>
+          </div>
+        </div>
+      </span>
+    </div>
+    <span
+      aria-hidden="true"
+      class="studio-select-arrow"
+      style="user-select: none;"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down studio-select-suffix"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`<FieldTitle /> > renders basic.tsx correctly 1`] = `
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -20292,1180 +15355,2064 @@ exports[`<Highlight /> > renders lineNumber.tsx correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  height: 36px;
-  padding: 0 8px;
-  font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
-  color: #aaaaaa;
-  border-radius: 6;
+  font-size: 12px;
 }
 
-.emotion-17 {
-  color: #aaaaaa;
+.emotion-1 {
+  font-size: 14px;
+}
+
+.emotion-2 {
+  margin-left: 4px;
 }
 
 <div>
   <div
-    class="studio-highlight-container emotion-0"
-    tabindex="-1"
+    class="studio-pro-card studio-pro-card-contain-card studio-pro-card-ghost"
   >
-    <button
-      class="studio-highlight-copy emotion-1"
-      type="button"
+    <div
+      class="studio-pro-card-body studio-pro-card-body-wrap"
     >
-      <span
-        aria-label="copy"
-        class="anticon anticon-copy studio-highlight-copy-icon emotion-2"
-        role="img"
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+      >
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <div
+              class="studio-field-title"
+            >
+              <div
+                class="studio-field-title-content emotion-0"
+              >
+                <span
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 17 17"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <g
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                      id="TypeAny-页面-1"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        id="TypeAny-编组-2"
+                        transform="translate(0.210938, 0.644531)"
+                      >
+                        <path
+                          d="M12.1525262,6.06243032 L13.4664705,9.94584615 L13.4878216,9.94584615 L14.7964147,6.06243032 L15.9821628,6.06243032 L13.5946488,12.7555674 C13.441534,13.1722274 13.2296812,13.4606734 12.9590546,13.6209231 C12.6848606,13.7740557 12.3750814,13.8506132 12.0296812,13.8506132 L11.661146,13.8506132 L11.661146,12.7983055 L11.986961,12.7983055 C12.1329409,12.7983055 12.2682542,12.7591349 12.3928829,12.6807759 C12.5175117,12.5988852 12.6047536,12.4777882 12.6546087,12.3175563 L12.9590546,11.3880936 L10.9721293,6.06243032 L12.1525262,6.06243032 Z M2.15714604,6.00053512 C2.85481382,5.9934359 3.41188852,6.12487848 3.82837012,6.39489855 C4.24486957,6.67201784 4.45665106,7.14809365 4.46376812,7.82314381 L4.46376812,11.6016054 L3.34781717,11.6016054 L3.34781717,11.1113133 L3.326466,11.1113133 C3.22324192,11.2996031 3.06306355,11.4381628 2.84593088,11.5269922 C2.63234783,11.6193712 2.33689186,11.6655518 1.95958082,11.6655518 C1.34020067,11.6584526 0.863215162,11.4950279 0.528606466,11.1752598 C0.17619621,10.8626087 0,10.4629119 0,9.97616945 C0,9.51074247 0.153061315,9.12526198 0.459183946,8.81972798 C0.765324415,8.50705909 1.21382386,8.34718395 1.80473579,8.34008473 L3.34783501,8.34008473 L3.34783501,7.75919732 C3.35495206,7.27245485 2.9758573,7.03618283 2.21053289,7.05039911 C1.93287848,7.05039911 1.71394426,7.07881382 1.55376589,7.13566109 C1.38647046,7.20317503 1.25476031,7.31686957 1.15867113,7.4767447 L0.282987737,6.81057748 C0.706586399,6.25633891 1.33128205,5.98631884 2.15714604,6.00053512 Z M8.4790903,6 C8.93836343,6 9.358466,6.16171237 9.73943367,6.48513712 C10.1168161,6.81212932 10.3144169,7.29191527 10.3322185,7.92456633 L10.3322185,11.6031215 L9.21607135,11.6031215 L9.21607135,8.3084058 C9.21607135,7.92101672 9.11282943,7.62602453 8.90632776,7.42342921 C8.70339353,7.21730212 8.44170346,7.11422074 8.12127536,7.11422074 C7.80084727,7.11422074 7.5373913,7.21730212 7.33090747,7.42342921 C7.12083835,7.62602453 7.01581271,7.92101672 7.01581271,8.30842363 L7.01581271,11.6031215 L5.89966555,11.6031215 L5.89966555,6.06929766 L7.01581271,6.06929766 L7.01581271,6.65573244 L7.03718172,6.65573244 C7.4038796,6.21857748 7.88452174,6 8.4790903,6 Z M3.3400223,9.26198439 L2.00618952,9.26198439 C1.35882274,9.27628986 1.03869788,9.4997369 1.04583278,9.93230769 C1.04583278,10.1218105 1.12941806,10.2826845 1.29658863,10.4149833 C1.45664214,10.5615518 1.72163211,10.634845 2.09155853,10.634845 C2.55750279,10.6419799 2.88651059,10.5865775 3.07858194,10.468602 C3.2528874,10.3506087 3.3400223,10.0824794 3.3400223,9.66419621 L3.3400223,9.26198439 Z"
+                          id="TypeAny-形状结合"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </span>
+                <span
+                  class="studio-field-title-title emotion-2"
+                >
+                  any
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+      >
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <div
+              class="studio-field-title"
+            >
+              <div
+                class="studio-field-title-content emotion-0"
+              >
+                <span
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 17 16"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <defs>
+                      <rect
+                        height="16"
+                        id="TypeAnyArr-path-1"
+                        width="16"
+                        x="0"
+                        y="0"
+                      />
+                    </defs>
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      id="TypeAnyArr-页面-1"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        id="TypeAnyArr-编组"
+                        transform="translate(-156.183593, -18.424879)"
+                      >
+                        <g
+                          id="TypeAnyArr-svg"
+                          transform="translate(130.328125, 0.000000)"
+                        >
+                          <g
+                            transform="translate(26.492188, 17.000000)"
+                          >
+                            <g
+                              transform="translate(0.000000, 1.421875)"
+                            >
+                              <mask
+                                fill="white"
+                                id="TypeAnyArr-mask-2"
+                              >
+                                <use
+                                  xlink:href="#TypeAnyArr-path-1"
+                                />
+                              </mask>
+                              <g
+                                id="TypeAnyArr-容器"
+                              />
+                              <path
+                                d="M2.4793757,4.27432776 L1.43825195,4.27432776 L1.43825195,10.8583367 L2.4793757,10.8583367 L2.4793757,12.1326644 L0,12.1326644 L0,3 L2.4793757,3 L2.4793757,4.27432776 Z M13.5027871,4.27432776 L13.5027871,3 L15.9821628,3 L15.9821628,12.1326644 L13.5027871,12.1326644 L13.5027871,10.8583367 L14.5439108,10.8583367 L14.5439108,4.27432776 L13.5027871,4.27432776 Z M4.76700111,9.02664883 L4.75241026,9.02664883 C4.68186399,9.15472018 4.57241472,9.24893645 4.42402676,9.30933333 C4.27810033,9.37215608 4.07620067,9.40356745 3.81838127,9.40356745 C3.39515719,9.39875139 3.06921739,9.28758974 2.84057971,9.07013601 C2.59977703,8.85751616 2.4793757,8.58571237 2.4793757,8.2547068 C2.4793757,7.9382029 2.58397324,7.67606689 2.79313266,7.4682631 C3.00232776,7.25564326 3.30880713,7.14692531 3.71257079,7.14209142 L4.76700111,7.14209142 L4.76700111,6.747068 C4.77187068,6.41604459 4.51282051,6.25538462 3.98986845,6.2650524 C3.80013378,6.2650524 3.65055072,6.28437012 3.54108361,6.32302341 C3.42678261,6.36893645 3.33677592,6.44626087 3.27109922,6.55497882 L2.67274916,6.10196656 C2.96219398,5.72504794 3.38907469,5.54143144 3.95337347,5.55108138 C4.43012709,5.54626533 4.81077369,5.63564771 5.09536678,5.81928205 C5.37995987,6.00773244 5.52467336,6.33147826 5.52954292,6.79055518 L5.52954292,9.36008027 L4.76700111,9.36008027 L4.76700111,9.02664883 Z M4.76254181,7.76254181 L3.84998885,7.76254181 C3.4070903,7.77219175 3.18808473,7.92309476 3.19293645,8.21525084 C3.19293645,8.34319732 3.25012263,8.45184392 3.36451282,8.5411728 C3.47401561,8.64016945 3.65531327,8.68966778 3.90838796,8.68966778 C4.22717503,8.69448384 4.4522631,8.65707915 4.58368785,8.57740022 C4.70292977,8.49772129 4.76254181,8.31663768 4.76254181,8.03416722 L4.76254181,7.76254181 Z M6.52842809,5.5979398 L7.29198662,5.5979398 L7.29198662,5.99745819 L7.30661315,5.99745819 C7.55745819,5.69962988 7.88626979,5.55072464 8.29301226,5.55072464 C8.60721516,5.55072464 8.89462653,5.6608874 9.15522854,5.88123077 C9.41340468,6.104 9.54857525,6.43086734 9.56075808,6.86185061 L9.56075808,9.36789298 L8.79719955,9.36789298 L8.79719955,7.12336232 C8.79719955,6.85942475 8.7265641,6.65847046 8.5852932,6.52046377 C8.446466,6.38001338 8.26745151,6.30980602 8.04824972,6.30980602 C7.8290301,6.30980602 7.64880268,6.38001338 7.50754961,6.52046377 C7.36383501,6.65847046 7.29198662,6.85942475 7.29198662,7.12336232 L7.29198662,9.36789298 L6.52842809,9.36789298 L6.52842809,5.5979398 Z M10.006689,5.58639911 L10.813592,5.58639911 L11.7117681,8.22796878 L11.726359,8.22796878 L12.6209142,5.58639911 L13.4314381,5.58639911 L11.7993846,10.139175 C11.6947157,10.4226087 11.5498952,10.6188183 11.3649052,10.7278038 C11.1774716,10.8319732 10.9657079,10.884058 10.7296143,10.884058 L10.4776812,10.884058 L10.4776812,10.1682497 L10.7003969,10.1682497 C10.8001962,10.1682497 10.8926823,10.1416187 10.9778907,10.0883211 C11.0630814,10.0325975 11.1227291,9.95026087 11.1567982,9.84123969 L11.3649052,9.20901672 L10.006689,5.58639911 Z"
+                                fill="#000000"
+                                fill-opacity="0.88"
+                                id="TypeAnyArr-shapeGroup"
+                                mask="url(#TypeAnyArr-mask-2)"
+                              />
+                            </g>
+                          </g>
+                        </g>
+                      </g>
+                    </g>
+                  </svg>
+                </span>
+                <span
+                  class="studio-field-title-title emotion-2"
+                >
+                  anyArray
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+      >
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <div
+              class="studio-field-title"
+            >
+              <div
+                class="studio-field-title-content emotion-0"
+              >
+                <span
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
+                  style="color: rgb(216, 193, 82);"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 791 495"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      id="TypeBool-页面-1"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        fill="currentColor"
+                        fill-rule="nonzero"
+                        id="TypeBool-icon-bool1"
+                        transform="translate(0.535000, 0.000000)"
+                      >
+                        <path
+                          d="M5.68434189e-14,490.864 L5.68434189e-14,0 L70.32,0 L70.32,173.043 L71.7,173.043 C79.513,161.553 88.82,152.705 99.62,146.501 C110.421,140.296 122.716,137.194 136.504,137.194 C153.51,137.194 166.724,140.181 176.146,146.156 C185.568,152.131 193.266,159.714 199.241,168.906 C203.837,176.26 206.825,185.912 208.203,197.862 C209.583,209.812 210.272,228.426 210.272,253.705 L210.272,386.762 C210.272,406.066 209.352,421.462 207.514,432.952 C205.675,444.443 202.688,454.095 198.552,461.908 C186.602,483.97 166.149,495 137.194,495 C119.728,495 106.4,491.553 97.208,484.659 C88.015,477.765 79.053,469.262 70.32,459.15 L70.32,490.864 L5.68434189e-14,490.864 Z M139.951,248.879 C139.951,237.849 137.538,228.196 132.712,219.923 C127.886,211.65 118.809,207.513 105.481,207.513 C95.369,207.513 86.981,211.076 80.317,218.2 C73.652,225.324 70.32,234.401 70.32,245.432 L70.32,381.247 C70.32,394.116 73.538,404.572 79.972,412.615 C86.407,420.658 94.909,424.68 105.481,424.68 C117.431,424.68 126.163,420.313 131.678,411.58 C137.194,402.848 139.951,391.358 139.951,377.11 L139.951,248.879 Z M232.431,258.531 C232.431,244.283 233.351,231.184 235.189,219.234 C237.027,207.284 240.475,196.714 245.53,187.521 C253.803,172.354 265.638,160.174 281.035,150.981 C296.432,141.79 315.161,137.194 337.222,137.194 C359.284,137.194 378.012,141.79 393.41,150.982 C408.807,160.174 420.642,172.354 428.915,187.521 C433.97,196.713 437.417,207.284 439.255,219.234 C441.095,231.184 442.014,244.283 442.014,258.531 L442.014,373.663 C442.014,387.911 441.094,401.01 439.256,412.96 C437.417,424.91 433.97,435.48 428.915,444.673 C420.642,459.84 408.807,472.019 393.41,481.212 C378.013,490.404 359.284,495 337.222,495 C315.162,495 296.432,490.404 281.035,481.212 C265.638,472.019 253.803,459.84 245.53,444.672 C240.475,435.48 237.027,424.91 235.189,412.96 C233.351,401.01 232.431,387.91 232.431,373.663 L232.431,258.531 L232.431,258.531 Z M302.751,384.694 C302.751,398.022 305.854,408.019 312.059,414.684 C318.264,421.348 326.651,424.68 337.222,424.68 C347.794,424.68 356.182,421.348 362.386,414.683 C368.591,408.019 371.693,398.023 371.693,384.693 L371.693,247.5 C371.693,234.171 368.591,224.175 362.386,217.51 C356.181,210.846 347.794,207.514 337.222,207.514 C326.652,207.514 318.264,210.846 312.059,217.51 C305.854,224.175 302.752,234.171 302.752,247.5 L302.752,384.694 L302.751,384.694 Z M457.969,258.53 C457.969,244.282 458.889,231.183 460.727,219.233 C462.566,207.283 466.013,196.713 471.068,187.52 C479.341,172.353 491.176,160.173 506.573,150.98 C521.97,141.789 540.699,137.193 562.761,137.193 C584.822,137.193 603.551,141.789 618.948,150.981 C634.345,160.173 646.18,172.353 654.453,187.52 C659.509,196.712 662.956,207.283 664.794,219.233 C666.633,231.183 667.552,244.282 667.552,258.53 L667.552,373.662 C667.552,387.91 666.632,401.009 664.794,412.959 C662.956,424.909 659.509,435.479 654.453,444.672 C646.18,459.839 634.345,472.018 618.948,481.211 C603.55,490.404 584.821,495 562.76,495 C540.698,495 521.97,490.404 506.572,481.212 C491.175,472.019 479.34,459.84 471.067,444.672 C466.012,435.48 462.565,424.91 460.727,412.96 C458.887,401.01 457.969,387.91 457.969,373.663 L457.969,258.531 L457.969,258.53 Z M528.29,384.693 C528.29,398.021 531.392,408.018 537.597,414.683 C543.802,421.347 552.19,424.679 562.761,424.679 C573.331,424.679 581.72,421.347 587.924,414.682 C594.129,408.018 597.231,398.022 597.231,384.692 L597.231,247.5 C597.231,234.171 594.129,224.175 587.924,217.51 C581.72,210.846 573.332,207.514 562.761,207.514 C552.19,207.514 543.801,210.846 537.597,217.51 C531.392,224.175 528.29,234.171 528.29,247.5 L528.29,384.694 L528.29,384.693 Z M685.574,0 L755.894,0 L755.894,392.277 C755.894,405.606 758.307,414.683 763.134,419.509 C767.959,424.335 777.036,427.437 790.365,428.816 L790.365,495 C774.279,495 759.801,493.736 746.932,491.208 C734.062,488.68 723.032,483.74 713.84,476.386 C704.648,469.492 697.639,459.725 692.813,447.086 C687.987,434.446 685.574,417.786 685.574,397.103 L685.574,0 Z"
+                          id="TypeBool-形状"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </span>
+                <span
+                  class="studio-field-title-title emotion-2"
+                >
+                  bool
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
-        <svg
-          aria-hidden="true"
-          data-icon="copy"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
+        <div
+          class="studio-pro-card studio-pro-card-border"
         >
-          <path
-            d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
-          />
-        </svg>
-      </span>
-      <span
-        aria-label="check"
-        class="anticon anticon-check studio-highlight-copy-icon emotion-2"
-        role="img"
-        style="color: rgb(63, 177, 99);"
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <div
+              class="studio-field-title"
+            >
+              <div
+                class="studio-field-title-content emotion-0"
+              >
+                <span
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
+                  style="color: rgb(216, 193, 82);"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 897 516"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      id="TypeBoolArr-页面-1"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        fill="currentColor"
+                        fill-rule="nonzero"
+                        id="TypeBoolArr-icon-bool"
+                        transform="translate(0.900000, 0.000000)"
+                      >
+                        <path
+                          d="M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z M169,430.075 L169,83 L218.721,83 L218.721,205.354 L219.696,205.354 C225.221,197.229 231.802,190.974 239.439,186.586 C247.076,182.199 255.769,180.006 265.519,180.006 C277.542,180.006 286.885,182.118 293.547,186.343 C300.209,190.567 305.653,195.929 309.877,202.429 C313.127,207.629 315.24,214.453 316.214,222.903 C317.189,231.352 317.677,244.513 317.677,262.387 L317.677,356.468 C317.677,370.118 317.027,381.004 315.727,389.128 C314.427,397.253 312.315,404.077 309.39,409.602 C300.94,425.2 286.48,433 266.006,433 C253.656,433 244.232,430.563 237.733,425.688 C231.233,420.813 224.896,414.801 218.721,407.652 L218.721,430.075 L169,430.075 Z M267.955,258.975 C267.955,251.175 266.249,244.351 262.837,238.501 C259.425,232.651 253.007,229.727 243.582,229.727 C236.432,229.727 230.502,232.246 225.79,237.283 C221.078,242.32 218.721,248.738 218.721,256.538 L218.721,352.568 C218.721,361.668 220.996,369.061 225.546,374.748 C230.096,380.435 236.108,383.278 243.582,383.278 C252.032,383.278 258.206,380.191 262.106,374.017 C266.006,367.842 267.956,359.717 267.956,349.643 L267.956,258.975 L267.955,258.975 Z M333.345,265.799 C333.345,255.725 333.995,246.463 335.295,238.014 C336.595,229.564 339.032,222.09 342.607,215.591 C348.457,204.866 356.825,196.254 367.712,189.755 C378.598,183.255 391.842,180.005 407.44,180.005 C423.04,180.005 436.282,183.255 447.169,189.755 C458.055,196.255 466.423,204.866 472.273,215.591 C475.848,222.091 478.285,229.564 479.585,238.014 C480.885,246.464 481.535,255.725 481.535,265.799 L481.535,347.206 C481.535,357.28 480.885,366.542 479.585,374.992 C478.285,383.442 475.848,390.915 472.273,397.415 C466.423,408.139 458.055,416.751 447.169,423.251 C436.282,429.751 423.039,433 407.44,433 C391.841,433 378.598,429.75 367.712,423.25 C356.825,416.751 348.457,408.14 342.607,397.415 C339.032,390.915 336.595,383.441 335.295,374.992 C333.995,366.542 333.345,357.28 333.345,347.206 L333.345,265.8 L333.345,265.799 Z M383.067,355.006 C383.067,364.43 385.26,371.498 389.647,376.21 C394.035,380.922 399.966,383.279 407.44,383.279 C414.915,383.279 420.845,380.922 425.233,376.21 C429.62,371.498 431.813,364.43 431.813,355.006 L431.813,258 C431.813,248.576 429.62,241.507 425.233,236.795 C420.845,232.083 414.915,229.727 407.44,229.727 C399.966,229.727 394.035,232.083 389.648,236.795 C385.26,241.507 383.067,248.575 383.067,258 L383.067,355.006 L383.067,355.006 Z M492.816,265.799 C492.816,255.725 493.467,246.463 494.766,238.014 C496.066,229.564 498.503,222.09 502.078,215.591 C507.928,204.866 516.296,196.254 527.182,189.755 C538.069,183.255 551.312,180.005 566.911,180.005 C582.51,180.005 595.752,183.255 606.639,189.755 C617.526,196.255 625.894,204.866 631.744,215.591 C635.318,222.091 637.756,229.564 639.056,238.014 C640.356,246.464 641.006,255.725 641.006,265.799 L641.006,347.206 C641.006,357.28 640.356,366.542 639.056,374.992 C637.756,383.442 635.318,390.915 631.744,397.415 C625.894,408.139 617.526,416.751 606.639,423.251 C595.752,429.751 582.51,433 566.911,433 C551.311,433 538.069,429.75 527.182,423.25 C516.296,416.751 507.928,408.14 502.078,397.415 C498.503,390.915 496.066,383.441 494.766,374.992 C493.466,366.542 492.816,357.28 492.816,347.206 L492.816,265.8 L492.816,265.799 Z M542.537,355.006 C542.537,364.43 544.731,371.498 549.118,376.21 C553.506,380.922 559.436,383.279 566.911,383.279 C574.385,383.279 580.316,380.922 584.703,376.21 C589.091,371.498 591.284,364.43 591.284,355.006 L591.284,258 C591.284,248.576 589.091,241.507 584.704,236.795 C580.316,232.083 574.385,229.727 566.911,229.727 C559.436,229.727 553.506,232.083 549.118,236.795 C544.731,241.507 542.538,248.575 542.538,258 L542.538,355.006 L542.537,355.006 Z M653.75,83 L703.472,83 L703.472,360.368 C703.472,369.792 705.178,376.21 708.59,379.623 C712.002,383.035 718.42,385.228 727.845,386.203 L727.845,433 C716.471,433 706.235,432.106 697.135,430.319 C688.035,428.532 680.235,425.039 673.736,419.839 C667.236,414.964 662.281,408.059 658.869,399.121 C655.456,390.184 653.75,378.404 653.75,363.78 L653.75,83 Z"
+                          id="TypeBoolArr-形状"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </span>
+                <span
+                  class="studio-field-title-title emotion-2"
+                >
+                  boolArray
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
-        <svg
-          aria-hidden="true"
-          data-icon="check"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
+        <div
+          class="studio-pro-card studio-pro-card-border"
         >
-          <path
-            d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-          />
-        </svg>
-      </span>
-    </button>
-    <pre
-      class="emotion-4"
-    >
-      <table
-        border="0"
-        cellpadding="0"
-        cellspacing="0"
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <div
+              class="studio-field-title"
+            >
+              <div
+                class="studio-field-title-content emotion-0"
+              >
+                <span
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
+                  style="color: rgb(82, 149, 196);"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 897 496"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      id="TypeNum-页面-1"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        fill="currentColor"
+                        fill-rule="nonzero"
+                        id="TypeNum-icon-icon-test3"
+                        transform="translate(0.500000, -0.000000)"
+                      >
+                        <path
+                          d="M99.31,99.994 L0,186.29 L0,90.406 L99.31,4.109 L188.345,4.109 L188.345,491.751 L99.309,491.751 L99.309,99.994 L99.31,99.994 Z M263.194,411.619 L445.374,199.989 C454.507,189.486 461.127,179.898 465.236,171.223 C469.346,162.547 471.4,152.503 471.4,141.087 C471.4,122.824 466.378,108.099 456.333,96.912 C446.288,85.725 431.677,80.132 412.5,80.132 C404.738,80.132 397.318,81.16 390.24,83.214 C383.164,85.269 376.771,88.694 371.064,93.488 C365.357,98.282 360.791,104.674 357.366,112.665 C353.942,120.655 352.229,130.585 352.229,142.457 L263.194,142.457 C263.194,120.084 267.074,100.108 274.837,82.529 C282.599,64.95 293.215,49.997 306.684,37.669 C320.154,25.341 335.906,15.981 353.942,9.589 C371.977,3.195 391.496,5.68434189e-14 412.5,5.68434189e-14 C433.96,5.68434189e-14 453.821,3.31 472.085,9.93 C490.349,16.552 505.987,25.912 519,38.011 C532.013,50.111 542.172,64.951 549.478,82.529 C556.783,100.109 560.436,119.856 560.436,141.772 C560.436,153.644 559.295,164.26 557.012,173.62 C554.748868,182.927687 551.295766,191.904944 546.738,200.33 C542.172,208.778 536.579,217.339 529.958,226.014 C523.338,234.689 515.918,243.821 507.7,253.41 L371.406,411.62 L560.436,411.62 L560.436,491.751 L263.194,491.751 L263.194,411.62 L263.194,411.619 Z M741.214,495.861 C721.124,495.861 701.834,493.121 683.341,487.642 C664.849,482.163 648.412,473.602 634.029,461.959 C619.647,450.316 608.118,435.476 599.442,417.441 C590.767,399.405 586.202,377.603 585.745,352.034 L674.78,352.034 C675.237,362.992 677.292,372.466 680.944,380.457 C684.597,388.447 689.391,395.067 695.327,400.319 C701.263,405.569 708.226,409.45 716.217,411.962 C724.207,414.473 732.539,415.729 741.215,415.729 C760.392,415.729 776.145,410.021 788.472,398.606 C800.8,387.191 806.964,370.298 806.964,347.924 C806.964,327.378 801.029,311.054 789.157,298.954 C777.286,286.855 760.392,280.805 738.475,280.805 L725.462,280.805 L725.462,203.413 L738.475,203.413 C760.392,203.413 776.145,197.591 785.733,185.948 C795.321,174.305 800.115,159.808 800.115,142.458 C800.115,121.91 794.18,106.386 782.308,95.885 C770.437,85.383 756.511,80.132 740.53,80.132 C723.636,80.132 709.596,85.269 698.41,95.542 C687.222,105.816 681.173,120.312 680.26,139.032 L591.224,139.032 C591.68,117.116 595.904,97.597 603.894,80.475 C611.884,63.352 622.614,48.741 636.084,36.642 C649.554,24.542 665.192,15.41 682.999,9.246 C700.806,3.082 719.983,0 740.529,0 C761.989,0 781.851,3.424 800.115,10.273 C818.379,17.123 834.131,26.711 847.373,39.039 C860.614,51.367 870.887,66.092 878.193,83.214 C885.498,100.337 889.151,119.171 889.151,139.718 C889.151,166.2 883.786,187.318 873.056,203.07 C862.326,218.823 848.971,231.036 832.99,239.712 C850.797,248.844 865.75,262.199 877.85,279.778 C889.95,297.357 896,320.985 896,350.664 C896,374.864 891.89,396.095 883.672,414.359 C875.453,432.623 864.267,447.804 850.112,459.904 C835.958,472.004 819.521,481.021 800.8,486.957 C782.08,492.893 762.218,495.861 741.215,495.861 L741.214,495.861 Z"
+                          id="TypeNum-形状"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </span>
+                <span
+                  class="studio-field-title-title emotion-2"
+                >
+                  integer
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
-        <tbody>
-          <tr>
-            <td
-              class="undefined-index emotion-5"
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <div
+              class="studio-field-title"
             >
-              1
-            </td>
-            <td
-              class="undefined-content emotion-6"
+              <div
+                class="studio-field-title-content emotion-0"
+              >
+                <span
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
+                  style="color: rgb(35, 155, 239);"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 897 516"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      id="TypeNumArr-页面-1"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        fill="currentColor"
+                        fill-rule="nonzero"
+                        id="TypeNumArr-icon-icon-test1"
+                        transform="translate(0.500000, 0.000000)"
+                      >
+                        <path
+                          d="M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z M223.088,162.53 L159,218.221 L159,156.343 L223.088,100.652 L280.547,100.652 L280.547,415.348 L223.088,415.348 L223.088,162.53 L223.088,162.53 Z M328.85,363.635 L446.42,227.061 C452.312,220.284 456.585,214.096 459.237,208.497 C461.889,202.899 463.215,196.417 463.215,189.05 C463.215,177.263 459.973,167.76 453.491,160.541 C447.008,153.322 437.579,149.713 425.204,149.713 C420.194,149.713 415.406,150.376 410.839,151.702 C406.272,153.028 402.147,155.238 398.463,158.332 C394.78,161.425 391.833,165.551 389.623,170.707 C387.413,175.864 386.309,182.273 386.309,189.934 L328.85,189.934 C328.85,175.495 331.355,162.604 336.364,151.26 C341.374,139.915 348.224,130.265 356.916,122.31 C365.609,114.354 375.774,108.313 387.414,104.188 C399.053,100.063 411.649,98 425.204,98 C439.053,98 451.87,100.136 463.657,104.409 C475.443,108.681 485.535,114.722 493.933,122.53 C502.331,130.339 508.887,139.915 513.601,151.26 C518.316,162.604 520.674,175.348 520.674,189.492 C520.674,197.152 519.937,204.004 518.463,210.044 C517.002664,216.050947 514.774313,221.84466 511.833,227.282 C508.887,232.733 505.277,238.258 501.005,243.856 C496.732,249.455 491.944,255.348 486.64,261.536 L398.684,363.636 L520.674,363.636 L520.674,415.348 L328.85,415.348 L328.85,363.635 Z M637.337,418 C624.372,418 611.923,416.232 599.989,412.696 C588.055,409.16 577.448,403.636 568.166,396.122 C558.884,388.608 551.444,379.032 545.846,367.392 C540.247,355.753 537.3,341.683 537.006,325.182 L594.464,325.182 C594.759,332.254 596.085,338.368 598.442,343.525 C600.8,348.681 603.893,352.954 607.724,356.343 C611.554,359.731 616.048,362.236 621.204,363.856 C626.361,365.477 631.739,366.287 637.337,366.287 C649.713,366.287 659.879,362.604 667.835,355.237 C675.79,347.871 679.768,336.969 679.768,322.53 C679.768,309.27 675.938,298.737 668.277,290.928 C660.615,283.12 649.713,279.215 635.569,279.215 L627.172,279.215 L627.172,229.271 L635.569,229.271 C649.713,229.271 659.879,225.514 666.067,218 C672.254,210.486 675.348,201.13 675.348,189.934 C675.348,176.674 671.518,166.656 663.857,159.878 C656.195,153.101 647.208,149.713 636.895,149.713 C625.993,149.713 616.932,153.028 609.713,159.657 C602.493,166.287 598.59,175.643 598,187.724 L540.542,187.724 C540.836,173.58 543.562,160.984 548.718,149.934 C553.875,138.884 560.799,129.454 569.492,121.646 C578.184,113.838 588.276,107.945 599.768,103.966 C611.26,99.99 623.636,98 636.895,98 C650.745,98 663.562,100.21 675.348,104.63 C687.135,109.05 697.3,115.238 705.846,123.193 C714.391,131.149 721.02,140.652 725.736,151.702 C730.45,162.752 732.806,174.906 732.806,188.166 C732.806,205.256 729.345,218.884 722.42,229.05 C715.496,239.216 706.877,247.098 696.564,252.696 C708.056,258.589 717.706,267.208 725.514,278.552 C733.323,289.897 737.227,305.145 737.227,324.298 C737.227,339.915 734.575,353.617 729.271,365.403 C723.967,377.19 716.748,386.987 707.614,394.796 C698.479,402.604 687.871,408.424 675.79,412.254 C663.71,416.084 650.892,418 637.337,418 L637.337,418 Z"
+                          id="TypeNumArr-形状"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </span>
+                <span
+                  class="studio-field-title-title emotion-2"
+                >
+                  integerArray
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+      >
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <div
+              class="studio-field-title"
             >
-              <span
-                class="hljs-keyword"
-              >
-                public
-              </span>
-               
-              <span
-                class="hljs-class"
+              <div
+                class="studio-field-title-content emotion-0"
               >
                 <span
-                  class="hljs-keyword"
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
+                  style="color: rgb(82, 149, 196);"
                 >
-                  class
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 897 496"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      id="TypeNum-页面-1"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        fill="currentColor"
+                        fill-rule="nonzero"
+                        id="TypeNum-icon-icon-test3"
+                        transform="translate(0.500000, -0.000000)"
+                      >
+                        <path
+                          d="M99.31,99.994 L0,186.29 L0,90.406 L99.31,4.109 L188.345,4.109 L188.345,491.751 L99.309,491.751 L99.309,99.994 L99.31,99.994 Z M263.194,411.619 L445.374,199.989 C454.507,189.486 461.127,179.898 465.236,171.223 C469.346,162.547 471.4,152.503 471.4,141.087 C471.4,122.824 466.378,108.099 456.333,96.912 C446.288,85.725 431.677,80.132 412.5,80.132 C404.738,80.132 397.318,81.16 390.24,83.214 C383.164,85.269 376.771,88.694 371.064,93.488 C365.357,98.282 360.791,104.674 357.366,112.665 C353.942,120.655 352.229,130.585 352.229,142.457 L263.194,142.457 C263.194,120.084 267.074,100.108 274.837,82.529 C282.599,64.95 293.215,49.997 306.684,37.669 C320.154,25.341 335.906,15.981 353.942,9.589 C371.977,3.195 391.496,5.68434189e-14 412.5,5.68434189e-14 C433.96,5.68434189e-14 453.821,3.31 472.085,9.93 C490.349,16.552 505.987,25.912 519,38.011 C532.013,50.111 542.172,64.951 549.478,82.529 C556.783,100.109 560.436,119.856 560.436,141.772 C560.436,153.644 559.295,164.26 557.012,173.62 C554.748868,182.927687 551.295766,191.904944 546.738,200.33 C542.172,208.778 536.579,217.339 529.958,226.014 C523.338,234.689 515.918,243.821 507.7,253.41 L371.406,411.62 L560.436,411.62 L560.436,491.751 L263.194,491.751 L263.194,411.62 L263.194,411.619 Z M741.214,495.861 C721.124,495.861 701.834,493.121 683.341,487.642 C664.849,482.163 648.412,473.602 634.029,461.959 C619.647,450.316 608.118,435.476 599.442,417.441 C590.767,399.405 586.202,377.603 585.745,352.034 L674.78,352.034 C675.237,362.992 677.292,372.466 680.944,380.457 C684.597,388.447 689.391,395.067 695.327,400.319 C701.263,405.569 708.226,409.45 716.217,411.962 C724.207,414.473 732.539,415.729 741.215,415.729 C760.392,415.729 776.145,410.021 788.472,398.606 C800.8,387.191 806.964,370.298 806.964,347.924 C806.964,327.378 801.029,311.054 789.157,298.954 C777.286,286.855 760.392,280.805 738.475,280.805 L725.462,280.805 L725.462,203.413 L738.475,203.413 C760.392,203.413 776.145,197.591 785.733,185.948 C795.321,174.305 800.115,159.808 800.115,142.458 C800.115,121.91 794.18,106.386 782.308,95.885 C770.437,85.383 756.511,80.132 740.53,80.132 C723.636,80.132 709.596,85.269 698.41,95.542 C687.222,105.816 681.173,120.312 680.26,139.032 L591.224,139.032 C591.68,117.116 595.904,97.597 603.894,80.475 C611.884,63.352 622.614,48.741 636.084,36.642 C649.554,24.542 665.192,15.41 682.999,9.246 C700.806,3.082 719.983,0 740.529,0 C761.989,0 781.851,3.424 800.115,10.273 C818.379,17.123 834.131,26.711 847.373,39.039 C860.614,51.367 870.887,66.092 878.193,83.214 C885.498,100.337 889.151,119.171 889.151,139.718 C889.151,166.2 883.786,187.318 873.056,203.07 C862.326,218.823 848.971,231.036 832.99,239.712 C850.797,248.844 865.75,262.199 877.85,279.778 C889.95,297.357 896,320.985 896,350.664 C896,374.864 891.89,396.095 883.672,414.359 C875.453,432.623 864.267,447.804 850.112,459.904 C835.958,472.004 819.521,481.021 800.8,486.957 C782.08,492.893 762.218,495.861 741.215,495.861 L741.214,495.861 Z"
+                          id="TypeNum-形状"
+                        />
+                      </g>
+                    </g>
+                  </svg>
                 </span>
-                 
                 <span
-                  class="hljs-title"
+                  class="studio-field-title-title emotion-2"
                 >
-                  HelloWorld
+                  number
                 </span>
-                 
-              </span>
-              {
-            </td>
-          </tr>
-          <tr>
-            <td
-              class="undefined-index emotion-5"
-            >
-              2
-            </td>
-            <td
-              class="undefined-content emotion-6"
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+      >
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <div
+              class="studio-field-title"
             >
-                  
-              <span
-                class="hljs-function"
+              <div
+                class="studio-field-title-content emotion-0"
               >
                 <span
-                  class="hljs-keyword"
-                >
-                  public
-                </span>
-                 
-                <span
-                  class="hljs-keyword"
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
+                  style="color: rgb(35, 155, 239);"
                 >
-                  static
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 897 516"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      id="TypeNumArr-页面-1"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        fill="currentColor"
+                        fill-rule="nonzero"
+                        id="TypeNumArr-icon-icon-test1"
+                        transform="translate(0.500000, 0.000000)"
+                      >
+                        <path
+                          d="M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z M223.088,162.53 L159,218.221 L159,156.343 L223.088,100.652 L280.547,100.652 L280.547,415.348 L223.088,415.348 L223.088,162.53 L223.088,162.53 Z M328.85,363.635 L446.42,227.061 C452.312,220.284 456.585,214.096 459.237,208.497 C461.889,202.899 463.215,196.417 463.215,189.05 C463.215,177.263 459.973,167.76 453.491,160.541 C447.008,153.322 437.579,149.713 425.204,149.713 C420.194,149.713 415.406,150.376 410.839,151.702 C406.272,153.028 402.147,155.238 398.463,158.332 C394.78,161.425 391.833,165.551 389.623,170.707 C387.413,175.864 386.309,182.273 386.309,189.934 L328.85,189.934 C328.85,175.495 331.355,162.604 336.364,151.26 C341.374,139.915 348.224,130.265 356.916,122.31 C365.609,114.354 375.774,108.313 387.414,104.188 C399.053,100.063 411.649,98 425.204,98 C439.053,98 451.87,100.136 463.657,104.409 C475.443,108.681 485.535,114.722 493.933,122.53 C502.331,130.339 508.887,139.915 513.601,151.26 C518.316,162.604 520.674,175.348 520.674,189.492 C520.674,197.152 519.937,204.004 518.463,210.044 C517.002664,216.050947 514.774313,221.84466 511.833,227.282 C508.887,232.733 505.277,238.258 501.005,243.856 C496.732,249.455 491.944,255.348 486.64,261.536 L398.684,363.636 L520.674,363.636 L520.674,415.348 L328.85,415.348 L328.85,363.635 Z M637.337,418 C624.372,418 611.923,416.232 599.989,412.696 C588.055,409.16 577.448,403.636 568.166,396.122 C558.884,388.608 551.444,379.032 545.846,367.392 C540.247,355.753 537.3,341.683 537.006,325.182 L594.464,325.182 C594.759,332.254 596.085,338.368 598.442,343.525 C600.8,348.681 603.893,352.954 607.724,356.343 C611.554,359.731 616.048,362.236 621.204,363.856 C626.361,365.477 631.739,366.287 637.337,366.287 C649.713,366.287 659.879,362.604 667.835,355.237 C675.79,347.871 679.768,336.969 679.768,322.53 C679.768,309.27 675.938,298.737 668.277,290.928 C660.615,283.12 649.713,279.215 635.569,279.215 L627.172,279.215 L627.172,229.271 L635.569,229.271 C649.713,229.271 659.879,225.514 666.067,218 C672.254,210.486 675.348,201.13 675.348,189.934 C675.348,176.674 671.518,166.656 663.857,159.878 C656.195,153.101 647.208,149.713 636.895,149.713 C625.993,149.713 616.932,153.028 609.713,159.657 C602.493,166.287 598.59,175.643 598,187.724 L540.542,187.724 C540.836,173.58 543.562,160.984 548.718,149.934 C553.875,138.884 560.799,129.454 569.492,121.646 C578.184,113.838 588.276,107.945 599.768,103.966 C611.26,99.99 623.636,98 636.895,98 C650.745,98 663.562,100.21 675.348,104.63 C687.135,109.05 697.3,115.238 705.846,123.193 C714.391,131.149 721.02,140.652 725.736,151.702 C730.45,162.752 732.806,174.906 732.806,188.166 C732.806,205.256 729.345,218.884 722.42,229.05 C715.496,239.216 706.877,247.098 696.564,252.696 C708.056,258.589 717.706,267.208 725.514,278.552 C733.323,289.897 737.227,305.145 737.227,324.298 C737.227,339.915 734.575,353.617 729.271,365.403 C723.967,377.19 716.748,386.987 707.614,394.796 C698.479,402.604 687.871,408.424 675.79,412.254 C663.71,416.084 650.892,418 637.337,418 L637.337,418 Z"
+                          id="TypeNumArr-形状"
+                        />
+                      </g>
+                    </g>
+                  </svg>
                 </span>
-                 
                 <span
-                  class="hljs-keyword"
+                  class="studio-field-title-title emotion-2"
                 >
-                  void
+                  numberArray
                 </span>
-                 
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+      >
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <div
+              class="studio-field-title"
+            >
+              <div
+                class="studio-field-title-content emotion-0"
+              >
                 <span
-                  class="hljs-title"
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
                 >
-                  main
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 1024 1024"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      id="TypeObj-type-obj"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        fill="currentColor"
+                        fill-rule="nonzero"
+                        id="TypeObj-编组"
+                        transform="translate(271.000000, 254.000000)"
+                      >
+                        <path
+                          d="M305,444 L334.355,444 C340.495,444 345.387,441.8 349.032,437.4 C352.677,433 354.5,428 354.5,422.4 L354.5,318 C354.5,306.8 355.939,297.6 358.817,290.4 C361.695,283.2 365.244,277.4 369.465,273 C373.686,268.6 377.907,265.4 382.128,263.4 C386.348,261.4 391.145,259.6 396.518,258 C391.145,256.4 386.253,254.5 381.84,252.3 C377.427,250.1 373.302,247 369.465,243 C365.628,239 362.175,233.3 359.105,225.9 C356.035,218.5 354.5,209.2 354.5,198 L354.5,93.6 C354.5,88 352.677,83 349.032,78.6 C345.387,74.2 340.494,72 334.355,72 L305,72 L305,0 L351.622,0 C362.366,0 372.727,1.8 382.703,5.4 C392.68,9 401.506,14.8 409.18,22.8 C415.704,29.6 421.076,38.3 425.297,48.9 C429.517,59.5 431.627,72.2 431.627,87 L431.627,200.4 C431.627,206 433.451,211 437.096,215.4 C440.741,219.8 445.634,222 451.773,222 L481.128,222 L481.128,294 L451.773,294 C445.633,294 440.741,296.2 437.096,300.6 C433.451,305 431.628,310 431.628,315.6 L431.628,429 C431.628,443.8 429.518,456.5 425.297,467.1 C421.076,477.7 415.704,486.4 409.18,493.2 C401.506,501.2 392.68,507 382.703,510.6 C372.727,514.2 362.366,516 351.623,516 L305,516 L305,444 Z M176.128,444 L146.773,444 C140.633,444 135.741,441.8 132.096,437.4 C128.451,433 126.628,428 126.628,422.4 L126.628,318 C126.628,306.8 125.189,297.6 122.311,290.4 C119.433,283.2 115.884,277.4 111.663,273 C107.442,268.6 103.221,265.4 99,263.4 C94.779,261.4 89.983,259.6 84.61,258 C89.983,256.4 94.875,254.5 99.288,252.3 C103.701,250.1 107.826,247 111.663,243 C115.5,239 118.953,233.3 122.023,225.9 C125.093,218.5 126.628,209.2 126.628,198 L126.628,93.6 C126.628,88 128.451,83 132.096,78.6 C135.741,74.2 140.634,72 146.773,72 L176.128,72 L176.128,0 L129.506,0 C118.762,0 108.401,1.8 98.424,5.4 C88.448,9 79.622,14.8 71.948,22.8 C65.424,29.6 60.052,38.3 55.831,48.9 C51.611,59.5 49.5,72.2 49.5,87 L49.5,200.4 C49.5,206 47.677,211 44.032,215.4 C40.387,219.8 35.494,222 29.355,222 L0,222 L0,294 L29.355,294 C35.495,294 40.387,296.2 44.032,300.6 C47.677,305 49.5,310 49.5,315.6 L49.5,429 C49.5,443.8 51.61,456.5 55.831,467.1 C60.052,477.7 65.424,486.4 71.948,493.2 C79.622,501.2 88.448,507 98.424,510.6 C108.401,514.2 118.762,516 129.506,516 L176.128,516 L176.128,444 L176.128,444 Z"
+                          id="TypeObj-形状"
+                        />
+                      </g>
+                    </g>
+                  </svg>
                 </span>
                 <span
-                  class="hljs-params"
+                  class="studio-field-title-title emotion-2"
                 >
-                  (String[] args)
-                </span>
-                 
-              </span>
-              {
-            </td>
-          </tr>
-          <tr>
-            <td
-              class="undefined-index emotion-5"
-            >
-              3
-            </td>
-            <td
-              class="undefined-content emotion-6"
-            >
-                    System.out.println(
-              <span
-                class="hljs-string"
-              >
-                "Hello World!"
-              </span>
-              );
-            </td>
-          </tr>
-          <tr>
-            <td
-              class="undefined-index emotion-5"
-            >
-              4
-            </td>
-            <td
-              class="undefined-content emotion-6"
-            >
-                  }
-            </td>
-          </tr>
-          <tr>
-            <td
-              class="undefined-index emotion-5"
-            >
-              5
-            </td>
-            <td
-              class="undefined-content emotion-6"
-            >
-                }
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </pre>
-    <div
-      class="layoutkit-center emotion-15 emotion-16"
-    >
-      <span
-        aria-label="loading-3-quarters"
-        class="anticon anticon-loading-3-quarters anticon-spin emotion-17"
-        role="img"
+                  object
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
-        <svg
-          aria-hidden="true"
-          data-icon="loading-3-quarters"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="0 0 1024 1024"
-          width="1em"
+        <div
+          class="studio-pro-card studio-pro-card-border"
         >
-          <path
-            d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
-          />
-        </svg>
-      </span>
-      Highlighting...
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Highlight /> > renders theme.tsx correctly 1`] = `
-.emotion-0 {
-  background-color: #fafafa;
-  border: 1px solid #fafafa;
-  position: relative;
-  overflow: auto;
-  margin: 0;
-  border-radius: 6px;
-  -webkit-transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-0 pre {
-  margin: 0!important;
-  padding: 16px 24px!important;
-  background: none!important;
-}
-
-.emotion-0 code {
-  background: transparent!important;
-}
-
-.emotion-1 {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  outline: none;
-  cursor: pointer;
-  opacity: 0.6;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-  background-color: #fafafa;
-}
-
-.emotion-1:hover {
-  opacity: 0.8;
-}
-
-.emotion-2 {
-  width: 16px;
-  color: #333333;
-  height: 16px;
-  font-size: 16px;
-}
-
-.emotion-2.scoll {
-  -webkit-animation: copy-button-trans 2s;
-  animation: copy-button-trans 2s;
-  -webkit-animation-play-state: running;
-  animation-play-state: running;
-}
-
-.emotion-4 {
-  display: block;
-  overflow-x: auto;
-  color: #333333;
-  background-color: #666666;
-}
-
-.emotion-4 .hljs-comment,
-.emotion-4 .hljs-quote {
-  color: #aaaaaa;
-}
-
-.emotion-4 .hljs-variable,
-.emotion-4 .hljs-attribute,
-.emotion-4 .hljs-template-variable,
-.emotion-4 .hljs-tag,
-.emotion-4 .hljs-name,
-.emotion-4 .hljs-selector-id,
-.emotion-4 .hljs-selector-class,
-.emotion-4 .hljs-regexp,
-.emotion-4 .hljs-title,
-.emotion-4 .hljs-deletion {
-  color: #ec5e41;
-}
-
-.emotion-4 .hljs-builtin-name,
-.emotion-4 .hljs-literal,
-.emotion-4 .hljs-type,
-.emotion-4 .hljs-params,
-.emotion-4 .hljs-meta,
-.emotion-4 .hljs-link {
-  color: #ff802b;
-}
-
-.emotion-4 .hljs-string,
-.emotion-4 .hljs-number,
-.emotion-4 .hljs-symbol,
-.emotion-4 .hljs-bullet,
-.emotion-4 .hljs-addition {
-  color: #55b467;
-}
-
-.emotion-4 .hljs-keyword,
-.emotion-4 .hljs-doctag,
-.emotion-4 .hljs-built_in,
-.emotion-4 .hljs-selector-tag,
-.emotion-4 .hljs-section {
-  color: #369eff;
-}
-
-.emotion-4 .hljs-emphasis {
-  font-style: italic;
-}
-
-.emotion-4 .hljs-strong {
-  font-weight: bold;
-}
-
-.emotion-5 {
-  width: 100%;
-}
-
-.emotion-19 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 8px;
-}
-
-.emotion-20 {
-  -webkit-backdrop-filter: saturate(180%) blur(10px);
-  backdrop-filter: saturate(180%) blur(10px);
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  height: 36px;
-  padding: 0 8px;
-  font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
-  color: #aaaaaa;
-  border-radius: 6;
-}
-
-.emotion-21 {
-  color: #aaaaaa;
-}
-
-<div>
-  <div>
-    <div
-      class="studio-space studio-space-horizontal studio-space-align-center"
-    >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <div
+              class="studio-field-title"
+            >
+              <div
+                class="studio-field-title-content emotion-0"
+              >
+                <span
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 656 381"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      id="TypeObjArr-页面-1"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        fill="currentColor"
+                        fill-rule="nonzero"
+                        id="TypeObjArr-icon-icon-test4"
+                        transform="translate(0.228000, 0.125000)"
+                      >
+                        <path
+                          d="M103.855,53.023 L60.245,53.023 L60.245,326.977 L103.855,326.977 L103.855,380 L0,380 L0,0 L103.855,0 L103.855,53.023 Z M551.145,53.023 L551.145,0 L655,0 L655,380 L551.145,380 L551.145,326.977 L594.755,326.977 L594.755,53.023 L551.145,53.023 Z M389,326.977 L410.991,326.977 C415.591,326.977 419.256,325.357 421.987,322.117 C424.717,318.876 426.083,315.194 426.083,311.07 L426.083,234.186 C426.083,225.938 427.161,219.163 429.317,213.86 C431.473,208.558 434.132,204.287 437.294,201.047 C440.456,197.807 443.618,195.45 446.78,193.977 C449.942,192.504 453.535,191.178 457.56,190 C453.535,188.822 449.87,187.422 446.565,185.802 C443.259,184.182 440.168,181.899 437.294,178.953 C434.419,176.008 431.833,171.81 429.533,166.36 C427.233,160.91 426.083,154.062 426.083,145.814 L426.083,68.93 C426.083,64.806 424.717,61.124 421.987,57.884 C419.256,54.644 415.59,53.024 410.991,53.024 L389,53.024 L389,0 L423.927,0 C431.976,0 439.737,1.326 447.211,3.977 C454.685,6.627 461.297,10.899 467.046,16.791 C471.934,21.798 475.958,28.205 479.12,36.011 C482.282,43.818 483.862,53.171 483.862,64.07 L483.862,147.581 C483.862,151.705 485.229,155.388 487.96,158.628 C490.69,161.868 494.356,163.488 498.955,163.488 L520.946,163.488 L520.946,216.512 L498.955,216.512 C494.355,216.512 490.69,218.132 487.96,221.372 C485.229,224.612 483.863,228.295 483.863,232.419 L483.863,315.93 C483.863,326.83 482.283,336.182 479.12,343.988 C475.958,351.795 471.934,358.202 467.046,363.209 C461.297,369.101 454.686,373.372 447.211,376.023 C439.738,378.674 431.976,380 423.928,380 L389,380 L389,326.977 Z M265.947,326.977 L265.947,380 L231.019,380 C222.97,380 215.209,378.674 207.734,376.023 C200.261,373.373 193.649,369.101 187.9,363.209 C183.012,358.202 178.988,351.795 175.826,343.989 C172.664,336.182 171.083,326.829 171.083,315.93 L171.083,232.42 C171.083,228.296 169.717,224.613 166.987,221.373 C164.256,218.133 160.591,216.513 155.991,216.513 L134,216.513 L134,163.489 L155.991,163.489 C160.591,163.489 164.256,161.869 166.987,158.629 C169.717,155.389 171.083,151.706 171.083,147.582 L171.083,64.07 C171.083,53.17 172.664,43.818 175.826,36.012 C178.988,28.205 183.012,21.798 187.9,16.791 C193.649,10.899 200.26,6.628 207.734,3.977 C215.208,1.326 222.97,0 231.02,0 L265.947,0 L265.947,53.023 L243.956,53.023 C239.356,53.023 235.691,54.643 232.961,57.883 C230.23,61.124 228.864,64.806 228.864,68.93 L228.864,145.814 C228.864,154.062 227.714,160.911 225.414,166.36 C223.114,171.81 220.528,176.008 217.654,178.953 C214.779,181.899 211.688,184.183 208.382,185.803 C205.076,187.423 201.412,188.822 197.386,190 C201.412,191.178 205.005,192.504 208.166,193.977 C211.329,195.45 214.491,197.807 217.653,201.047 C220.815,204.287 223.474,208.558 225.63,213.86 C227.786,219.163 228.864,225.938 228.864,234.186 L228.864,311.07 C228.864,315.194 230.23,318.876 232.961,322.116 C235.691,325.356 239.356,326.976 243.956,326.976 L265.947,326.976 L265.947,326.977 Z"
+                          id="TypeObjArr-形状"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </span>
+                <span
+                  class="studio-field-title-title emotion-2"
+                >
+                  objectArray
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div
-        class="studio-space-item"
-        style="margin-right: 8px;"
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
-        语言选择:
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <div
+              class="studio-field-title"
+            >
+              <div
+                class="studio-field-title-content emotion-0"
+              >
+                <span
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
+                  style="color: rgb(20, 158, 109);"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 897 496"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      id="TypeSting-页面-1"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        fill="currentColor"
+                        fill-rule="nonzero"
+                        id="TypeSting-icon-Abc1"
+                        transform="translate(0.228000, 0.000000)"
+                      >
+                        <path
+                          d="M376.221,490.077 L288.895,490.077 L263.773,403.35 L113.046,403.35 L87.326,490.077 L5.68434189e-14,490.077 L155.513,0 L220.708,0 L376.221,490.077 Z M136.958,323.418 L240.913,323.418 L189.233,145.208 L136.958,323.418 Z M457.57,163.4 C467.977,150.071 479.184,140.763 491.191,135.478 C503.199,130.192 517.408,127.548 533.818,127.548 C549.428,127.548 563.637,130.307 576.445,135.822 C589.253,141.338 600.26,149.382 609.465,159.953 C616.67,168.686 622.474,178.683 626.876,189.944 C631.279,201.206 634.581,213.271 636.783,226.141 C638.984,239.011 640.385,252.57 640.985,266.819 C641.585,281.067 641.885,295.775 641.885,310.944 C641.885,326.112 641.585,340.934 640.985,355.414 C640.385,369.892 638.984,383.566 636.783,396.436 C634.581,409.306 631.279,421.371 626.876,432.632 C622.474,443.893 616.67,453.89 609.466,462.623 C600.26,473.195 589.153,481.239 576.145,486.754 C563.136,492.27 548.828,495.028 533.218,495.028 C516.407,495.028 501.998,492.155 489.991,486.409 C477.983,480.664 466.376,470.897 455.169,457.108 L455.169,490.891 L379.52,490.891 L379.52,0 L457.57,0 L457.57,163.4 L457.57,163.4 Z M509.58,207.912 C498.045,207.912 488.797,210.556 481.836,215.845 C474.876,221.134 469.605,228.377 466.026,237.575 C462.446,246.773 460.059,257.695 458.866,270.342 C457.672,282.989 457.076,296.441 457.076,310.697 C457.076,325.414 457.672,339.096 458.866,351.743 C460.059,364.39 462.446,375.313 466.026,384.51 C469.605,393.708 474.876,400.951 481.836,406.24 C488.797,411.529 498.045,414.173 509.58,414.173 C521.513,414.173 530.96,411.529 537.92,406.24 C544.882,400.951 550.152,393.708 553.732,384.51 C557.312,375.312 559.698,364.39 560.892,351.743 C562.085,339.096 562.682,325.414 562.682,310.697 C562.682,296.441 562.085,282.989 560.892,270.342 C559.698,257.695 557.312,246.772 553.732,237.575 C550.152,228.377 544.882,221.134 537.921,215.845 C530.96,210.556 521.513,207.912 509.581,207.912 L509.58,207.912 Z M792.985,127.057 C814.547,127.057 833.612,130.969 850.182,138.793 C866.752,146.618 882.025,158.814 896,175.383 L842.696,236.137 C834.71,226.011 827.024,218.762 819.637,214.39 C812.251,210.017 803.367,207.831 792.985,207.831 C783.403,207.831 775.018,209.787 767.831,213.699 C760.644,217.611 754.255,223.479 748.665,231.304 C742.675,240.049 738.284,250.634 735.489,263.061 C732.694,275.488 731.296,291.367 731.296,310.697 C731.296,330.027 732.694,346.021 735.489,358.678 C738.284,371.335 742.676,382.036 748.665,390.781 C754.255,398.605 760.644,404.473 767.831,408.385 C775.018,412.298 783.403,414.254 792.985,414.254 C803.367,414.254 812.251,411.952 819.637,407.35 C827.024,402.747 834.71,395.613 842.696,385.948 L896,446.011 C882.025,462.58 866.753,474.891 850.182,482.946 C833.612,491 814.547,495.028 792.985,495.028 C777.413,495.028 761.342,492.266 744.772,486.743 C728.202,481.22 713.129,471.44 699.553,457.403 C685.978,443.364 674.898,424.494 666.313,400.791 C657.729,377.088 653.436,347.057 653.436,310.697 C653.436,274.337 657.729,244.307 666.313,220.603 C674.898,196.9 685.978,178.145 699.553,164.337 C713.129,150.53 728.202,140.865 744.773,135.342 C761.343,129.819 777.413,127.057 792.985,127.057 L792.985,127.057 Z"
+                          id="TypeSting-形状"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </span>
+                <span
+                  class="studio-field-title-title emotion-2"
+                >
+                  string
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <div
-        class="studio-space-item"
-        style="margin-right: 8px;"
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
         <div
-          class="studio-select studio-select-single studio-select-show-arrow"
-          style="width: 120px;"
+          class="studio-pro-card studio-pro-card-border"
         >
           <div
-            class="studio-select-selector"
+            class="studio-pro-card-body studio-pro-card-body-center"
           >
-            <span
-              class="studio-select-selection-search"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="rc_select_TEST_OR_SSR_list"
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-label="Search"
-                aria-owns="rc_select_TEST_OR_SSR_list"
-                autocomplete="off"
-                class="studio-select-selection-search-input"
-                id="rc_select_TEST_OR_SSR"
-                readonly=""
-                role="combobox"
-                style="opacity: 0;"
-                type="search"
-                unselectable="on"
-                value=""
-              />
-            </span>
-            <span
-              class="studio-select-selection-item"
-              title="Typescript"
+            <div
+              class="studio-field-title"
             >
-              Typescript
-            </span>
+              <div
+                class="studio-field-title-content emotion-0"
+              >
+                <span
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
+                  style="color: rgb(98, 174, 141);"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 896 516"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      id="TypeStingArr-页面-1"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        fill="currentColor"
+                        fill-rule="nonzero"
+                        id="TypeStingArr-icon-Abc2"
+                        transform="translate(0.228000, 0.000000)"
+                      >
+                        <path
+                          d="M401.2,414.8 L344.75,414.8 L328.51,358.737 L231.076,358.737 L214.45,414.8 L158,414.8 L258.528,98 L300.672,98 L401.2,414.8 Z M246.533,307.067 L313.733,307.067 L280.325,191.867 L246.533,307.067 Z M453.786,203.627 C460.514,195.01 467.758,188.994 475.52,185.577 C483.282,182.16 492.467,180.451 503.075,180.451 C513.165,180.451 522.351,182.234 530.63,185.799 C538.91,189.365 546.025,194.564 551.976,201.399 C556.633,207.044 560.385,213.506 563.231,220.786 C566.077,228.065 568.211,235.864 569.634,244.184 C571.058,252.504 571.964,261.268 572.351,270.479 C572.739,279.689 572.933,289.198 572.933,299.003 C572.933,308.808 572.739,318.39 572.351,327.749 C571.963,337.109 571.058,345.948 569.634,354.267 C568.211,362.587 566.077,370.387 563.231,377.666 C560.385,384.946 556.633,391.408 551.976,397.053 C546.025,403.887 538.846,409.086 530.436,412.652 C522.027,416.217 512.778,418 502.687,418 C491.82,418 482.506,416.143 474.744,412.429 C466.982,408.715 459.479,402.401 452.234,393.487 L452.234,415.326 L403.334,415.326 L403.334,98 L453.786,98 L453.786,203.627 Z M487.407,232.4 C479.95,232.4 473.972,234.11 469.473,237.528 C464.973,240.947 461.566,245.629 459.252,251.575 C456.938,257.521 455.395,264.581 454.624,272.757 C453.852,280.932 453.467,289.627 453.467,298.844 C453.467,308.357 453.852,317.201 454.624,325.377 C455.395,333.552 456.938,340.613 459.252,346.558 C461.566,352.504 464.973,357.186 469.472,360.605 C473.972,364.024 479.95,365.733 487.407,365.733 C495.121,365.733 501.227,364.023 505.727,360.605 C510.227,357.186 513.634,352.505 515.948,346.558 C518.262,340.613 519.805,333.552 520.576,325.377 C521.348,317.201 521.733,308.357 521.733,298.844 C521.733,289.628 521.348,280.932 520.576,272.757 C519.805,264.581 518.262,257.521 515.948,251.575 C513.634,245.629 510.227,240.947 505.728,237.528 C501.228,234.109 495.121,232.4 487.408,232.4 L487.407,232.4 Z M670.608,180.133 C684.546,180.133 696.871,182.663 707.582,187.72 C718.294,192.778 728.166,200.662 737.2,211.373 L702.743,250.645 C697.581,244.1 692.612,239.415 687.837,236.588 C683.062,233.761 677.319,232.348 670.608,232.348 C664.414,232.348 658.994,233.612 654.348,236.141 C649.702,238.671 645.572,242.464 641.958,247.521 C638.087,253.174 635.248,260.017 633.441,268.051 C631.634,276.083 630.731,286.348 630.731,298.844 C630.731,311.339 631.634,321.678 633.441,329.86 C635.248,338.042 638.087,344.959 641.959,350.612 C645.572,355.67 649.702,359.463 654.348,361.992 C658.994,364.521 664.414,365.785 670.608,365.785 C677.319,365.785 683.062,364.298 687.837,361.323 C692.612,358.347 697.581,353.736 702.743,347.488 L737.2,386.314 C728.166,397.024 718.294,404.984 707.582,410.19 C696.871,415.397 684.546,418 670.608,418 C660.542,418 650.153,416.215 639.442,412.645 C628.73,409.075 618.987,402.752 610.212,393.678 C601.436,384.603 594.273,372.405 588.724,357.083 C583.174,341.761 580.4,322.348 580.4,298.843 C580.4,275.339 583.175,255.926 588.724,240.604 C594.274,225.282 601.436,213.158 610.211,204.232 C618.987,195.307 628.731,189.059 639.442,185.489 C650.153,181.919 660.542,180.133 670.608,180.133 L670.608,180.133 Z M138.6,72 L80.4,72 L80.4,444 L138.6,444 L138.6,516 L0,516 L0,0 L138.6,0 L138.6,72 Z M757,72 L815.2,72 L815.2,444 L757,444 L757,516 L895.6,516 L895.6,0 L757,0 L757,72 Z"
+                          id="TypeStingArr-形状"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </span>
+                <span
+                  class="studio-field-title-title emotion-2"
+                >
+                  stringArray
+                </span>
+              </div>
+            </div>
           </div>
-          <span
-            aria-hidden="true"
-            class="studio-select-arrow"
-            style="user-select: none;"
-            unselectable="on"
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+      >
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
           >
-            <span
-              aria-label="down"
-              class="anticon anticon-down studio-select-suffix"
-              role="img"
+            <div
+              class="studio-field-title"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="down"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <div
+                class="studio-field-title-content emotion-0"
               >
-                <path
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                />
-              </svg>
-            </span>
-          </span>
+                <span
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
+                  style="color: rgb(216, 193, 82);"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 791 495"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      id="TypeBool-页面-1"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        fill="currentColor"
+                        fill-rule="nonzero"
+                        id="TypeBool-icon-bool1"
+                        transform="translate(0.535000, 0.000000)"
+                      >
+                        <path
+                          d="M5.68434189e-14,490.864 L5.68434189e-14,0 L70.32,0 L70.32,173.043 L71.7,173.043 C79.513,161.553 88.82,152.705 99.62,146.501 C110.421,140.296 122.716,137.194 136.504,137.194 C153.51,137.194 166.724,140.181 176.146,146.156 C185.568,152.131 193.266,159.714 199.241,168.906 C203.837,176.26 206.825,185.912 208.203,197.862 C209.583,209.812 210.272,228.426 210.272,253.705 L210.272,386.762 C210.272,406.066 209.352,421.462 207.514,432.952 C205.675,444.443 202.688,454.095 198.552,461.908 C186.602,483.97 166.149,495 137.194,495 C119.728,495 106.4,491.553 97.208,484.659 C88.015,477.765 79.053,469.262 70.32,459.15 L70.32,490.864 L5.68434189e-14,490.864 Z M139.951,248.879 C139.951,237.849 137.538,228.196 132.712,219.923 C127.886,211.65 118.809,207.513 105.481,207.513 C95.369,207.513 86.981,211.076 80.317,218.2 C73.652,225.324 70.32,234.401 70.32,245.432 L70.32,381.247 C70.32,394.116 73.538,404.572 79.972,412.615 C86.407,420.658 94.909,424.68 105.481,424.68 C117.431,424.68 126.163,420.313 131.678,411.58 C137.194,402.848 139.951,391.358 139.951,377.11 L139.951,248.879 Z M232.431,258.531 C232.431,244.283 233.351,231.184 235.189,219.234 C237.027,207.284 240.475,196.714 245.53,187.521 C253.803,172.354 265.638,160.174 281.035,150.981 C296.432,141.79 315.161,137.194 337.222,137.194 C359.284,137.194 378.012,141.79 393.41,150.982 C408.807,160.174 420.642,172.354 428.915,187.521 C433.97,196.713 437.417,207.284 439.255,219.234 C441.095,231.184 442.014,244.283 442.014,258.531 L442.014,373.663 C442.014,387.911 441.094,401.01 439.256,412.96 C437.417,424.91 433.97,435.48 428.915,444.673 C420.642,459.84 408.807,472.019 393.41,481.212 C378.013,490.404 359.284,495 337.222,495 C315.162,495 296.432,490.404 281.035,481.212 C265.638,472.019 253.803,459.84 245.53,444.672 C240.475,435.48 237.027,424.91 235.189,412.96 C233.351,401.01 232.431,387.91 232.431,373.663 L232.431,258.531 L232.431,258.531 Z M302.751,384.694 C302.751,398.022 305.854,408.019 312.059,414.684 C318.264,421.348 326.651,424.68 337.222,424.68 C347.794,424.68 356.182,421.348 362.386,414.683 C368.591,408.019 371.693,398.023 371.693,384.693 L371.693,247.5 C371.693,234.171 368.591,224.175 362.386,217.51 C356.181,210.846 347.794,207.514 337.222,207.514 C326.652,207.514 318.264,210.846 312.059,217.51 C305.854,224.175 302.752,234.171 302.752,247.5 L302.752,384.694 L302.751,384.694 Z M457.969,258.53 C457.969,244.282 458.889,231.183 460.727,219.233 C462.566,207.283 466.013,196.713 471.068,187.52 C479.341,172.353 491.176,160.173 506.573,150.98 C521.97,141.789 540.699,137.193 562.761,137.193 C584.822,137.193 603.551,141.789 618.948,150.981 C634.345,160.173 646.18,172.353 654.453,187.52 C659.509,196.712 662.956,207.283 664.794,219.233 C666.633,231.183 667.552,244.282 667.552,258.53 L667.552,373.662 C667.552,387.91 666.632,401.009 664.794,412.959 C662.956,424.909 659.509,435.479 654.453,444.672 C646.18,459.839 634.345,472.018 618.948,481.211 C603.55,490.404 584.821,495 562.76,495 C540.698,495 521.97,490.404 506.572,481.212 C491.175,472.019 479.34,459.84 471.067,444.672 C466.012,435.48 462.565,424.91 460.727,412.96 C458.887,401.01 457.969,387.91 457.969,373.663 L457.969,258.531 L457.969,258.53 Z M528.29,384.693 C528.29,398.021 531.392,408.018 537.597,414.683 C543.802,421.347 552.19,424.679 562.761,424.679 C573.331,424.679 581.72,421.347 587.924,414.682 C594.129,408.018 597.231,398.022 597.231,384.692 L597.231,247.5 C597.231,234.171 594.129,224.175 587.924,217.51 C581.72,210.846 573.332,207.514 562.761,207.514 C552.19,207.514 543.801,210.846 537.597,217.51 C531.392,224.175 528.29,234.171 528.29,247.5 L528.29,384.694 L528.29,384.693 Z M685.574,0 L755.894,0 L755.894,392.277 C755.894,405.606 758.307,414.683 763.134,419.509 C767.959,424.335 777.036,427.437 790.365,428.816 L790.365,495 C774.279,495 759.801,493.736 746.932,491.208 C734.062,488.68 723.032,483.74 713.84,476.386 C704.648,469.492 697.639,459.725 692.813,447.086 C687.987,434.446 685.574,417.786 685.574,397.103 L685.574,0 Z"
+                          id="TypeBool-形状"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </span>
+                <span
+                  class="studio-field-title-title emotion-2"
+                >
+                  boolean
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-pro-card-col studio-pro-card-col-4"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
+      >
+        <div
+          class="studio-pro-card studio-pro-card-border"
+        >
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
+          >
+            <div
+              class="studio-field-title"
+            >
+              <div
+                class="studio-field-title-content emotion-0"
+              >
+                <span
+                  class="studio-field-title-title emotion-2"
+                >
+                  empty
+                </span>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<FieldTitle /> > renders description.tsx correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 12px;
+}
+
+.emotion-1 {
+  font-size: 14px;
+}
+
+.emotion-2 {
+  margin-left: 4px;
+}
+
+.emotion-7 {
+  padding-left: 16px;
+}
+
+<div>
+  <div
+    class="studio-pro-card studio-pro-card-contain-card studio-pro-card-ghost"
+  >
+    <div
+      class="studio-pro-card-body studio-pro-card-body-wrap"
+    >
       <div
-        class="studio-space-item"
-        style="margin-right: 8px;"
-      >
-        主题选择:
-      </div>
-      <div
-        class="studio-space-item"
-        style="margin-right: 8px;"
+        class="studio-pro-card-col studio-pro-card-col-24"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
         <div
-          class="studio-select studio-select-single studio-select-show-arrow"
-          style="width: 120px;"
+          class="studio-pro-card studio-pro-card-border"
         >
           <div
-            class="studio-select-selector"
+            class="studio-pro-card-header"
           >
-            <span
-              class="studio-select-selection-search"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="rc_select_TEST_OR_SSR_list"
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-label="Search"
-                aria-owns="rc_select_TEST_OR_SSR_list"
-                autocomplete="off"
-                class="studio-select-selection-search-input"
-                id="rc_select_TEST_OR_SSR"
-                readonly=""
-                role="combobox"
-                style="opacity: 0;"
-                type="search"
-                unselectable="on"
-                value=""
-              />
-            </span>
-            <span
-              class="studio-select-selection-item"
-              title="白色主题"
+            <div
+              class="studio-pro-card-title"
             >
-              白色主题
-            </span>
+              <div
+                class="studio-pro-core-label-tip"
+              >
+                <div
+                  class="studio-pro-core-label-tip-title"
+                >
+                  描述
+                </div>
+                <div
+                  class="studio-pro-core-label-tip-subtitle"
+                >
+                  描述在标题右边
+                </div>
+              </div>
+            </div>
           </div>
-          <span
-            aria-hidden="true"
-            class="studio-select-arrow"
-            style="user-select: none;"
-            unselectable="on"
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
           >
-            <span
-              aria-label="down"
-              class="anticon anticon-down studio-select-suffix"
-              role="img"
+            <div
+              class="studio-field-title"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="down"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <div
+                class="studio-field-title-content emotion-0"
               >
-                <path
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                />
-              </svg>
-            </span>
-          </span>
+                <span
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
+                  style="color: rgb(216, 193, 82);"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 791 495"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      id="TypeBool-页面-1"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        fill="currentColor"
+                        fill-rule="nonzero"
+                        id="TypeBool-icon-bool1"
+                        transform="translate(0.535000, 0.000000)"
+                      >
+                        <path
+                          d="M5.68434189e-14,490.864 L5.68434189e-14,0 L70.32,0 L70.32,173.043 L71.7,173.043 C79.513,161.553 88.82,152.705 99.62,146.501 C110.421,140.296 122.716,137.194 136.504,137.194 C153.51,137.194 166.724,140.181 176.146,146.156 C185.568,152.131 193.266,159.714 199.241,168.906 C203.837,176.26 206.825,185.912 208.203,197.862 C209.583,209.812 210.272,228.426 210.272,253.705 L210.272,386.762 C210.272,406.066 209.352,421.462 207.514,432.952 C205.675,444.443 202.688,454.095 198.552,461.908 C186.602,483.97 166.149,495 137.194,495 C119.728,495 106.4,491.553 97.208,484.659 C88.015,477.765 79.053,469.262 70.32,459.15 L70.32,490.864 L5.68434189e-14,490.864 Z M139.951,248.879 C139.951,237.849 137.538,228.196 132.712,219.923 C127.886,211.65 118.809,207.513 105.481,207.513 C95.369,207.513 86.981,211.076 80.317,218.2 C73.652,225.324 70.32,234.401 70.32,245.432 L70.32,381.247 C70.32,394.116 73.538,404.572 79.972,412.615 C86.407,420.658 94.909,424.68 105.481,424.68 C117.431,424.68 126.163,420.313 131.678,411.58 C137.194,402.848 139.951,391.358 139.951,377.11 L139.951,248.879 Z M232.431,258.531 C232.431,244.283 233.351,231.184 235.189,219.234 C237.027,207.284 240.475,196.714 245.53,187.521 C253.803,172.354 265.638,160.174 281.035,150.981 C296.432,141.79 315.161,137.194 337.222,137.194 C359.284,137.194 378.012,141.79 393.41,150.982 C408.807,160.174 420.642,172.354 428.915,187.521 C433.97,196.713 437.417,207.284 439.255,219.234 C441.095,231.184 442.014,244.283 442.014,258.531 L442.014,373.663 C442.014,387.911 441.094,401.01 439.256,412.96 C437.417,424.91 433.97,435.48 428.915,444.673 C420.642,459.84 408.807,472.019 393.41,481.212 C378.013,490.404 359.284,495 337.222,495 C315.162,495 296.432,490.404 281.035,481.212 C265.638,472.019 253.803,459.84 245.53,444.672 C240.475,435.48 237.027,424.91 235.189,412.96 C233.351,401.01 232.431,387.91 232.431,373.663 L232.431,258.531 L232.431,258.531 Z M302.751,384.694 C302.751,398.022 305.854,408.019 312.059,414.684 C318.264,421.348 326.651,424.68 337.222,424.68 C347.794,424.68 356.182,421.348 362.386,414.683 C368.591,408.019 371.693,398.023 371.693,384.693 L371.693,247.5 C371.693,234.171 368.591,224.175 362.386,217.51 C356.181,210.846 347.794,207.514 337.222,207.514 C326.652,207.514 318.264,210.846 312.059,217.51 C305.854,224.175 302.752,234.171 302.752,247.5 L302.752,384.694 L302.751,384.694 Z M457.969,258.53 C457.969,244.282 458.889,231.183 460.727,219.233 C462.566,207.283 466.013,196.713 471.068,187.52 C479.341,172.353 491.176,160.173 506.573,150.98 C521.97,141.789 540.699,137.193 562.761,137.193 C584.822,137.193 603.551,141.789 618.948,150.981 C634.345,160.173 646.18,172.353 654.453,187.52 C659.509,196.712 662.956,207.283 664.794,219.233 C666.633,231.183 667.552,244.282 667.552,258.53 L667.552,373.662 C667.552,387.91 666.632,401.009 664.794,412.959 C662.956,424.909 659.509,435.479 654.453,444.672 C646.18,459.839 634.345,472.018 618.948,481.211 C603.55,490.404 584.821,495 562.76,495 C540.698,495 521.97,490.404 506.572,481.212 C491.175,472.019 479.34,459.84 471.067,444.672 C466.012,435.48 462.565,424.91 460.727,412.96 C458.887,401.01 457.969,387.91 457.969,373.663 L457.969,258.531 L457.969,258.53 Z M528.29,384.693 C528.29,398.021 531.392,408.018 537.597,414.683 C543.802,421.347 552.19,424.679 562.761,424.679 C573.331,424.679 581.72,421.347 587.924,414.682 C594.129,408.018 597.231,398.022 597.231,384.692 L597.231,247.5 C597.231,234.171 594.129,224.175 587.924,217.51 C581.72,210.846 573.332,207.514 562.761,207.514 C552.19,207.514 543.801,210.846 537.597,217.51 C531.392,224.175 528.29,234.171 528.29,247.5 L528.29,384.694 L528.29,384.693 Z M685.574,0 L755.894,0 L755.894,392.277 C755.894,405.606 758.307,414.683 763.134,419.509 C767.959,424.335 777.036,427.437 790.365,428.816 L790.365,495 C774.279,495 759.801,493.736 746.932,491.208 C734.062,488.68 723.032,483.74 713.84,476.386 C704.648,469.492 697.639,459.725 692.813,447.086 C687.987,434.446 685.574,417.786 685.574,397.103 L685.574,0 Z"
+                          id="TypeBool-形状"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </span>
+                <span
+                  class="studio-field-title-title emotion-2"
+                >
+                  success
+                </span>
+                <span
+                  class="studio-field-title-description emotion-2"
+                >
+                  成功标识
+                </span>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        class="studio-space-item"
-        style="margin-right: 8px;"
-      >
-        展示行号:
-      </div>
-      <div
-        class="studio-space-item"
-        style="margin-right: 8px;"
+        class="studio-pro-card-col studio-pro-card-col-24"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
         <div
-          class="studio-select studio-select-single studio-select-show-arrow"
-          style="width: 120px;"
+          class="studio-pro-card studio-pro-card-border"
         >
           <div
-            class="studio-select-selector"
+            class="studio-pro-card-header"
           >
-            <span
-              class="studio-select-selection-search"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="rc_select_TEST_OR_SSR_list"
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-label="Search"
-                aria-owns="rc_select_TEST_OR_SSR_list"
-                autocomplete="off"
-                class="studio-select-selection-search-input"
-                id="rc_select_TEST_OR_SSR"
-                readonly=""
-                role="combobox"
-                style="opacity: 0;"
-                type="search"
-                unselectable="on"
-                value=""
-              />
-            </span>
-            <span
-              class="studio-select-selection-item"
-              title="不展示"
+            <div
+              class="studio-pro-card-title"
             >
-              不展示
-            </span>
+              <div
+                class="studio-pro-core-label-tip"
+              >
+                <div
+                  class="studio-pro-core-label-tip-title"
+                >
+                  额外
+                </div>
+                <div
+                  class="studio-pro-core-label-tip-subtitle"
+                >
+                  额外内容在字段下面
+                </div>
+              </div>
+            </div>
           </div>
-          <span
-            aria-hidden="true"
-            class="studio-select-arrow"
-            style="user-select: none;"
-            unselectable="on"
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
           >
-            <span
-              aria-label="down"
-              class="anticon anticon-down studio-select-suffix"
-              role="img"
+            <div
+              class="studio-field-title"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="down"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <div
+                class="studio-field-title-content emotion-0"
               >
-                <path
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                />
-              </svg>
-            </span>
-          </span>
+                <span
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
+                  style="color: rgb(216, 193, 82);"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 791 495"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      id="TypeBool-页面-1"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        fill="currentColor"
+                        fill-rule="nonzero"
+                        id="TypeBool-icon-bool1"
+                        transform="translate(0.535000, 0.000000)"
+                      >
+                        <path
+                          d="M5.68434189e-14,490.864 L5.68434189e-14,0 L70.32,0 L70.32,173.043 L71.7,173.043 C79.513,161.553 88.82,152.705 99.62,146.501 C110.421,140.296 122.716,137.194 136.504,137.194 C153.51,137.194 166.724,140.181 176.146,146.156 C185.568,152.131 193.266,159.714 199.241,168.906 C203.837,176.26 206.825,185.912 208.203,197.862 C209.583,209.812 210.272,228.426 210.272,253.705 L210.272,386.762 C210.272,406.066 209.352,421.462 207.514,432.952 C205.675,444.443 202.688,454.095 198.552,461.908 C186.602,483.97 166.149,495 137.194,495 C119.728,495 106.4,491.553 97.208,484.659 C88.015,477.765 79.053,469.262 70.32,459.15 L70.32,490.864 L5.68434189e-14,490.864 Z M139.951,248.879 C139.951,237.849 137.538,228.196 132.712,219.923 C127.886,211.65 118.809,207.513 105.481,207.513 C95.369,207.513 86.981,211.076 80.317,218.2 C73.652,225.324 70.32,234.401 70.32,245.432 L70.32,381.247 C70.32,394.116 73.538,404.572 79.972,412.615 C86.407,420.658 94.909,424.68 105.481,424.68 C117.431,424.68 126.163,420.313 131.678,411.58 C137.194,402.848 139.951,391.358 139.951,377.11 L139.951,248.879 Z M232.431,258.531 C232.431,244.283 233.351,231.184 235.189,219.234 C237.027,207.284 240.475,196.714 245.53,187.521 C253.803,172.354 265.638,160.174 281.035,150.981 C296.432,141.79 315.161,137.194 337.222,137.194 C359.284,137.194 378.012,141.79 393.41,150.982 C408.807,160.174 420.642,172.354 428.915,187.521 C433.97,196.713 437.417,207.284 439.255,219.234 C441.095,231.184 442.014,244.283 442.014,258.531 L442.014,373.663 C442.014,387.911 441.094,401.01 439.256,412.96 C437.417,424.91 433.97,435.48 428.915,444.673 C420.642,459.84 408.807,472.019 393.41,481.212 C378.013,490.404 359.284,495 337.222,495 C315.162,495 296.432,490.404 281.035,481.212 C265.638,472.019 253.803,459.84 245.53,444.672 C240.475,435.48 237.027,424.91 235.189,412.96 C233.351,401.01 232.431,387.91 232.431,373.663 L232.431,258.531 L232.431,258.531 Z M302.751,384.694 C302.751,398.022 305.854,408.019 312.059,414.684 C318.264,421.348 326.651,424.68 337.222,424.68 C347.794,424.68 356.182,421.348 362.386,414.683 C368.591,408.019 371.693,398.023 371.693,384.693 L371.693,247.5 C371.693,234.171 368.591,224.175 362.386,217.51 C356.181,210.846 347.794,207.514 337.222,207.514 C326.652,207.514 318.264,210.846 312.059,217.51 C305.854,224.175 302.752,234.171 302.752,247.5 L302.752,384.694 L302.751,384.694 Z M457.969,258.53 C457.969,244.282 458.889,231.183 460.727,219.233 C462.566,207.283 466.013,196.713 471.068,187.52 C479.341,172.353 491.176,160.173 506.573,150.98 C521.97,141.789 540.699,137.193 562.761,137.193 C584.822,137.193 603.551,141.789 618.948,150.981 C634.345,160.173 646.18,172.353 654.453,187.52 C659.509,196.712 662.956,207.283 664.794,219.233 C666.633,231.183 667.552,244.282 667.552,258.53 L667.552,373.662 C667.552,387.91 666.632,401.009 664.794,412.959 C662.956,424.909 659.509,435.479 654.453,444.672 C646.18,459.839 634.345,472.018 618.948,481.211 C603.55,490.404 584.821,495 562.76,495 C540.698,495 521.97,490.404 506.572,481.212 C491.175,472.019 479.34,459.84 471.067,444.672 C466.012,435.48 462.565,424.91 460.727,412.96 C458.887,401.01 457.969,387.91 457.969,373.663 L457.969,258.531 L457.969,258.53 Z M528.29,384.693 C528.29,398.021 531.392,408.018 537.597,414.683 C543.802,421.347 552.19,424.679 562.761,424.679 C573.331,424.679 581.72,421.347 587.924,414.682 C594.129,408.018 597.231,398.022 597.231,384.692 L597.231,247.5 C597.231,234.171 594.129,224.175 587.924,217.51 C581.72,210.846 573.332,207.514 562.761,207.514 C552.19,207.514 543.801,210.846 537.597,217.51 C531.392,224.175 528.29,234.171 528.29,247.5 L528.29,384.694 L528.29,384.693 Z M685.574,0 L755.894,0 L755.894,392.277 C755.894,405.606 758.307,414.683 763.134,419.509 C767.959,424.335 777.036,427.437 790.365,428.816 L790.365,495 C774.279,495 759.801,493.736 746.932,491.208 C734.062,488.68 723.032,483.74 713.84,476.386 C704.648,469.492 697.639,459.725 692.813,447.086 C687.987,434.446 685.574,417.786 685.574,397.103 L685.574,0 Z"
+                          id="TypeBool-形状"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </span>
+                <span
+                  class="studio-field-title-title emotion-2"
+                >
+                  success
+                </span>
+              </div>
+              <div
+                class="studio-field-title-extra emotion-7"
+              >
+                额外内容
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        class="studio-space-item"
-        style="margin-right: 8px;"
-      >
-        展示类型:
-      </div>
-      <div
-        class="studio-space-item"
+        class="studio-pro-card-col studio-pro-card-col-24"
+        style="padding-inline-end: 4px; padding-inline-start: 4px; padding-block-start: 4px; padding-block-end: 4px;"
       >
         <div
-          class="studio-select studio-select-single studio-select-show-arrow"
-          style="width: 120px;"
+          class="studio-pro-card studio-pro-card-border"
         >
           <div
-            class="studio-select-selector"
+            class="studio-pro-card-header"
           >
-            <span
-              class="studio-select-selection-search"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="rc_select_TEST_OR_SSR_list"
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-label="Search"
-                aria-owns="rc_select_TEST_OR_SSR_list"
-                autocomplete="off"
-                class="studio-select-selection-search-input"
-                id="rc_select_TEST_OR_SSR"
-                readonly=""
-                role="combobox"
-                style="opacity: 0;"
-                type="search"
-                unselectable="on"
-                value=""
-              />
-            </span>
-            <span
-              class="studio-select-selection-item"
-              title="block"
+            <div
+              class="studio-pro-card-title"
             >
-              block
-            </span>
+              <div
+                class="studio-pro-core-label-tip"
+              >
+                <div
+                  class="studio-pro-core-label-tip-title"
+                >
+                  可选
+                </div>
+                <div
+                  class="studio-pro-core-label-tip-subtitle"
+                >
+                  可选为false 则额外内容左侧有 padding
+                </div>
+              </div>
+            </div>
           </div>
-          <span
-            aria-hidden="true"
-            class="studio-select-arrow"
-            style="user-select: none;"
-            unselectable="on"
+          <div
+            class="studio-pro-card-body studio-pro-card-body-center"
           >
-            <span
-              aria-label="down"
-              class="anticon anticon-down studio-select-suffix"
-              role="img"
+            <div
+              class="studio-field-title"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="down"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <div
+                class="studio-field-title-content emotion-0"
               >
-                <path
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                />
-              </svg>
-            </span>
-          </span>
+                <span
+                  class="anticon studio-field-icon emotion-1"
+                  role="img"
+                  style="color: rgb(216, 193, 82);"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pro-editor-icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 791 495"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  >
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      id="TypeBool-页面-1"
+                      stroke="none"
+                      stroke-width="1"
+                    >
+                      <g
+                        fill="currentColor"
+                        fill-rule="nonzero"
+                        id="TypeBool-icon-bool1"
+                        transform="translate(0.535000, 0.000000)"
+                      >
+                        <path
+                          d="M5.68434189e-14,490.864 L5.68434189e-14,0 L70.32,0 L70.32,173.043 L71.7,173.043 C79.513,161.553 88.82,152.705 99.62,146.501 C110.421,140.296 122.716,137.194 136.504,137.194 C153.51,137.194 166.724,140.181 176.146,146.156 C185.568,152.131 193.266,159.714 199.241,168.906 C203.837,176.26 206.825,185.912 208.203,197.862 C209.583,209.812 210.272,228.426 210.272,253.705 L210.272,386.762 C210.272,406.066 209.352,421.462 207.514,432.952 C205.675,444.443 202.688,454.095 198.552,461.908 C186.602,483.97 166.149,495 137.194,495 C119.728,495 106.4,491.553 97.208,484.659 C88.015,477.765 79.053,469.262 70.32,459.15 L70.32,490.864 L5.68434189e-14,490.864 Z M139.951,248.879 C139.951,237.849 137.538,228.196 132.712,219.923 C127.886,211.65 118.809,207.513 105.481,207.513 C95.369,207.513 86.981,211.076 80.317,218.2 C73.652,225.324 70.32,234.401 70.32,245.432 L70.32,381.247 C70.32,394.116 73.538,404.572 79.972,412.615 C86.407,420.658 94.909,424.68 105.481,424.68 C117.431,424.68 126.163,420.313 131.678,411.58 C137.194,402.848 139.951,391.358 139.951,377.11 L139.951,248.879 Z M232.431,258.531 C232.431,244.283 233.351,231.184 235.189,219.234 C237.027,207.284 240.475,196.714 245.53,187.521 C253.803,172.354 265.638,160.174 281.035,150.981 C296.432,141.79 315.161,137.194 337.222,137.194 C359.284,137.194 378.012,141.79 393.41,150.982 C408.807,160.174 420.642,172.354 428.915,187.521 C433.97,196.713 437.417,207.284 439.255,219.234 C441.095,231.184 442.014,244.283 442.014,258.531 L442.014,373.663 C442.014,387.911 441.094,401.01 439.256,412.96 C437.417,424.91 433.97,435.48 428.915,444.673 C420.642,459.84 408.807,472.019 393.41,481.212 C378.013,490.404 359.284,495 337.222,495 C315.162,495 296.432,490.404 281.035,481.212 C265.638,472.019 253.803,459.84 245.53,444.672 C240.475,435.48 237.027,424.91 235.189,412.96 C233.351,401.01 232.431,387.91 232.431,373.663 L232.431,258.531 L232.431,258.531 Z M302.751,384.694 C302.751,398.022 305.854,408.019 312.059,414.684 C318.264,421.348 326.651,424.68 337.222,424.68 C347.794,424.68 356.182,421.348 362.386,414.683 C368.591,408.019 371.693,398.023 371.693,384.693 L371.693,247.5 C371.693,234.171 368.591,224.175 362.386,217.51 C356.181,210.846 347.794,207.514 337.222,207.514 C326.652,207.514 318.264,210.846 312.059,217.51 C305.854,224.175 302.752,234.171 302.752,247.5 L302.752,384.694 L302.751,384.694 Z M457.969,258.53 C457.969,244.282 458.889,231.183 460.727,219.233 C462.566,207.283 466.013,196.713 471.068,187.52 C479.341,172.353 491.176,160.173 506.573,150.98 C521.97,141.789 540.699,137.193 562.761,137.193 C584.822,137.193 603.551,141.789 618.948,150.981 C634.345,160.173 646.18,172.353 654.453,187.52 C659.509,196.712 662.956,207.283 664.794,219.233 C666.633,231.183 667.552,244.282 667.552,258.53 L667.552,373.662 C667.552,387.91 666.632,401.009 664.794,412.959 C662.956,424.909 659.509,435.479 654.453,444.672 C646.18,459.839 634.345,472.018 618.948,481.211 C603.55,490.404 584.821,495 562.76,495 C540.698,495 521.97,490.404 506.572,481.212 C491.175,472.019 479.34,459.84 471.067,444.672 C466.012,435.48 462.565,424.91 460.727,412.96 C458.887,401.01 457.969,387.91 457.969,373.663 L457.969,258.531 L457.969,258.53 Z M528.29,384.693 C528.29,398.021 531.392,408.018 537.597,414.683 C543.802,421.347 552.19,424.679 562.761,424.679 C573.331,424.679 581.72,421.347 587.924,414.682 C594.129,408.018 597.231,398.022 597.231,384.692 L597.231,247.5 C597.231,234.171 594.129,224.175 587.924,217.51 C581.72,210.846 573.332,207.514 562.761,207.514 C552.19,207.514 543.801,210.846 537.597,217.51 C531.392,224.175 528.29,234.171 528.29,247.5 L528.29,384.694 L528.29,384.693 Z M685.574,0 L755.894,0 L755.894,392.277 C755.894,405.606 758.307,414.683 763.134,419.509 C767.959,424.335 777.036,427.437 790.365,428.816 L790.365,495 C774.279,495 759.801,493.736 746.932,491.208 C734.062,488.68 723.032,483.74 713.84,476.386 C704.648,469.492 697.639,459.725 692.813,447.086 C687.987,434.446 685.574,417.786 685.574,397.103 L685.574,0 Z"
+                          id="TypeBool-形状"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </span>
+                <span
+                  class="studio-field-title-title emotion-2"
+                >
+                  success
+                </span>
+              </div>
+              <div
+                class="studio-field-title-extra emotion-11"
+              >
+                额外内容
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
+  </div>
+</div>
+`;
+
+exports[`<FreeCanvas /> > renders basic.tsx correctly 1`] = `
+.emotion-0 .react-flow__attribution {
+  display: none;
+}
+
+.emotion-0 .react-flow__pane,
+.emotion-0 .react-flow__node {
+  cursor: auto;
+}
+
+.emotion-1 {
+  height: 100%;
+}
+
+.emotion-2 {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  z-index: 100;
+}
+
+.emotion-3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 8px;
+}
+
+<div>
+  <div
+    style="height: 100vh;"
+  >
     <div
-      style="height: 400px; width: 100%; overflow-y: scroll; margin-block-start: 16px;"
+      class="react-flow emotion-0"
+      data-testid="rf__wrapper"
+      style="width: 100%; height: 100%; overflow: hidden; position: relative; z-index: 0;"
     >
       <div
-        class="studio-highlight-container emotion-0"
-        tabindex="-1"
+        class="react-flow__renderer"
+        style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;"
       >
-        <button
-          class="studio-highlight-copy emotion-1"
-          type="button"
+        <div
+          class="react-flow__pane"
+          style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;"
         >
-          <span
-            aria-label="copy"
-            class="anticon anticon-copy studio-highlight-copy-icon emotion-2"
-            role="img"
+          <div
+            class="react-flow__viewport react-flow__container"
+            style="transform: translate(0px,0px) scale(1);"
           >
             <svg
-              aria-hidden="true"
-              data-icon="copy"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              class="react-flow__edges react-flow__container"
+              height="500"
+              style="z-index: 0;"
+              width="500"
             >
-              <path
-                d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
-              />
+              <defs />
+              <g />
             </svg>
-          </span>
-          <span
-            aria-label="check"
-            class="anticon anticon-check studio-highlight-copy-icon emotion-2"
-            role="img"
-            style="color: rgb(63, 177, 99);"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="check"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <div
+              class="react-flow__edgelabel-renderer"
+            />
+            <div
+              class="react-flow__nodes"
+              style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;"
             >
-              <path
-                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-              />
-            </svg>
-          </span>
-        </button>
-        <pre
-          class="emotion-4"
-        >
-          <table
-            border="0"
-            cellpadding="0"
-            cellspacing="0"
-          >
-            <tbody>
-              <tr>
-                <td
-                  class="undefined-content emotion-5"
+              <div
+                aria-describedby="react-flow__node-desc-1"
+                class="react-flow__node react-flow__node-artboard selectable"
+                data-id="artboard"
+                data-testid="rf__node-artboard"
+                role="button"
+                style="z-index: 0; transform: translate(0px,0px); pointer-events: all; visibility: hidden;"
+                tabindex="0"
+              >
+                <div
+                  class="emotion-1"
                 >
-                  <span
-                    class="hljs-class"
+                  <button
+                    class="studio-btn studio-btn-default"
+                    type="button"
                   >
-                    <span
-                      class="hljs-keyword"
-                    >
-                      class
-                    </span>
-                     
-                    <span
-                      class="hljs-title"
-                    >
-                      MyClass
+                    <span>
+                      按 钮
                     </span>
-                     
-                  </span>
-                  {
-                </td>
-              </tr>
-              <tr>
-                <td
-                  class="undefined-content emotion-5"
-                >
-                    
-                  <span
-                    class="hljs-keyword"
-                  >
-                    public
-                  </span>
-                   
-                  <span
-                    class="hljs-keyword"
-                  >
-                    static
-                  </span>
-                   myValue: 
-                  <span
-                    class="hljs-built_in"
-                  >
-                    string
-                  </span>
-                  ;
-                </td>
-              </tr>
-              <tr>
-                <td
-                  class="undefined-content emotion-5"
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="emotion-2"
+      >
+        <div
+          class="layoutkit-center emotion-3"
+        >
+          <div
+            class="studio-space studio-space-horizontal studio-space-align-center"
+          >
+            <div
+              class="studio-space-item"
+              style="margin-right: 8px;"
+            >
+              <button
+                class="studio-btn studio-btn-default studio-btn-icon-only"
+                type="button"
+              >
+                <span
+                  class="studio-btn-icon"
                 >
-                    
                   <span
-                    class="hljs-function"
+                    aria-label="minus"
+                    class="anticon anticon-minus"
+                    role="img"
                   >
-                    <span
-                      class="hljs-title"
-                    >
-                      constructor
-                    </span>
-                    (
-                    <span
-                      class="hljs-params"
+                    <svg
+                      aria-hidden="true"
+                      data-icon="minus"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
-                      init: 
-                      <span
-                        class="hljs-built_in"
-                      >
-                        string
-                      </span>
-                    </span>
-                    )
-                  </span>
-                   {
-                </td>
-              </tr>
-              <tr>
-                <td
-                  class="undefined-content emotion-5"
-                >
-                      
-                  <span
-                    class="hljs-built_in"
-                  >
-                    this
-                  </span>
-                  .myValue = init;
-                </td>
-              </tr>
-              <tr>
-                <td
-                  class="undefined-content emotion-5"
-                >
-                    }
-                </td>
-              </tr>
-              <tr>
-                <td
-                  class="undefined-content emotion-5"
-                >
-                  }
-                </td>
-              </tr>
-              <tr>
-                <td
-                  class="undefined-content emotion-5"
-                >
-                  <span
-                    class="hljs-keyword"
-                  >
-                    import
-                  </span>
-                   fs = 
-                  <span
-                    class="hljs-built_in"
-                  >
-                    require
-                  </span>
-                  (
-                  <span
-                    class="hljs-string"
-                  >
-                    "fs"
-                  </span>
-                  );
-                </td>
-              </tr>
-              <tr>
-                <td
-                  class="undefined-content emotion-5"
-                >
-                  <span
-                    class="hljs-built_in"
-                  >
-                    module
+                      <path
+                        d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
+                      />
+                    </svg>
                   </span>
-                   MyModule {
-                </td>
-              </tr>
-              <tr>
-                <td
-                  class="undefined-content emotion-5"
+                </span>
+              </button>
+            </div>
+            <div
+              class="studio-space-item"
+              style="margin-right: 8px;"
+            >
+              <button
+                class="studio-btn studio-btn-default"
+                style="width: 64px;"
+                type="button"
+              >
+                <span>
+                  100%
+                </span>
+              </button>
+            </div>
+            <div
+              class="studio-space-item"
+              style="margin-right: 8px;"
+            >
+              <button
+                class="studio-btn studio-btn-default studio-btn-icon-only"
+                type="button"
+              >
+                <span
+                  class="studio-btn-icon"
                 >
-                    
-                  <span
-                    class="hljs-keyword"
-                  >
-                    export
-                  </span>
-                   
                   <span
-                    class="hljs-keyword"
+                    aria-label="plus"
+                    class="anticon anticon-plus"
+                    role="img"
                   >
-                    interface
+                    <svg
+                      aria-hidden="true"
+                      data-icon="plus"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                      />
+                      <path
+                        d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
+                      />
+                    </svg>
                   </span>
-                   MyInterface 
+                </span>
+              </button>
+            </div>
+            <div
+              class="studio-space-item"
+              style="margin-right: 8px;"
+            >
+              <button
+                class="studio-btn studio-btn-default studio-btn-icon-only"
+                type="button"
+              >
+                <span
+                  class="studio-btn-icon"
+                >
                   <span
-                    class="hljs-keyword"
+                    aria-label="expand"
+                    class="anticon anticon-expand"
+                    role="img"
                   >
-                    extends
+                    <svg
+                      aria-hidden="true"
+                      data-icon="expand"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <defs>
+                        <style />
+                      </defs>
+                      <path
+                        d="M342 88H120c-17.7 0-32 14.3-32 32v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V168h174c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zm578 576h-48c-8.8 0-16 7.2-16 16v176H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h222c17.7 0 32-14.3 32-32V680c0-8.8-7.2-16-16-16zM342 856H168V680c0-8.8-7.2-16-16-16h-48c-8.8 0-16 7.2-16 16v224c0 17.7 14.3 32 32 32h222c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zM904 88H682c-8.8 0-16 7.2-16 16v48c0 8.8 7.2 16 16 16h174v176c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V120c0-17.7-14.3-32-32-32z"
+                      />
+                    </svg>
                   </span>
-                   Other {
-                </td>
-              </tr>
-              <tr>
-                <td
-                  class="undefined-content emotion-5"
+                </span>
+              </button>
+            </div>
+            <div
+              class="studio-space-item"
+            >
+              <button
+                class="studio-btn studio-btn-default"
+                type="button"
+              >
+                <span>
+                  自定义
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <svg
+        class="react-flow__background"
+        data-testid="rf__background"
+        style="z-index: -1; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;"
+      >
+        <pattern
+          height="16"
+          id="pattern-1undefined"
+          patternTransform="translate(-0.5,-0.5)"
+          patternUnits="userSpaceOnUse"
+          width="16"
+          x="0"
+          y="0"
+        >
+          <circle
+            cx="0.5"
+            cy="0.5"
+            fill="#aaa"
+            r="0.5"
+          />
+        </pattern>
+        <rect
+          fill="url(#pattern-1undefined)"
+          height="100%"
+          width="100%"
+          x="0"
+          y="0"
+        />
+      </svg>
+      <div
+        class="react-flow__panel react-flow__attribution bottom right"
+        data-message="Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev"
+        style="pointer-events: all;"
+      >
+        <a
+          aria-label="React Flow attribution"
+          href="https://reactflow.dev"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          React Flow
+        </a>
+      </div>
+      <div
+        id="react-flow__node-desc-1"
+        style="display: none;"
+      >
+        Press enter or space to select a node.
+        You can then use the arrow keys to move the node around.
+         Press delete to remove it and escape to cancel.
+         
+      </div>
+      <div
+        id="react-flow__edge-desc-1"
+        style="display: none;"
+      >
+        Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
+      </div>
+      <div
+        aria-atomic="true"
+        aria-live="assertive"
+        id="react-flow__aria-live-1"
+        style="position: absolute; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%);"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Highlight /> > renders basic.tsx correctly 1`] = `
+.emotion-0 {
+  background-color: #2b303b;
+  border: 1px solid #2b303b;
+  position: relative;
+  overflow: auto;
+  margin: 0;
+  border-radius: 6px;
+  -webkit-transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-0 pre {
+  margin: 0!important;
+  padding: 16px 24px!important;
+  background: none!important;
+}
+
+.emotion-0 code {
+  background: transparent!important;
+}
+
+.emotion-1 {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  outline: none;
+  cursor: pointer;
+  opacity: 0.6;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+  background-color: #2b303b;
+}
+
+.emotion-1:hover {
+  opacity: 0.8;
+}
+
+.emotion-2 {
+  width: 16px;
+  color: #dddddd;
+  height: 16px;
+  font-size: 16px;
+}
+
+.emotion-2.scoll {
+  -webkit-animation: copy-button-trans 2s;
+  animation: copy-button-trans 2s;
+  -webkit-animation-play-state: running;
+  animation-play-state: running;
+}
+
+.emotion-4 {
+  display: block;
+  overflow-x: auto;
+  color: #dddddd;
+  background-color: #777777;
+}
+
+.emotion-4 .hljs-comment,
+.emotion-4 .hljs-quote {
+  color: #555555;
+}
+
+.emotion-4 .hljs-variable,
+.emotion-4 .hljs-attribute,
+.emotion-4 .hljs-template-variable,
+.emotion-4 .hljs-tag,
+.emotion-4 .hljs-name,
+.emotion-4 .hljs-selector-id,
+.emotion-4 .hljs-selector-class,
+.emotion-4 .hljs-regexp,
+.emotion-4 .hljs-title,
+.emotion-4 .hljs-deletion {
+  color: #f04f88;
+}
+
+.emotion-4 .hljs-builtin-name,
+.emotion-4 .hljs-literal,
+.emotion-4 .hljs-type,
+.emotion-4 .hljs-params,
+.emotion-4 .hljs-meta,
+.emotion-4 .hljs-link {
+  color: #ffcb47;
+}
+
+.emotion-4 .hljs-string,
+.emotion-4 .hljs-number,
+.emotion-4 .hljs-symbol,
+.emotion-4 .hljs-bullet,
+.emotion-4 .hljs-addition {
+  color: #c4f042;
+}
+
+.emotion-4 .hljs-keyword,
+.emotion-4 .hljs-doctag,
+.emotion-4 .hljs-built_in,
+.emotion-4 .hljs-selector-tag,
+.emotion-4 .hljs-section {
+  color: #8ae8ff;
+}
+
+.emotion-4 .hljs-emphasis {
+  font-style: italic;
+}
+
+.emotion-4 .hljs-strong {
+  font-weight: bold;
+}
+
+.emotion-5 {
+  width: 100%;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.emotion-11 {
+  -webkit-backdrop-filter: saturate(180%) blur(10px);
+  backdrop-filter: saturate(180%) blur(10px);
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  height: 36px;
+  padding: 0 8px;
+  font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
+  color: #555555;
+  border-radius: 6;
+}
+
+.emotion-12 {
+  color: #555555;
+}
+
+<div>
+  <div
+    class="studio-highlight-container emotion-0"
+    tabindex="-1"
+  >
+    <button
+      class="studio-highlight-copy emotion-1"
+      type="button"
+    >
+      <span
+        aria-label="copy"
+        class="anticon anticon-copy studio-highlight-copy-icon emotion-2"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="copy"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+          />
+        </svg>
+      </span>
+      <span
+        aria-label="check"
+        class="anticon anticon-check studio-highlight-copy-icon emotion-2"
+        role="img"
+        style="color: rgb(63, 177, 99);"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="check"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+          />
+        </svg>
+      </span>
+    </button>
+    <pre
+      class="emotion-4"
+    >
+      <table
+        border="0"
+        cellpadding="0"
+        cellspacing="0"
+      >
+        <tbody>
+          <tr>
+            <td
+              class="undefined-content emotion-5"
+            >
+              <span
+                class="hljs-keyword"
+              >
+                public
+              </span>
+               
+              <span
+                class="hljs-class"
+              >
+                <span
+                  class="hljs-keyword"
                 >
-                      
-                  <span
-                    class="hljs-attr"
-                  >
-                    myProperty
-                  </span>
-                  : 
-                  <span
-                    class="hljs-built_in"
-                  >
-                    any
-                  </span>
-                  ;
-                </td>
-              </tr>
-              <tr>
-                <td
-                  class="undefined-content emotion-5"
+                  class
+                </span>
+                 
+                <span
+                  class="hljs-title"
                 >
-                    }
-                </td>
-              </tr>
-              <tr>
-                <td
-                  class="undefined-content emotion-5"
+                  HelloWorld
+                </span>
+                 
+              </span>
+              {
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="undefined-content emotion-5"
+            >
+                  
+              <span
+                class="hljs-function"
+              >
+                <span
+                  class="hljs-keyword"
                 >
-                  }
-                </td>
-              </tr>
-              <tr>
-                <td
-                  class="undefined-content emotion-5"
+                  public
+                </span>
+                 
+                <span
+                  class="hljs-keyword"
                 >
-                  <span
-                    class="hljs-keyword"
-                  >
-                    declare
-                  </span>
-                   magicNumber 
-                  <span
-                    class="hljs-built_in"
-                  >
-                    number
-                  </span>
-                  ;
-                </td>
-              </tr>
-              <tr>
-                <td
-                  class="undefined-content emotion-5"
+                  static
+                </span>
+                 
+                <span
+                  class="hljs-keyword"
                 >
-                  myArray.forEach(
-                  <span
-                    class="hljs-function"
-                  >
-                    () =&gt;
-                  </span>
-                   { }); 
-                  <span
-                    class="hljs-comment"
-                  >
-                    // fat arrow syntax
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </pre>
-        <div
-          class="layoutkit-center emotion-19 emotion-20"
-        >
-          <span
-            aria-label="loading-3-quarters"
-            class="anticon anticon-loading-3-quarters anticon-spin emotion-21"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="loading-3-quarters"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="0 0 1024 1024"
-              width="1em"
+                  void
+                </span>
+                 
+                <span
+                  class="hljs-title"
+                >
+                  main
+                </span>
+                <span
+                  class="hljs-params"
+                >
+                  (String[] args)
+                </span>
+                 
+              </span>
+              {
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="undefined-content emotion-5"
             >
-              <path
-                d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
-              />
-            </svg>
-          </span>
-          Highlighting...
-        </div>
-      </div>
+                    System.out.println(
+              <span
+                class="hljs-string"
+              >
+                "Hello World!"
+              </span>
+              );
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="undefined-content emotion-5"
+            >
+                  }
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="undefined-content emotion-5"
+            >
+                }
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </pre>
+    <div
+      class="layoutkit-center emotion-10 emotion-11"
+    >
+      <span
+        aria-label="loading-3-quarters"
+        class="anticon anticon-loading-3-quarters anticon-spin emotion-12"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="loading-3-quarters"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="0 0 1024 1024"
+          width="1em"
+        >
+          <path
+            d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
+          />
+        </svg>
+      </span>
+      Highlighting...
     </div>
   </div>
 </div>
 `;
 
-exports[`<IconPicker /> > renders controlled.tsx correctly 1`] = `
+exports[`<Highlight /> > renders lineNumber.tsx correctly 1`] = `
 .emotion-0 {
+  background-color: #fafafa;
+  border: 1px solid #fafafa;
+  position: relative;
+  overflow: auto;
+  margin: 0;
+  border-radius: 6px;
+  -webkit-transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-0 pre {
+  margin: 0!important;
+  padding: 16px 24px!important;
+  background: none!important;
+}
+
+.emotion-0 code {
+  background: transparent!important;
+}
+
+.emotion-1 {
+  position: absolute;
+  top: 16px;
+  right: 16px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  outline: none;
+  cursor: pointer;
+  opacity: 0.6;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+  background-color: #fafafa;
 }
 
-.emotion-0:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
+.emotion-1:hover {
+  opacity: 0.8;
 }
 
-.emotion-0:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
+.emotion-2 {
+  width: 16px;
+  color: #333333;
+  height: 16px;
+  font-size: 16px;
 }
 
-.emotion-1 {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.06);
+.emotion-2.scoll {
+  -webkit-animation: copy-button-trans 2s;
+  animation: copy-button-trans 2s;
+  -webkit-animation-play-state: running;
+  animation-play-state: running;
+}
+
+.emotion-4 {
+  display: block;
+  overflow-x: auto;
+  color: #333333;
+  background-color: #666666;
+}
+
+.emotion-4 .hljs-comment,
+.emotion-4 .hljs-quote {
+  color: #aaaaaa;
+}
+
+.emotion-4 .hljs-variable,
+.emotion-4 .hljs-attribute,
+.emotion-4 .hljs-template-variable,
+.emotion-4 .hljs-tag,
+.emotion-4 .hljs-name,
+.emotion-4 .hljs-selector-id,
+.emotion-4 .hljs-selector-class,
+.emotion-4 .hljs-regexp,
+.emotion-4 .hljs-title,
+.emotion-4 .hljs-deletion {
+  color: #ec5e41;
+}
+
+.emotion-4 .hljs-builtin-name,
+.emotion-4 .hljs-literal,
+.emotion-4 .hljs-type,
+.emotion-4 .hljs-params,
+.emotion-4 .hljs-meta,
+.emotion-4 .hljs-link {
+  color: #ff802b;
+}
+
+.emotion-4 .hljs-string,
+.emotion-4 .hljs-number,
+.emotion-4 .hljs-symbol,
+.emotion-4 .hljs-bullet,
+.emotion-4 .hljs-addition {
+  color: #55b467;
+}
+
+.emotion-4 .hljs-keyword,
+.emotion-4 .hljs-doctag,
+.emotion-4 .hljs-built_in,
+.emotion-4 .hljs-selector-tag,
+.emotion-4 .hljs-section {
+  color: #369eff;
+}
+
+.emotion-4 .hljs-emphasis {
+  font-style: italic;
+}
+
+.emotion-4 .hljs-strong {
+  font-weight: bold;
+}
+
+.emotion-5 {
+  box-sizing: border-box;
+  width: 1rem;
+  margin-right: 1.5rem;
+  display: inline-block;
+  color: rgba(115, 138, 148, 0.4);
+  text-align: right;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-<div>
-  <button
-    class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-0"
-    type="button"
-  >
-    <span
-      class="studio-btn-icon"
-    >
-      <div
-        class="emotion-1"
-      />
-    </span>
-  </button>
-  <div
-    class="studio-divider studio-divider-horizontal"
-    role="separator"
-  />
-  图标：
-  <div
-    class="studio-divider studio-divider-horizontal"
-    role="separator"
-  />
-  激活脚本：
-  <div
-    class="studio-divider studio-divider-horizontal"
-    role="separator"
-  />
-  Iconfont 图标库集合：
-  <div
-    class="studio-divider studio-divider-horizontal"
-    role="separator"
-  />
-  <div
-    class="studio-space studio-space-horizontal studio-space-align-center"
-  >
-    <div
-      class="studio-space-item"
-      style="margin-right: 8px;"
-    >
-      <button
-        class="studio-btn studio-btn-default"
-        type="button"
-      >
-        <span>
-          切换为 antd 的 AlipayCircleFilled
-        </span>
-      </button>
-    </div>
-    <div
-      class="studio-space-item"
-    >
-      <button
-        class="studio-btn studio-btn-default"
-        type="button"
-      >
-        <span>
-          清空图标
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
+.emotion-6 {
+  width: 100%;
+}
 
-exports[`<IconPicker /> > renders normal.tsx correctly 1`] = `
-.emotion-0 {
+.emotion-15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-0:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-0:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-1 {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.06);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 8px;
 }
 
-<div>
-  <button
-    class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-0"
-    type="button"
-  >
-    <span
-      class="studio-btn-icon"
-    >
-      <div
-        class="emotion-1"
-      />
-    </span>
-  </button>
-</div>
-`;
-
-exports[`<IconPicker /> > renders scripts.tsx correctly 1`] = `
-.emotion-0 {
+.emotion-16 {
+  -webkit-backdrop-filter: saturate(180%) blur(10px);
+  backdrop-filter: saturate(180%) blur(10px);
+  position: absolute;
+  top: 0;
+  right: 0;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -21478,242 +17425,254 @@ exports[`<IconPicker /> > renders scripts.tsx correctly 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-0:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-0:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
+  height: 36px;
+  padding: 0 8px;
+  font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
+  color: #aaaaaa;
+  border-radius: 6;
 }
 
-.emotion-1 {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.06);
+.emotion-17 {
+  color: #aaaaaa;
 }
 
-<div>
-  <button
-    class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-0"
-    type="button"
-  >
-    <span
-      class="studio-btn-icon"
-    >
-      <div
-        class="emotion-1"
-      />
-    </span>
-  </button>
-</div>
-`;
-
-exports[`<InteractContainer /> > renders Basic.tsx correctly 1`] = `
 <div>
   <div
-    style="padding: 24px;"
+    class="studio-highlight-container emotion-0"
+    tabindex="-1"
   >
-    <div
-      class="studio-space studio-space-horizontal studio-space-align-center"
-    >
-      <div
-        class="studio-space-item"
-        style="margin-right: 8px;"
-      >
-        <div
-          class="studio-card studio-card-bordered studio-card-small"
-        >
-          <div
-            class="studio-card-body"
-          >
-            可选择元素
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-space-item"
-        style="margin-right: 8px;"
-      >
-        <div
-          class="studio-card studio-card-bordered studio-card-small"
-        >
-          <div
-            class="studio-card-body"
-          >
-            可选择元素
-          </div>
-        </div>
-      </div>
-      <div
-        class="studio-space-item"
-      >
-        <div
-          class="studio-card studio-card-bordered studio-card-small"
-        >
-          <div
-            class="studio-card-body"
-          >
-            可选择元素
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InteractContainer /> > renders Controlled.tsx correctly 1`] = `
-<div>
-  <div>
-    <div
-      class="studio-space studio-space-horizontal studio-space-align-center"
+    <button
+      class="studio-highlight-copy emotion-1"
+      type="button"
     >
-      <div
-        class="studio-space-item"
-        style="margin-right: 8px;"
+      <span
+        aria-label="copy"
+        class="anticon anticon-copy studio-highlight-copy-icon emotion-2"
+        role="img"
       >
-        <button
-          class="studio-btn studio-btn-default"
-          type="button"
+        <svg
+          aria-hidden="true"
+          data-icon="copy"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
         >
-          <span>
-            取消选中
-          </span>
-        </button>
-      </div>
-      <div
-        class="studio-space-item"
+          <path
+            d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+          />
+        </svg>
+      </span>
+      <span
+        aria-label="check"
+        class="anticon anticon-check studio-highlight-copy-icon emotion-2"
+        role="img"
+        style="color: rgb(63, 177, 99);"
       >
-        <button
-          class="studio-btn studio-btn-default"
-          type="button"
+        <svg
+          aria-hidden="true"
+          data-icon="check"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
         >
-          <span>
-            选 中
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="studio-divider studio-divider-horizontal"
-      role="separator"
-    />
-    <div
-      id="controller"
+          <path
+            d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+          />
+        </svg>
+      </span>
+    </button>
+    <pre
+      class="emotion-4"
     >
-      <div
-        data-uxid="controller"
-        style="padding: 40px;"
+      <table
+        border="0"
+        cellpadding="0"
+        cellspacing="0"
       >
-        <div
-          class="studio-space studio-space-horizontal studio-space-align-center"
-        >
-          <div
-            class="studio-space-item"
-            style="margin-right: 8px;"
-          >
-            <div
-              class="studio-card studio-card-bordered studio-card-small"
+        <tbody>
+          <tr>
+            <td
+              class="undefined-index emotion-5"
             >
-              <div
-                class="studio-card-body"
+              1
+            </td>
+            <td
+              class="undefined-content emotion-6"
+            >
+              <span
+                class="hljs-keyword"
               >
-                可选择元素
-              </div>
-            </div>
-          </div>
-          <div
-            class="studio-space-item"
-            style="margin-right: 8px;"
-          >
-            <div
-              class="studio-card studio-card-bordered studio-card-small"
+                public
+              </span>
+               
+              <span
+                class="hljs-class"
+              >
+                <span
+                  class="hljs-keyword"
+                >
+                  class
+                </span>
+                 
+                <span
+                  class="hljs-title"
+                >
+                  HelloWorld
+                </span>
+                 
+              </span>
+              {
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="undefined-index emotion-5"
             >
-              <div
-                class="studio-card-body"
+              2
+            </td>
+            <td
+              class="undefined-content emotion-6"
+            >
+                  
+              <span
+                class="hljs-function"
               >
-                可选择元素
-              </div>
-            </div>
-          </div>
-          <div
-            class="studio-space-item"
-          >
-            <div
-              class="studio-card studio-card-bordered studio-card-small"
+                <span
+                  class="hljs-keyword"
+                >
+                  public
+                </span>
+                 
+                <span
+                  class="hljs-keyword"
+                >
+                  static
+                </span>
+                 
+                <span
+                  class="hljs-keyword"
+                >
+                  void
+                </span>
+                 
+                <span
+                  class="hljs-title"
+                >
+                  main
+                </span>
+                <span
+                  class="hljs-params"
+                >
+                  (String[] args)
+                </span>
+                 
+              </span>
+              {
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="undefined-index emotion-5"
             >
-              <div
-                class="studio-card-body"
+              3
+            </td>
+            <td
+              class="undefined-content emotion-6"
+            >
+                    System.out.println(
+              <span
+                class="hljs-string"
               >
-                可选择元素
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<InteractContainer /> > renders WithContainer.tsx correctly 1`] = `
-<div>
-  <div
-    id="ux"
-    style="margin: 16px; padding: 16px; border: 1px solid blue;"
-  >
+                "Hello World!"
+              </span>
+              );
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="undefined-index emotion-5"
+            >
+              4
+            </td>
+            <td
+              class="undefined-content emotion-6"
+            >
+                  }
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="undefined-index emotion-5"
+            >
+              5
+            </td>
+            <td
+              class="undefined-content emotion-6"
+            >
+                }
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </pre>
     <div
-      data-uxid="ctn"
-      style="padding: 40px; border: 1px dashed red;"
+      class="layoutkit-center emotion-15 emotion-16"
     >
       <span
-        data-uxid="text"
+        aria-label="loading-3-quarters"
+        class="anticon anticon-loading-3-quarters anticon-spin emotion-17"
+        role="img"
       >
-        只有红色虚线框的内容可以选择（hover会有悬浮样式）
+        <svg
+          aria-hidden="true"
+          data-icon="loading-3-quarters"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="0 0 1024 1024"
+          width="1em"
+        >
+          <path
+            d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
+          />
+        </svg>
       </span>
+      Highlighting...
     </div>
-    <div>
-      点击红色虚线框之外蓝色框之内的区域，可以取消选中
-    </div>
-  </div>
-  <div
-    class="studio-divider studio-divider-horizontal"
-    role="separator"
-  />
-  <div>
-    此区域无法选择
-    <button
-      class="studio-btn studio-btn-default"
-      type="button"
-    >
-      <span>
-        按 钮
-      </span>
-    </button>
   </div>
 </div>
 `;
 
-exports[`<LevaPanel /> > renders button.tsx correctly 1`] = `
+exports[`<Highlight /> > renders theme.tsx correctly 1`] = `
 .emotion-0 {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
+  background-color: #fafafa;
+  border: 1px solid #fafafa;
   position: relative;
-  border: 0 solid rgba(5, 5, 5, 0.06);
+  overflow: auto;
+  margin: 0;
+  border-radius: 6px;
+  -webkit-transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-0:hover .studio-draggable-panel-toggle {
-  opacity: 1;
+.emotion-0 pre {
+  margin: 0!important;
+  padding: 16px 24px!important;
+  background: none!important;
+}
+
+.emotion-0 code {
+  background: transparent!important;
 }
 
 .emotion-1 {
+  position: absolute;
+  top: 16px;
+  right: 16px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -21721,670 +17680,764 @@ exports[`<LevaPanel /> > renders button.tsx correctly 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  outline: none;
+  cursor: pointer;
+  opacity: 0.6;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+  background-color: #fafafa;
+}
+
+.emotion-1:hover {
+  opacity: 0.8;
 }
 
 .emotion-2 {
-  position: absolute;
-  opacity: 0;
-  z-index: 1001;
-  -webkit-transition: opacity 0.1s;
-  transition: opacity 0.1s;
-  border-radius: 4px;
-  cursor: pointer;
-  background: #ffffff;
-  border-width: 1px;
-  border-style: solid;
-  color: rgba(0, 0, 0, 0.45);
-  border-color: #d9d9d9;
   width: 16px;
-  height: 40px;
-  left: -17px;
-  top: 50%;
-  margin-top: -20px;
-  border-radius: 4px 0 0 4px;
-  border-right-width: 0;
+  color: #333333;
+  height: 16px;
+  font-size: 16px;
 }
 
-.emotion-2:hover {
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
+.emotion-2.scoll {
+  -webkit-animation: copy-button-trans 2s;
+  animation: copy-button-trans 2s;
+  -webkit-animation-play-state: running;
+  animation-play-state: running;
 }
 
-.emotion-3 {
-  background: #ffffff;
-  overflow: hidden;
+.emotion-4 {
+  display: block;
+  overflow-x: auto;
+  color: #333333;
+  background-color: #666666;
 }
 
-.emotion-4 {
-  --leva-sizes-controlWidth: 66%;
-  --leva-colors-elevation1: rgba(0, 0, 0, 0.06);
-  --leva-colors-elevation2: transparent;
-  --leva-colors-elevation3: rgba(0, 0, 0, 0.06);
-  --leva-colors-accent1: #1677ff;
-  --leva-colors-accent2: #4096ff;
-  --leva-colors-accent3: #0958d9;
-  --leva-colors-highlight1: rgba(0, 0, 0, 0.45);
-  --leva-colors-highlight2: rgba(0, 0, 0, 0.65);
-  --leva-colors-highlight3: rgba(0, 0, 0, 0.88);
-  --leva-colors-vivid1: #faad14;
-  --leva-shadows-level1: unset;
-  --leva-shadows-level2: unset;
-  --leva-fonts-mono: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
-  overflow: auto;
-  padding: 6px 0;
+.emotion-4 .hljs-comment,
+.emotion-4 .hljs-quote {
+  color: #aaaaaa;
 }
 
-.emotion-4>div {
-  background: transparent;
+.emotion-4 .hljs-variable,
+.emotion-4 .hljs-attribute,
+.emotion-4 .hljs-template-variable,
+.emotion-4 .hljs-tag,
+.emotion-4 .hljs-name,
+.emotion-4 .hljs-selector-id,
+.emotion-4 .hljs-selector-class,
+.emotion-4 .hljs-regexp,
+.emotion-4 .hljs-title,
+.emotion-4 .hljs-deletion {
+  color: #ec5e41;
 }
 
-.emotion-4>div>div {
-  background: transparent;
+.emotion-4 .hljs-builtin-name,
+.emotion-4 .hljs-literal,
+.emotion-4 .hljs-type,
+.emotion-4 .hljs-params,
+.emotion-4 .hljs-meta,
+.emotion-4 .hljs-link {
+  color: #ff802b;
 }
 
-.emotion-4 input:checked+label>svg {
-  stroke: #f5f5f5;
+.emotion-4 .hljs-string,
+.emotion-4 .hljs-number,
+.emotion-4 .hljs-symbol,
+.emotion-4 .hljs-bullet,
+.emotion-4 .hljs-addition {
+  color: #55b467;
 }
 
-.emotion-4 button {
-  --leva-colors-accent2: rgba(0, 0, 0, 0.06);
+.emotion-4 .hljs-keyword,
+.emotion-4 .hljs-doctag,
+.emotion-4 .hljs-built_in,
+.emotion-4 .hljs-selector-tag,
+.emotion-4 .hljs-section {
+  color: #369eff;
+}
+
+.emotion-4 .hljs-emphasis {
+  font-style: italic;
+}
+
+.emotion-4 .hljs-strong {
+  font-weight: bold;
 }
 
 .emotion-5 {
-  position: relative;
+  width: 100%;
 }
 
-.emotion-5::before {
-  position: absolute;
-  z-index: 50;
-  -webkit-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  content: '';
+.emotion-19 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 8px;
 }
 
-.emotion-5:hover::before,
-.emotion-5:active::before {
-  background: #1677ff;
+.emotion-20 {
+  -webkit-backdrop-filter: saturate(180%) blur(10px);
+  backdrop-filter: saturate(180%) blur(10px);
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  height: 36px;
+  padding: 0 8px;
+  font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
+  color: #aaaaaa;
+  border-radius: 6;
 }
 
-.emotion-5::before {
-  left: 50%;
-  width: 2px;
-  height: 100%;
+.emotion-21 {
+  color: #aaaaaa;
 }
 
 <div>
-  <div
-    style="min-height: 300px; display: flex;"
-  >
+  <div>
     <div
-      style="flex: 1; display: flex; justify-content: center; padding: 12px; align-self: center;"
+      class="studio-space studio-space-horizontal studio-space-align-center"
     >
-      <button
-        class="studio-btn studio-btn-primary"
-        type="button"
+      <div
+        class="studio-space-item"
+        style="margin-right: 8px;"
+      >
+        语言选择:
+      </div>
+      <div
+        class="studio-space-item"
+        style="margin-right: 8px;"
+      >
+        <div
+          class="studio-select studio-select-single studio-select-show-arrow"
+          style="width: 120px;"
+        >
+          <div
+            class="studio-select-selector"
+          >
+            <span
+              class="studio-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="Search"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="studio-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="studio-select-selection-item"
+              title="Typescript"
+            >
+              Typescript
+            </span>
+          </div>
+          <span
+            aria-hidden="true"
+            class="studio-select-arrow"
+            style="user-select: none;"
+            unselectable="on"
+          >
+            <span
+              aria-label="down"
+              class="anticon anticon-down studio-select-suffix"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="down"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+      </div>
+      <div
+        class="studio-space-item"
+        style="margin-right: 8px;"
       >
-        <span>
-          默认按钮
-        </span>
-      </button>
-    </div>
-    <div
-      class="studio-draggable-panel emotion-0"
-      style="border-left-width: 1px;"
-    >
+        主题选择:
+      </div>
       <div
-        class="layoutkit-center emotion-1 studio-draggable-panel-toggle studio-draggable-panel-toggle-left emotion-2"
+        class="studio-space-item"
+        style="margin-right: 8px;"
       >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
+        <div
+          class="studio-select studio-select-single studio-select-show-arrow"
+          style="width: 120px;"
         >
-          <svg
+          <div
+            class="studio-select-selector"
+          >
+            <span
+              class="studio-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="Search"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="studio-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="studio-select-selection-item"
+              title="白色主题"
+            >
+              白色主题
+            </span>
+          </div>
+          <span
             aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            style="transform: rotate(180deg);"
-            viewBox="64 64 896 896"
-            width="1em"
+            class="studio-select-arrow"
+            style="user-select: none;"
+            unselectable="on"
           >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
+            <span
+              aria-label="down"
+              class="anticon anticon-down studio-select-suffix"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="down"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
       </div>
       <div
-        class="studio-draggable-panel-fixed emotion-3"
-        style="position: relative; user-select: auto; padding: 12px; width: 400px; height: 100%; min-width: 280px; box-sizing: border-box; flex-shrink: 0;"
+        class="studio-space-item"
+        style="margin-right: 8px;"
+      >
+        展示行号:
+      </div>
+      <div
+        class="studio-space-item"
+        style="margin-right: 8px;"
       >
         <div
-          class="emotion-4"
+          class="studio-select studio-select-single studio-select-show-arrow"
+          style="width: 120px;"
         >
           <div
-            class="leva-c-kWgxhW leva-c-kWgxhW-bSMcqW-fill-true leva-c-kWgxhW-czBHep-hideTitleBar-false"
-            style="display: block; transform: translate3d(undefinedpx, undefinedpx, 0);"
+            class="studio-select-selector"
           >
-            <div
-              class="leva-c-hwBXYF"
+            <span
+              class="studio-select-selection-search"
             >
-              <i
-                class="leva-c-ctBOWy"
-              >
-                <svg
-                  class="leva-c-cHvNmv"
-                  height="8"
-                  style="transform: rotate(0deg);"
-                  viewBox="0 0 9 5"
-                  width="12"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M3.8 4.4c.4.3 1 .3 1.4 0L8 1.7A1 1 0 007.4 0H1.6a1 1 0 00-.7 1.7l3 2.7z"
-                  />
-                </svg>
-              </i>
-              <div
-                class="leva-c-iLtnIm"
-              >
-                按钮属性配置器
-              </div>
-              <i
-                class="leva-c-ctBOWy"
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="Search"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="studio-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="studio-select-selection-item"
+              title="不展示"
+            >
+              不展示
+            </span>
+          </div>
+          <span
+            aria-hidden="true"
+            class="studio-select-arrow"
+            style="user-select: none;"
+            unselectable="on"
+          >
+            <span
+              aria-label="down"
+              class="anticon anticon-down studio-select-suffix"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="down"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
-                  height="20"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M9 9a2 2 0 114 0 2 2 0 01-4 0z"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a4 4 0 00-3.446 6.032l-2.261 2.26a1 1 0 101.414 1.415l2.261-2.261A4 4 0 1011 5z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </i>
-            </div>
-            <div
-              class="leva-c-fxiFTg leva-c-fxiFTg-dbaoCM-toggled-false"
+                <path
+                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+      </div>
+      <div
+        class="studio-space-item"
+        style="margin-right: 8px;"
+      >
+        展示类型:
+      </div>
+      <div
+        class="studio-space-item"
+      >
+        <div
+          class="studio-select studio-select-single studio-select-show-arrow"
+          style="width: 120px;"
+        >
+          <div
+            class="studio-select-selector"
+          >
+            <span
+              class="studio-select-selection-search"
             >
               <input
-                class="leva-c-iYYzmZ"
-                placeholder="[Open filter with CMD+SHIFT+L]"
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="Search"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="studio-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
                 value=""
               />
-              <i
-                class="leva-c-ctBOWy"
-                style="visibility: hidden;"
-              >
-                <svg
-                  fill="currentColor"
-                  height="14"
-                  viewBox="0 0 20 20"
-                  width="14"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </i>
-            </div>
-            <div
-              class="leva-c-hBtFDW"
+            </span>
+            <span
+              class="studio-select-selection-item"
+              title="block"
             >
-              <div
-                class="leva-c-dmsJDs leva-c-dmsJDs-lpvxwm-toggled-true leva-c-dmsJDs-hXSjjU-isRoot-true"
+              block
+            </span>
+          </div>
+          <span
+            aria-hidden="true"
+            class="studio-select-arrow"
+            style="user-select: none;"
+            unselectable="on"
+          >
+            <span
+              aria-label="down"
+              class="anticon anticon-down studio-select-suffix"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="down"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <div
-                  class="leva-c-bDGmTT"
-                >
-                  <div
-                    class="leva-c-grzFYX leva-c-jzsQCy"
-                  >
-                    <div
-                      class="leva-c-iSkYoW"
-                    >
-                      <label
-                        class="leva-c-dKMqBT"
-                        for="children"
-                        title="按钮文本"
-                      >
-                        按钮文本
-                      </label>
-                    </div>
-                    <div
-                      class="leva-c-kXfPOu"
-                    >
-                      <input
-                        autocomplete="off"
-                        class="leva-c-ghmOOI"
-                        id="children"
-                        spellcheck="false"
-                        type="text"
-                        value="默认按钮"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="leva-c-bDGmTT"
-                >
-                  <div
-                    class="leva-c-grzFYX leva-c-jzsQCy"
-                  >
-                    <div
-                      class="leva-c-iSkYoW"
-                    >
-                      <label
-                        class="leva-c-dKMqBT"
-                        for="type"
-                        title="类型"
-                      >
-                        类型
-                      </label>
-                    </div>
-                    <div
-                      class="leva-c-dkRbIj"
-                    >
-                      <select
-                        class="leva-c-bHmsMj"
-                        id="type"
-                      >
-                        <option
-                          value="0"
-                        >
-                          强调
-                        </option>
-                        <option
-                          value="1"
-                        >
-                          默认
-                        </option>
-                        <option
-                          value="2"
-                        >
-                          虚线
-                        </option>
-                        <option
-                          value="3"
-                        >
-                          链接
-                        </option>
-                        <option
-                          value="4"
-                        >
-                          文本
-                        </option>
-                      </select>
-                      <div
-                        class="leva-c-fOquTv"
-                      >
-                        强调
-                      </div>
-                      <svg
-                        class="leva-c-cHvNmv"
-                        height="5"
-                        style="transform: rotate(0deg);"
-                        viewBox="0 0 9 5"
-                        width="9"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M3.8 4.4c.4.3 1 .3 1.4 0L8 1.7A1 1 0 007.4 0H1.6a1 1 0 00-.7 1.7l3 2.7z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="leva-c-bDGmTT"
-                >
-                  <div
-                    class="leva-c-grzFYX leva-c-jzsQCy"
-                  >
-                    <div
-                      class="leva-c-iSkYoW"
-                    >
-                      <label
-                        class="leva-c-dKMqBT"
-                        for="danger"
-                        title="危险态"
-                      >
-                        危险态
-                      </label>
-                    </div>
-                    <div
-                      class="leva-c-TldsY"
-                    >
-                      <input
-                        id="danger"
-                        type="checkbox"
-                      />
-                      <label
-                        for="danger"
-                      >
-                        <svg
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M5 13l4 4L19 7"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </label>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="leva-c-bDGmTT"
+                <path
+                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      style="height: 400px; width: 100%; overflow-y: scroll; margin-block-start: 16px;"
+    >
+      <div
+        class="studio-highlight-container emotion-0"
+        tabindex="-1"
+      >
+        <button
+          class="studio-highlight-copy emotion-1"
+          type="button"
+        >
+          <span
+            aria-label="copy"
+            class="anticon anticon-copy studio-highlight-copy-icon emotion-2"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="copy"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+              />
+            </svg>
+          </span>
+          <span
+            aria-label="check"
+            class="anticon anticon-check studio-highlight-copy-icon emotion-2"
+            role="img"
+            style="color: rgb(63, 177, 99);"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="check"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+              />
+            </svg>
+          </span>
+        </button>
+        <pre
+          class="emotion-4"
+        >
+          <table
+            border="0"
+            cellpadding="0"
+            cellspacing="0"
+          >
+            <tbody>
+              <tr>
+                <td
+                  class="undefined-content emotion-5"
                 >
-                  <div
-                    class="leva-c-grzFYX leva-c-jzsQCy"
+                  <span
+                    class="hljs-class"
                   >
-                    <div
-                      class="leva-c-iSkYoW"
+                    <span
+                      class="hljs-keyword"
                     >
-                      <label
-                        class="leva-c-dKMqBT"
-                        for="icon"
-                        title="图标"
-                      >
-                        图标
-                      </label>
-                    </div>
-                    <div
-                      class="leva-c-kXfPOu"
+                      class
+                    </span>
+                     
+                    <span
+                      class="hljs-title"
                     >
-                      <input
-                        autocomplete="off"
-                        class="leva-c-ghmOOI"
-                        id="icon"
-                        spellcheck="false"
-                        type="text"
-                        value=""
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="leva-c-bDGmTT"
+                      MyClass
+                    </span>
+                     
+                  </span>
+                  {
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="undefined-content emotion-5"
                 >
-                  <div
-                    class="leva-c-grzFYX leva-c-jzsQCy"
+                    
+                  <span
+                    class="hljs-keyword"
                   >
-                    <div
-                      class="leva-c-iSkYoW"
+                    public
+                  </span>
+                   
+                  <span
+                    class="hljs-keyword"
+                  >
+                    static
+                  </span>
+                   myValue: 
+                  <span
+                    class="hljs-built_in"
+                  >
+                    string
+                  </span>
+                  ;
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="undefined-content emotion-5"
+                >
+                    
+                  <span
+                    class="hljs-function"
+                  >
+                    <span
+                      class="hljs-title"
                     >
-                      <label
-                        class="leva-c-dKMqBT"
-                        for="size"
-                        title="大小"
-                      >
-                        大小
-                      </label>
-                    </div>
-                    <div
-                      class="leva-c-dkRbIj"
+                      constructor
+                    </span>
+                    (
+                    <span
+                      class="hljs-params"
                     >
-                      <select
-                        class="leva-c-bHmsMj"
-                        id="size"
-                      >
-                        <option
-                          value="0"
-                        >
-                          大
-                        </option>
-                        <option
-                          value="1"
-                        >
-                          中
-                        </option>
-                        <option
-                          value="2"
-                        >
-                          小
-                        </option>
-                      </select>
-                      <div
-                        class="leva-c-fOquTv"
-                      >
-                        中
-                      </div>
-                      <svg
-                        class="leva-c-cHvNmv"
-                        height="5"
-                        style="transform: rotate(0deg);"
-                        viewBox="0 0 9 5"
-                        width="9"
-                        xmlns="http://www.w3.org/2000/svg"
+                      init: 
+                      <span
+                        class="hljs-built_in"
                       >
-                        <path
-                          d="M3.8 4.4c.4.3 1 .3 1.4 0L8 1.7A1 1 0 007.4 0H1.6a1 1 0 00-.7 1.7l3 2.7z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="leva-c-bDGmTT"
+                        string
+                      </span>
+                    </span>
+                    )
+                  </span>
+                   {
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="undefined-content emotion-5"
                 >
-                  <div
-                    class="leva-c-grzFYX leva-c-jzsQCy"
+                      
+                  <span
+                    class="hljs-built_in"
+                  >
+                    this
+                  </span>
+                  .myValue = init;
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="undefined-content emotion-5"
+                >
+                    }
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="undefined-content emotion-5"
+                >
+                  }
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="undefined-content emotion-5"
+                >
+                  <span
+                    class="hljs-keyword"
+                  >
+                    import
+                  </span>
+                   fs = 
+                  <span
+                    class="hljs-built_in"
+                  >
+                    require
+                  </span>
+                  (
+                  <span
+                    class="hljs-string"
+                  >
+                    "fs"
+                  </span>
+                  );
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="undefined-content emotion-5"
+                >
+                  <span
+                    class="hljs-built_in"
+                  >
+                    module
+                  </span>
+                   MyModule {
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="undefined-content emotion-5"
+                >
+                    
+                  <span
+                    class="hljs-keyword"
+                  >
+                    export
+                  </span>
+                   
+                  <span
+                    class="hljs-keyword"
+                  >
+                    interface
+                  </span>
+                   MyInterface 
+                  <span
+                    class="hljs-keyword"
                   >
-                    <div
-                      class="leva-c-iSkYoW"
-                    >
-                      <label
-                        class="leva-c-dKMqBT"
-                        for="shape"
-                        title="形状"
-                      >
-                        形状
-                      </label>
-                    </div>
-                    <div
-                      class="leva-c-dkRbIj"
-                    >
-                      <select
-                        class="leva-c-bHmsMj"
-                        id="shape"
-                      >
-                        <option
-                          value="0"
-                        >
-                          默认
-                        </option>
-                        <option
-                          value="1"
-                        >
-                          圆形
-                        </option>
-                        <option
-                          value="2"
-                        >
-                          胶囊
-                        </option>
-                      </select>
-                      <div
-                        class="leva-c-fOquTv"
-                      >
-                        默认
-                      </div>
-                      <svg
-                        class="leva-c-cHvNmv"
-                        height="5"
-                        style="transform: rotate(0deg);"
-                        viewBox="0 0 9 5"
-                        width="9"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M3.8 4.4c.4.3 1 .3 1.4 0L8 1.7A1 1 0 007.4 0H1.6a1 1 0 00-.7 1.7l3 2.7z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="leva-c-bDGmTT"
+                    extends
+                  </span>
+                   Other {
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="undefined-content emotion-5"
                 >
-                  <div
-                    class="leva-c-grzFYX leva-c-jzsQCy"
+                      
+                  <span
+                    class="hljs-attr"
                   >
-                    <div
-                      class="leva-c-iSkYoW"
-                    >
-                      <label
-                        class="leva-c-dKMqBT"
-                        for="loading"
-                        title="加载中"
-                      >
-                        加载中
-                      </label>
-                    </div>
-                    <div
-                      class="leva-c-TldsY"
-                    >
-                      <input
-                        id="loading"
-                        type="checkbox"
-                      />
-                      <label
-                        for="loading"
-                      >
-                        <svg
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M5 13l4 4L19 7"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </label>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="leva-c-bDGmTT"
+                    myProperty
+                  </span>
+                  : 
+                  <span
+                    class="hljs-built_in"
+                  >
+                    any
+                  </span>
+                  ;
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="undefined-content emotion-5"
                 >
-                  <div
-                    class="leva-c-grzFYX leva-c-jzsQCy"
+                    }
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="undefined-content emotion-5"
+                >
+                  }
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="undefined-content emotion-5"
+                >
+                  <span
+                    class="hljs-keyword"
                   >
-                    <div
-                      class="leva-c-iSkYoW"
-                    >
-                      <label
-                        class="leva-c-dKMqBT"
-                        for="disabled"
-                        title="禁用"
-                      >
-                        禁用
-                      </label>
-                    </div>
-                    <div
-                      class="leva-c-TldsY"
-                    >
-                      <input
-                        id="disabled"
-                        type="checkbox"
-                      />
-                      <label
-                        for="disabled"
-                      >
-                        <svg
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M5 13l4 4L19 7"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </label>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="leva-c-bDGmTT"
+                    declare
+                  </span>
+                   magicNumber 
+                  <span
+                    class="hljs-built_in"
+                  >
+                    number
+                  </span>
+                  ;
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="undefined-content emotion-5"
                 >
-                  <div
-                    class="leva-c-grzFYX leva-c-jzsQCy"
+                  myArray.forEach(
+                  <span
+                    class="hljs-function"
                   >
-                    <div
-                      class="leva-c-iSkYoW"
-                    >
-                      <label
-                        class="leva-c-dKMqBT"
-                        for="ghost"
-                        title="幽灵按钮"
-                      >
-                        幽灵按钮
-                      </label>
-                    </div>
-                    <div
-                      class="leva-c-TldsY"
-                    >
-                      <input
-                        id="ghost"
-                        type="checkbox"
-                      />
-                      <label
-                        for="ghost"
-                      >
-                        <svg
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M5 13l4 4L19 7"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </label>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="emotion-5 studio-draggable-panel-left-handle"
-            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
-          />
+                    () =&gt;
+                  </span>
+                   { }); 
+                  <span
+                    class="hljs-comment"
+                  >
+                    // fat arrow syntax
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </pre>
+        <div
+          class="layoutkit-center emotion-19 emotion-20"
+        >
+          <span
+            aria-label="loading-3-quarters"
+            class="anticon anticon-loading-3-quarters anticon-spin emotion-21"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="loading-3-quarters"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
+              />
+            </svg>
+          </span>
+          Highlighting...
         </div>
       </div>
     </div>
@@ -22392,149 +18445,106 @@ exports[`<LevaPanel /> > renders button.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`<SortableList /> > renders Basic.tsx correctly 1`] = `
+exports[`<IconPicker /> > renders controlled.tsx correctly 1`] = `
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding: 24px;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.emotion-2 {
-  list-style: none;
-  display: grid;
-  grid-auto-rows: max-content;
-  grid-gap: 2px;
-  grid-template-columns: repeat(var(--columns, 1), 1fr);
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  border-radius: 4px;
-  -webkit-transition: background-color 350ms ease;
-  transition: background-color 350ms ease;
-}
-
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  -webkit-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  -moz-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  -ms-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  transform-origin: 0 0;
-  touch-action: manipulation;
-}
-
-.emotion-3:not(:last-child) {
-  margin-bottom: 2px;
-}
-
-.emotion-4 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding: 1px 0;
-  color: rgba(0, 0, 0, 0.65);
-  font-size: 12px;
-  white-space: nowrap;
-  list-style: none;
-  border-radius: 4px;
-  outline: none;
-  -webkit-transform: scale(var(--scale, 1));
-  -moz-transform: scale(var(--scale, 1));
-  -ms-transform: scale(var(--scale, 1));
-  transform: scale(var(--scale, 1));
-  transform-origin: 50% 50%;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.emotion-4:focus-visible {
-  box-shadow: 0 0 4px 1px #4c9ffe,0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
-}
-
-.emotion-4:not(.studio-sortable-list-item-withHandle) {
-  cursor: -webkit-grab;
-  cursor: grab;
-  -webkit-user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: none;
-}
-
-.emotion-4-dragging:not(.studio-sortable-list-item-dragOverlay) {
-  z-index: 0;
-  opacity: var(--dragging-opacity, 0.5);
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-4-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
-  box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
+.emotion-0:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+.emotion-0:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
 }
 
-.emotion-6 {
-  position: relative;
-  width: 100%;
-  height: 24px;
-  border-radius: 2px;
-  min-width: 48px;
+.emotion-1 {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.06);
 }
 
-.emotion-6:hover .studio-sortable-list-item-actions {
-  opacity: 1;
-}
+<div>
+  <button
+    class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-0"
+    type="button"
+  >
+    <span
+      class="studio-btn-icon"
+    >
+      <div
+        class="emotion-1"
+      />
+    </span>
+  </button>
+  <div
+    class="studio-divider studio-divider-horizontal"
+    role="separator"
+  />
+  图标：
+  <div
+    class="studio-divider studio-divider-horizontal"
+    role="separator"
+  />
+  激活脚本：
+  <div
+    class="studio-divider studio-divider-horizontal"
+    role="separator"
+  />
+  Iconfont 图标库集合：
+  <div
+    class="studio-divider studio-divider-horizontal"
+    role="separator"
+  />
+  <div
+    class="studio-space studio-space-horizontal studio-space-align-center"
+  >
+    <div
+      class="studio-space-item"
+      style="margin-right: 8px;"
+    >
+      <button
+        class="studio-btn studio-btn-default"
+        type="button"
+      >
+        <span>
+          切换为 antd 的 AlipayCircleFilled
+        </span>
+      </button>
+    </div>
+    <div
+      class="studio-space-item"
+    >
+      <button
+        class="studio-btn studio-btn-default"
+        type="button"
+      >
+        <span>
+          清空图标
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
 
-.emotion-7 {
-  z-index: 10;
-  color: hsla(0, 0, 0, 0.45);
-  opacity: 0;
+exports[`<IconPicker /> > renders normal.tsx correctly 1`] = `
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -22548,38 +18558,43 @@ exports[`<SortableList /> > renders Basic.tsx correctly 1`] = `
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-7:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-7:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-10 {
-  z-index: 10;
-  color: hsla(0, 0, 0, 0.45);
-  opacity: 0;
+.emotion-0:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-11 {
+.emotion-0:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-1 {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.06);
+}
+
+<div>
+  <button
+    class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-0"
+    type="button"
+  >
+    <span
+      class="studio-btn-icon"
+    >
+      <div
+        class="emotion-1"
+      />
+    </span>
+  </button>
+</div>
+`;
+
+exports[`<IconPicker /> > renders scripts.tsx correctly 1`] = `
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -22596,226 +18611,235 @@ exports[`<SortableList /> > renders Basic.tsx correctly 1`] = `
   transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-11:hover {
+.emotion-0:hover {
   color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-11:active {
+.emotion-0:active {
   scale: 0.8;
   color: rgba(0, 0, 0, 0.88);
 }
 
+.emotion-1 {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.06);
+}
+
+<div>
+  <button
+    class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-0"
+    type="button"
+  >
+    <span
+      class="studio-btn-icon"
+    >
+      <div
+        class="emotion-1"
+      />
+    </span>
+  </button>
+</div>
+`;
+
+exports[`<InteractContainer /> > renders Basic.tsx correctly 1`] = `
 <div>
   <div
-    class="layoutkit-flexbox emotion-0"
-    style="background: rgb(245, 245, 245);"
+    style="padding: 24px;"
   >
     <div
-      class="layoutkit-flexbox emotion-1 studio-sortable-list"
+      class="studio-space studio-space-horizontal studio-space-align-center"
     >
-      <ul
-        class="studio-sortable-list-container emotion-2"
-        style="--columns: 1;"
+      <div
+        class="studio-space-item"
+        style="margin-right: 8px;"
       >
-        <li
-          class="studio-sortable-list-item-wrapper emotion-3"
-          data-testid="list-item"
-          style="--index: 0;"
+        <div
+          class="studio-card studio-card-bordered studio-card-small"
         >
           <div
-            aria-describedby="DndDescribedBy-18"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
-            data-cypress="draggable-item"
-            data-id="hello"
-            data-index="0"
-            role="button"
-            style="background-color: rgb(255, 255, 255);"
+            class="studio-card-body"
+          >
+            可选择元素
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-space-item"
+        style="margin-right: 8px;"
+      >
+        <div
+          class="studio-card studio-card-bordered studio-card-small"
+        >
+          <div
+            class="studio-card-body"
+          >
+            可选择元素
+          </div>
+        </div>
+      </div>
+      <div
+        class="studio-space-item"
+      >
+        <div
+          class="studio-card studio-card-bordered studio-card-small"
+        >
+          <div
+            class="studio-card-body"
+          >
+            可选择元素
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<InteractContainer /> > renders Controlled.tsx correctly 1`] = `
+<div>
+  <div>
+    <div
+      class="studio-space studio-space-horizontal studio-space-align-center"
+    >
+      <div
+        class="studio-space-item"
+        style="margin-right: 8px;"
+      >
+        <button
+          class="studio-btn studio-btn-default"
+          type="button"
+        >
+          <span>
+            取消选中
+          </span>
+        </button>
+      </div>
+      <div
+        class="studio-space-item"
+      >
+        <button
+          class="studio-btn studio-btn-default"
+          type="button"
+        >
+          <span>
+            选 中
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="studio-divider studio-divider-horizontal"
+      role="separator"
+    />
+    <div
+      id="controller"
+    >
+      <div
+        data-uxid="controller"
+        style="padding: 40px;"
+      >
+        <div
+          class="studio-space studio-space-horizontal studio-space-align-center"
+        >
+          <div
+            class="studio-space-item"
+            style="margin-right: 8px;"
           >
             <div
-              class="layoutkit-flexbox emotion-5 studio-sortable-list-item-content emotion-6"
+              class="studio-card studio-card-bordered studio-card-small"
             >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-7"
-                data-cypress="draggable-handle"
-                style="width: 14px; height: 24px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                    width="16"
-                  >
-                    <path
-                      d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <div
-                class="layoutkit-flexbox emotion-8"
-                style="padding-left: 4px;"
-              >
-                hello
-              </div>
               <div
-                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
+                class="studio-card-body"
               >
-                <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
-                  style="height: 22px;"
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <span
-                      aria-label="delete"
-                      class="anticon anticon-delete"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="delete"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
+                可选择元素
               </div>
             </div>
-          </div>
-        </li>
-        <li
-          class="studio-sortable-list-item-wrapper emotion-3"
-          data-testid="list-item"
-          style="--index: 1;"
-        >
-          <div
-            aria-describedby="DndDescribedBy-18"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
-            data-cypress="draggable-item"
-            data-id="world"
-            data-index="1"
-            role="button"
-            style="background-color: rgb(255, 255, 255);"
+          </div>
+          <div
+            class="studio-space-item"
+            style="margin-right: 8px;"
           >
             <div
-              class="layoutkit-flexbox emotion-5 studio-sortable-list-item-content emotion-6"
+              class="studio-card studio-card-bordered studio-card-small"
             >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-7"
-                data-cypress="draggable-handle"
-                style="width: 14px; height: 24px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                    width="16"
-                  >
-                    <path
-                      d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                    />
-                  </svg>
-                </span>
-              </button>
               <div
-                class="layoutkit-flexbox emotion-8"
-                style="padding-left: 4px;"
+                class="studio-card-body"
               >
-                world
+                可选择元素
               </div>
+            </div>
+          </div>
+          <div
+            class="studio-space-item"
+          >
+            <div
+              class="studio-card studio-card-bordered studio-card-small"
+            >
               <div
-                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
+                class="studio-card-body"
               >
-                <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
-                  style="height: 22px;"
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <span
-                      aria-label="delete"
-                      class="anticon anticon-delete"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="delete"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
+                可选择元素
               </div>
             </div>
           </div>
-        </li>
-      </ul>
-      <div
-        id="DndDescribedBy-18"
-        style="display: none;"
-      >
-        
-    To pick up a draggable item, press the space bar.
-    While dragging, use the arrow keys to move the item.
-    Press space again to drop the item in its new position, or press escape to cancel.
-  
+        </div>
       </div>
-      <div
-        aria-atomic="true"
-        aria-live="assertive"
-        id="DndLiveRegion-18"
-        role="status"
-        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
-      />
     </div>
   </div>
 </div>
 `;
 
-exports[`<SortableList /> > renders controlled.tsx correctly 1`] = `
+exports[`<InteractContainer /> > renders WithContainer.tsx correctly 1`] = `
+<div>
+  <div
+    id="ux"
+    style="margin: 16px; padding: 16px; border: 1px solid blue;"
+  >
+    <div
+      data-uxid="ctn"
+      style="padding: 40px; border: 1px dashed red;"
+    >
+      <span
+        data-uxid="text"
+      >
+        只有红色虚线框的内容可以选择（hover会有悬浮样式）
+      </span>
+    </div>
+    <div>
+      点击红色虚线框之外蓝色框之内的区域，可以取消选中
+    </div>
+  </div>
+  <div
+    class="studio-divider studio-divider-horizontal"
+    role="separator"
+  />
+  <div>
+    此区域无法选择
+    <button
+      class="studio-btn studio-btn-default"
+      type="button"
+    >
+      <span>
+        按 钮
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`<LevaPanel /> > renders button.tsx correctly 1`] = `
 .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding: 24px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  position: relative;
+  border: 0 solid rgba(5, 5, 5, 0.06);
+}
+
+.emotion-0:hover .studio-draggable-panel-toggle {
+  opacity: 1;
 }
 
 .emotion-1 {
@@ -22826,410 +18850,678 @@ exports[`<SortableList /> > renders controlled.tsx correctly 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-}
-
-.emotion-2 {
-  list-style: none;
-  display: grid;
-  grid-auto-rows: max-content;
-  grid-gap: 2px;
-  grid-template-columns: repeat(var(--columns, 1), 1fr);
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  border-radius: 4px;
-  -webkit-transition: background-color 350ms ease;
-  transition: background-color 350ms ease;
-}
-
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  -webkit-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  -moz-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  -ms-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
-  transform-origin: 0 0;
-  touch-action: manipulation;
-}
-
-.emotion-3:not(:last-child) {
-  margin-bottom: 2px;
-}
-
-.emotion-4 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding: 1px 0;
-  color: rgba(0, 0, 0, 0.65);
-  font-size: 12px;
-  white-space: nowrap;
-  list-style: none;
-  border-radius: 4px;
-  outline: none;
-  -webkit-transform: scale(var(--scale, 1));
-  -moz-transform: scale(var(--scale, 1));
-  -ms-transform: scale(var(--scale, 1));
-  transform: scale(var(--scale, 1));
-  transform-origin: 50% 50%;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.emotion-4:focus-visible {
-  box-shadow: 0 0 4px 1px #4c9ffe,0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
-}
-
-.emotion-4:not(.studio-sortable-list-item-withHandle) {
-  cursor: -webkit-grab;
-  cursor: grab;
-  -webkit-user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  touch-action: none;
-}
-
-.emotion-4-dragging:not(.studio-sortable-list-item-dragOverlay) {
-  z-index: 0;
-  opacity: var(--dragging-opacity, 0.5);
 }
 
-.emotion-4-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
-  box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
+.emotion-2 {
+  position: absolute;
+  opacity: 0;
+  z-index: 1001;
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
+  border-radius: 4px;
+  cursor: pointer;
+  background: #ffffff;
+  border-width: 1px;
+  border-style: solid;
+  color: rgba(0, 0, 0, 0.45);
+  border-color: #d9d9d9;
+  width: 16px;
+  height: 40px;
+  left: -17px;
+  top: 50%;
+  margin-top: -20px;
+  border-radius: 4px 0 0 4px;
+  border-right-width: 0;
 }
 
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+.emotion-2:hover {
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
 }
 
-.emotion-6 {
-  position: relative;
-  width: 100%;
-  height: 24px;
-  border-radius: 2px;
-  min-width: 48px;
+.emotion-3 {
+  background: #ffffff;
+  overflow: hidden;
 }
 
-.emotion-6:hover .studio-sortable-list-item-actions {
-  opacity: 1;
+.emotion-4 {
+  --leva-sizes-controlWidth: 66%;
+  --leva-colors-elevation1: rgba(0, 0, 0, 0.06);
+  --leva-colors-elevation2: transparent;
+  --leva-colors-elevation3: rgba(0, 0, 0, 0.06);
+  --leva-colors-accent1: #1677ff;
+  --leva-colors-accent2: #4096ff;
+  --leva-colors-accent3: #0958d9;
+  --leva-colors-highlight1: rgba(0, 0, 0, 0.45);
+  --leva-colors-highlight2: rgba(0, 0, 0, 0.65);
+  --leva-colors-highlight3: rgba(0, 0, 0, 0.88);
+  --leva-colors-vivid1: #faad14;
+  --leva-shadows-level1: unset;
+  --leva-shadows-level2: unset;
+  --leva-fonts-mono: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;
+  overflow: auto;
+  padding: 6px 0;
 }
 
-.emotion-7 {
-  z-index: 10;
-  color: hsla(0, 0, 0, 0.45);
-  opacity: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+.emotion-4>div {
+  background: transparent;
 }
 
-.emotion-7:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
+.emotion-4>div>div {
+  background: transparent;
 }
 
-.emotion-7:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
+.emotion-4 input:checked+label>svg {
+  stroke: #f5f5f5;
 }
 
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+.emotion-4 button {
+  --leva-colors-accent2: rgba(0, 0, 0, 0.06);
 }
 
-.emotion-10 {
-  z-index: 10;
-  color: hsla(0, 0, 0, 0.45);
-  opacity: 0;
+.emotion-5 {
+  position: relative;
 }
 
-.emotion-11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+.emotion-5::before {
+  position: absolute;
+  z-index: 50;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  content: '';
 }
 
-.emotion-11:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
+.emotion-5:hover::before,
+.emotion-5:active::before {
+  background: #1677ff;
 }
 
-.emotion-11:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
+.emotion-5::before {
+  left: 50%;
+  width: 2px;
+  height: 100%;
 }
 
 <div>
   <div
-    class="layoutkit-flexbox emotion-0"
-    style="background: rgb(245, 245, 245);"
+    style="min-height: 300px; display: flex;"
   >
     <div
-      class="layoutkit-flexbox emotion-1 studio-sortable-list"
+      style="flex: 1; display: flex; justify-content: center; padding: 12px; align-self: center;"
     >
-      <ul
-        class="studio-sortable-list-container emotion-2"
-        style="--columns: 1;"
+      <button
+        class="studio-btn studio-btn-primary"
+        type="button"
       >
-        <li
-          class="studio-sortable-list-item-wrapper emotion-3"
-          data-testid="list-item"
-          style="--index: 0; transition: transform 0ms linear;"
+        <span>
+          默认按钮
+        </span>
+      </button>
+    </div>
+    <div
+      class="studio-draggable-panel emotion-0"
+      style="border-left-width: 1px;"
+    >
+      <div
+        class="layoutkit-center emotion-1 studio-draggable-panel-toggle studio-draggable-panel-toggle-left emotion-2"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            style="transform: rotate(180deg);"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="studio-draggable-panel-fixed emotion-3"
+        style="position: relative; user-select: auto; padding: 12px; width: 400px; height: 100%; min-width: 280px; box-sizing: border-box; flex-shrink: 0;"
+      >
+        <div
+          class="emotion-4"
         >
           <div
-            aria-describedby="DndDescribedBy-17"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
-            data-cypress="draggable-item"
-            data-id="hello"
-            data-index="0"
-            role="button"
-            style="background-color: rgb(255, 255, 255);"
+            class="leva-c-kWgxhW leva-c-kWgxhW-bSMcqW-fill-true leva-c-kWgxhW-czBHep-hideTitleBar-false"
+            style="display: block; transform: translate3d(undefinedpx, undefinedpx, 0);"
           >
             <div
-              class="layoutkit-flexbox emotion-5 studio-sortable-list-item-content emotion-6"
+              class="leva-c-hwBXYF"
             >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-7"
-                data-cypress="draggable-handle"
-                style="width: 14px; height: 24px;"
-                tabindex="-1"
-                type="button"
+              <i
+                class="leva-c-ctBOWy"
               >
-                <span
-                  class="studio-btn-icon"
+                <svg
+                  class="leva-c-cHvNmv"
+                  height="8"
+                  style="transform: rotate(0deg);"
+                  viewBox="0 0 9 5"
+                  width="12"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <svg
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                    width="16"
-                  >
-                    <path
-                      d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                    />
-                  </svg>
-                </span>
-              </button>
+                  <path
+                    d="M3.8 4.4c.4.3 1 .3 1.4 0L8 1.7A1 1 0 007.4 0H1.6a1 1 0 00-.7 1.7l3 2.7z"
+                  />
+                </svg>
+              </i>
               <div
-                class="layoutkit-flexbox emotion-8"
-                style="padding-left: 4px;"
+                class="leva-c-iLtnIm"
+              >
+                按钮属性配置器
+              </div>
+              <i
+                class="leva-c-ctBOWy"
+              >
+                <svg
+                  height="20"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9 9a2 2 0 114 0 2 2 0 01-4 0z"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a4 4 0 00-3.446 6.032l-2.261 2.26a1 1 0 101.414 1.415l2.261-2.261A4 4 0 1011 5z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </i>
+            </div>
+            <div
+              class="leva-c-fxiFTg leva-c-fxiFTg-dbaoCM-toggled-false"
+            >
+              <input
+                class="leva-c-iYYzmZ"
+                placeholder="[Open filter with CMD+SHIFT+L]"
+                value=""
+              />
+              <i
+                class="leva-c-ctBOWy"
+                style="visibility: hidden;"
               >
-                hello
-              </div>
+                <svg
+                  fill="currentColor"
+                  height="14"
+                  viewBox="0 0 20 20"
+                  width="14"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </i>
+            </div>
+            <div
+              class="leva-c-hBtFDW"
+            >
               <div
-                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
+                class="leva-c-dmsJDs leva-c-dmsJDs-lpvxwm-toggled-true leva-c-dmsJDs-hXSjjU-isRoot-true"
               >
-                <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
-                  style="height: 22px;"
-                  tabindex="-1"
-                  type="button"
+                <div
+                  class="leva-c-bDGmTT"
+                >
+                  <div
+                    class="leva-c-grzFYX leva-c-jzsQCy"
+                  >
+                    <div
+                      class="leva-c-iSkYoW"
+                    >
+                      <label
+                        class="leva-c-dKMqBT"
+                        for="children"
+                        title="按钮文本"
+                      >
+                        按钮文本
+                      </label>
+                    </div>
+                    <div
+                      class="leva-c-kXfPOu"
+                    >
+                      <input
+                        autocomplete="off"
+                        class="leva-c-ghmOOI"
+                        id="children"
+                        spellcheck="false"
+                        type="text"
+                        value="默认按钮"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="leva-c-bDGmTT"
+                >
+                  <div
+                    class="leva-c-grzFYX leva-c-jzsQCy"
+                  >
+                    <div
+                      class="leva-c-iSkYoW"
+                    >
+                      <label
+                        class="leva-c-dKMqBT"
+                        for="type"
+                        title="类型"
+                      >
+                        类型
+                      </label>
+                    </div>
+                    <div
+                      class="leva-c-dkRbIj"
+                    >
+                      <select
+                        class="leva-c-bHmsMj"
+                        id="type"
+                      >
+                        <option
+                          value="0"
+                        >
+                          强调
+                        </option>
+                        <option
+                          value="1"
+                        >
+                          默认
+                        </option>
+                        <option
+                          value="2"
+                        >
+                          虚线
+                        </option>
+                        <option
+                          value="3"
+                        >
+                          链接
+                        </option>
+                        <option
+                          value="4"
+                        >
+                          文本
+                        </option>
+                      </select>
+                      <div
+                        class="leva-c-fOquTv"
+                      >
+                        强调
+                      </div>
+                      <svg
+                        class="leva-c-cHvNmv"
+                        height="5"
+                        style="transform: rotate(0deg);"
+                        viewBox="0 0 9 5"
+                        width="9"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3.8 4.4c.4.3 1 .3 1.4 0L8 1.7A1 1 0 007.4 0H1.6a1 1 0 00-.7 1.7l3 2.7z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="leva-c-bDGmTT"
+                >
+                  <div
+                    class="leva-c-grzFYX leva-c-jzsQCy"
+                  >
+                    <div
+                      class="leva-c-iSkYoW"
+                    >
+                      <label
+                        class="leva-c-dKMqBT"
+                        for="danger"
+                        title="危险态"
+                      >
+                        危险态
+                      </label>
+                    </div>
+                    <div
+                      class="leva-c-TldsY"
+                    >
+                      <input
+                        id="danger"
+                        type="checkbox"
+                      />
+                      <label
+                        for="danger"
+                      >
+                        <svg
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5 13l4 4L19 7"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                          />
+                        </svg>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="leva-c-bDGmTT"
+                >
+                  <div
+                    class="leva-c-grzFYX leva-c-jzsQCy"
+                  >
+                    <div
+                      class="leva-c-iSkYoW"
+                    >
+                      <label
+                        class="leva-c-dKMqBT"
+                        for="icon"
+                        title="图标"
+                      >
+                        图标
+                      </label>
+                    </div>
+                    <div
+                      class="leva-c-kXfPOu"
+                    >
+                      <input
+                        autocomplete="off"
+                        class="leva-c-ghmOOI"
+                        id="icon"
+                        spellcheck="false"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="leva-c-bDGmTT"
+                >
+                  <div
+                    class="leva-c-grzFYX leva-c-jzsQCy"
+                  >
+                    <div
+                      class="leva-c-iSkYoW"
+                    >
+                      <label
+                        class="leva-c-dKMqBT"
+                        for="size"
+                        title="大小"
+                      >
+                        大小
+                      </label>
+                    </div>
+                    <div
+                      class="leva-c-dkRbIj"
+                    >
+                      <select
+                        class="leva-c-bHmsMj"
+                        id="size"
+                      >
+                        <option
+                          value="0"
+                        >
+                          大
+                        </option>
+                        <option
+                          value="1"
+                        >
+                          中
+                        </option>
+                        <option
+                          value="2"
+                        >
+                          小
+                        </option>
+                      </select>
+                      <div
+                        class="leva-c-fOquTv"
+                      >
+                        中
+                      </div>
+                      <svg
+                        class="leva-c-cHvNmv"
+                        height="5"
+                        style="transform: rotate(0deg);"
+                        viewBox="0 0 9 5"
+                        width="9"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3.8 4.4c.4.3 1 .3 1.4 0L8 1.7A1 1 0 007.4 0H1.6a1 1 0 00-.7 1.7l3 2.7z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="leva-c-bDGmTT"
                 >
-                  <span
-                    class="studio-btn-icon"
+                  <div
+                    class="leva-c-grzFYX leva-c-jzsQCy"
                   >
-                    <span
-                      aria-label="delete"
-                      class="anticon anticon-delete"
-                      role="img"
+                    <div
+                      class="leva-c-iSkYoW"
+                    >
+                      <label
+                        class="leva-c-dKMqBT"
+                        for="shape"
+                        title="形状"
+                      >
+                        形状
+                      </label>
+                    </div>
+                    <div
+                      class="leva-c-dkRbIj"
                     >
+                      <select
+                        class="leva-c-bHmsMj"
+                        id="shape"
+                      >
+                        <option
+                          value="0"
+                        >
+                          默认
+                        </option>
+                        <option
+                          value="1"
+                        >
+                          圆形
+                        </option>
+                        <option
+                          value="2"
+                        >
+                          胶囊
+                        </option>
+                      </select>
+                      <div
+                        class="leva-c-fOquTv"
+                      >
+                        默认
+                      </div>
                       <svg
-                        aria-hidden="true"
-                        data-icon="delete"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
+                        class="leva-c-cHvNmv"
+                        height="5"
+                        style="transform: rotate(0deg);"
+                        viewBox="0 0 9 5"
+                        width="9"
+                        xmlns="http://www.w3.org/2000/svg"
                       >
                         <path
-                          d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                          d="M3.8 4.4c.4.3 1 .3 1.4 0L8 1.7A1 1 0 007.4 0H1.6a1 1 0 00-.7 1.7l3 2.7z"
                         />
                       </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li
-          class="studio-sortable-list-item-wrapper emotion-3"
-          data-testid="list-item"
-          style="--index: 1; transition: transform 0ms linear;"
-        >
-          <div
-            aria-describedby="DndDescribedBy-17"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
-            data-cypress="draggable-item"
-            data-id="world"
-            data-index="1"
-            role="button"
-            style="background-color: rgb(255, 255, 255);"
-          >
-            <div
-              class="layoutkit-flexbox emotion-5 studio-sortable-list-item-content emotion-6"
-            >
-              <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-7"
-                data-cypress="draggable-handle"
-                style="width: 14px; height: 24px;"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="studio-btn-icon"
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="leva-c-bDGmTT"
                 >
-                  <svg
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                    width="16"
+                  <div
+                    class="leva-c-grzFYX leva-c-jzsQCy"
                   >
-                    <path
-                      d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <div
-                class="layoutkit-flexbox emotion-8"
-                style="padding-left: 4px;"
-              >
-                world
-              </div>
-              <div
-                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
-              >
-                <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
-                  style="height: 22px;"
-                  tabindex="-1"
-                  type="button"
+                    <div
+                      class="leva-c-iSkYoW"
+                    >
+                      <label
+                        class="leva-c-dKMqBT"
+                        for="loading"
+                        title="加载中"
+                      >
+                        加载中
+                      </label>
+                    </div>
+                    <div
+                      class="leva-c-TldsY"
+                    >
+                      <input
+                        id="loading"
+                        type="checkbox"
+                      />
+                      <label
+                        for="loading"
+                      >
+                        <svg
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5 13l4 4L19 7"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                          />
+                        </svg>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="leva-c-bDGmTT"
                 >
-                  <span
-                    class="studio-btn-icon"
+                  <div
+                    class="leva-c-grzFYX leva-c-jzsQCy"
                   >
-                    <span
-                      aria-label="delete"
-                      class="anticon anticon-delete"
-                      role="img"
+                    <div
+                      class="leva-c-iSkYoW"
                     >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="delete"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
+                      <label
+                        class="leva-c-dKMqBT"
+                        for="disabled"
+                        title="禁用"
                       >
-                        <path
-                          d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
+                        禁用
+                      </label>
+                    </div>
+                    <div
+                      class="leva-c-TldsY"
+                    >
+                      <input
+                        id="disabled"
+                        type="checkbox"
+                      />
+                      <label
+                        for="disabled"
+                      >
+                        <svg
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5 13l4 4L19 7"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                          />
+                        </svg>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="leva-c-bDGmTT"
+                >
+                  <div
+                    class="leva-c-grzFYX leva-c-jzsQCy"
+                  >
+                    <div
+                      class="leva-c-iSkYoW"
+                    >
+                      <label
+                        class="leva-c-dKMqBT"
+                        for="ghost"
+                        title="幽灵按钮"
+                      >
+                        幽灵按钮
+                      </label>
+                    </div>
+                    <div
+                      class="leva-c-TldsY"
+                    >
+                      <input
+                        id="ghost"
+                        type="checkbox"
+                      />
+                      <label
+                        for="ghost"
+                      >
+                        <svg
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5 13l4 4L19 7"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                          />
+                        </svg>
+                      </label>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-        </li>
-      </ul>
-      <div
-        id="DndDescribedBy-17"
-        style="display: none;"
-      >
-        
-    To pick up a draggable item, press the space bar.
-    While dragging, use the arrow keys to move the item.
-    Press space again to drop the item in its new position, or press escape to cancel.
-  
+        </div>
+        <div>
+          <div
+            class="emotion-5 studio-draggable-panel-left-handle"
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
+          />
+        </div>
       </div>
-      <div
-        aria-atomic="true"
-        aria-live="assertive"
-        id="DndLiveRegion-17"
-        role="status"
-        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
-      />
     </div>
-    <button
-      class="studio-btn studio-btn-primary"
-      style="margin-top: 8px;"
-      type="button"
-    >
-      <span>
-        设置数据
-      </span>
-    </button>
   </div>
 </div>
 `;
 
-exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
+exports[`<SortableList /> > renders Basic.tsx correctly 1`] = `
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -23442,29 +19734,6 @@ exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
   color: rgba(0, 0, 0, 0.88);
 }
 
-.emotion-21 {
-  height: 24px;
-  padding-block: 2px;
-  margin-top: 4px;
-  margin-bottom: 4px;
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-}
-
-.emotion-21:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background: rgba(0, 0, 0, 0.06)!important;
-  border-color: transparent!important;
-}
-
-.emotion-21:focus {
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-  border-color: #1677ff!important;
-}
-
 <div>
   <div
     class="layoutkit-flexbox emotion-0"
@@ -23488,7 +19757,7 @@ exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="hello"
+            data-id="90fa7df0-b10c-4e43-8af2-f2555b38afa9"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -23521,7 +19790,9 @@ exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
                 class="layoutkit-flexbox emotion-8"
                 style="padding-left: 4px;"
               >
-                hello
+                <div>
+                  hello
+                </div>
               </div>
               <div
                 class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
@@ -23571,7 +19842,7 @@ exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="world"
+            data-id="e149d74e-e507-4f69-ad1b-1d4dba4da9cf"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -23602,181 +19873,52 @@ exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
               </button>
               <div
                 class="layoutkit-flexbox emotion-8"
-                style="padding-left: 4px;"
-              >
-                world
-              </div>
-              <div
-                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
-              >
-                <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
-                  style="height: 22px;"
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <span
-                      aria-label="delete"
-                      class="anticon anticon-delete"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="delete"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </li>
-      </ul>
-      <button
-        class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-sortable-list-btn-add emotion-21"
-        type="button"
-      >
-        <span
-          class="studio-btn-icon"
-        >
-          <span
-            aria-label="plus"
-            class="anticon anticon-plus"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="plus"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-              />
-              <path
-                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
-              />
-            </svg>
-          </span>
-        </span>
-        <span>
-          自定义添加
-        </span>
-      </button>
-      <div
-        id="DndDescribedBy-16"
-        style="display: none;"
-      >
-        
-    To pick up a draggable item, press the space bar.
-    While dragging, use the arrow keys to move the item.
-    Press space again to drop the item in its new position, or press escape to cancel.
-  
-      </div>
-      <div
-        aria-atomic="true"
-        aria-live="assertive"
-        id="DndLiveRegion-16"
-        role="status"
-        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<SortableList /> > renders empty.tsx correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding: 24px;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-<div>
-  <div
-    class="layoutkit-flexbox emotion-0"
-    style="background: rgb(245, 245, 245);"
-  >
-    <div
-      class="layoutkit-flexbox emotion-1 studio-sortable-list"
-    >
-      <div
-        class="studio-empty studio-empty-normal"
-      >
-        <div
-          class="studio-empty-image"
-        >
-          <svg
-            height="41"
-            viewBox="0 0 64 41"
-            width="64"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g
-              fill="none"
-              fill-rule="evenodd"
-              transform="translate(0 1)"
-            >
-              <ellipse
-                cx="32"
-                cy="33"
-                fill="#f5f5f5"
-                rx="32"
-                ry="7"
-              />
-              <g
-                fill-rule="nonzero"
-                stroke="#d9d9d9"
-              >
-                <path
-                  d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                />
-                <path
-                  d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                  fill="#fafafa"
-                />
-              </g>
-            </g>
-          </svg>
-        </div>
-        <div
-          class="studio-empty-description"
-        >
-          暂无数据
-        </div>
-      </div>
+                style="padding-left: 4px;"
+              >
+                <div>
+                  world
+                </div>
+              </div>
+              <div
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
+              >
+                <button
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
+                  style="height: 22px;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <span
+                    class="studio-btn-icon"
+                  >
+                    <span
+                      aria-label="delete"
+                      class="anticon anticon-delete"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="delete"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
       <div
-        id="DndDescribedBy-15"
+        id="DndDescribedBy-16"
         style="display: none;"
       >
         
@@ -23788,7 +19930,7 @@ exports[`<SortableList /> > renders empty.tsx correctly 1`] = `
       <div
         aria-atomic="true"
         aria-live="assertive"
-        id="DndLiveRegion-15"
+        id="DndLiveRegion-16"
         role="status"
         style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
       />
@@ -23797,7 +19939,7 @@ exports[`<SortableList /> > renders empty.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`<SortableList /> > renders getId.tsx correctly 1`] = `
+exports[`<SortableList /> > renders controlled.tsx correctly 1`] = `
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -24025,15 +20167,15 @@ exports[`<SortableList /> > renders getId.tsx correctly 1`] = `
         <li
           class="studio-sortable-list-item-wrapper emotion-3"
           data-testid="list-item"
-          style="--index: 0; transition: transform 0ms linear;"
+          style="--index: 0;"
         >
           <div
-            aria-describedby="DndDescribedBy-13"
+            aria-describedby="DndDescribedBy-15"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="foo"
+            data-id="5a98fbd1-3bae-44e4-876e-a5f8183bb90b"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -24066,7 +20208,9 @@ exports[`<SortableList /> > renders getId.tsx correctly 1`] = `
                 class="layoutkit-flexbox emotion-8"
                 style="padding-left: 4px;"
               >
-                foo
+                <div>
+                  hello
+                </div>
               </div>
               <div
                 class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
@@ -24108,15 +20252,15 @@ exports[`<SortableList /> > renders getId.tsx correctly 1`] = `
         <li
           class="studio-sortable-list-item-wrapper emotion-3"
           data-testid="list-item"
-          style="--index: 1; transition: transform 0ms linear;"
+          style="--index: 1;"
         >
           <div
-            aria-describedby="DndDescribedBy-13"
+            aria-describedby="DndDescribedBy-15"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="bar"
+            data-id="99cf3b78-4d52-4e4f-868f-86a6ad9513f3"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -24149,7 +20293,9 @@ exports[`<SortableList /> > renders getId.tsx correctly 1`] = `
                 class="layoutkit-flexbox emotion-8"
                 style="padding-left: 4px;"
               >
-                bar
+                <div>
+                  world
+                </div>
               </div>
               <div
                 class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
@@ -24190,7 +20336,7 @@ exports[`<SortableList /> > renders getId.tsx correctly 1`] = `
         </li>
       </ul>
       <div
-        id="DndDescribedBy-13"
+        id="DndDescribedBy-15"
         style="display: none;"
       >
         
@@ -24202,21 +20348,265 @@ exports[`<SortableList /> > renders getId.tsx correctly 1`] = `
       <div
         aria-atomic="true"
         aria-live="assertive"
-        id="DndLiveRegion-13"
+        id="DndLiveRegion-15"
         role="status"
         style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
       />
     </div>
-    <div
-      class="studio-divider studio-divider-horizontal studio-divider-with-text studio-divider-with-text-center studio-divider-plain"
-      role="separator"
+    <button
+      class="studio-btn studio-btn-primary"
+      style="margin-top: 8px;"
+      type="button"
     >
-      <span
-        class="studio-divider-inner-text"
-      >
-        当值相同且未指定 id 时无法正常排序
+      <span>
+        设置数据
       </span>
-    </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding: 24px;
+}
+
+.emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-2 {
+  list-style: none;
+  display: grid;
+  grid-auto-rows: max-content;
+  grid-gap: 2px;
+  grid-template-columns: repeat(var(--columns, 1), 1fr);
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border-radius: 4px;
+  -webkit-transition: background-color 350ms ease;
+  transition: background-color 350ms ease;
+}
+
+.emotion-3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  -webkit-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  -moz-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  -ms-transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  transform-origin: 0 0;
+  touch-action: manipulation;
+}
+
+.emotion-3:not(:last-child) {
+  margin-bottom: 2px;
+}
+
+.emotion-4 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 1px 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 12px;
+  white-space: nowrap;
+  list-style: none;
+  border-radius: 4px;
+  outline: none;
+  -webkit-transform: scale(var(--scale, 1));
+  -moz-transform: scale(var(--scale, 1));
+  -ms-transform: scale(var(--scale, 1));
+  transform: scale(var(--scale, 1));
+  transform-origin: 50% 50%;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.emotion-4:focus-visible {
+  box-shadow: 0 0 4px 1px #4c9ffe,0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
+}
+
+.emotion-4:not(.studio-sortable-list-item-withHandle) {
+  cursor: -webkit-grab;
+  cursor: grab;
+  -webkit-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  touch-action: none;
+}
+
+.emotion-4-dragging:not(.studio-sortable-list-item-dragOverlay) {
+  z-index: 0;
+  opacity: var(--dragging-opacity, 0.5);
+}
+
+.emotion-4-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
+  box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
+}
+
+.emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-6 {
+  position: relative;
+  width: 100%;
+  height: 24px;
+  border-radius: 2px;
+  min-width: 48px;
+}
+
+.emotion-6:hover .studio-sortable-list-item-actions {
+  opacity: 1;
+}
+
+.emotion-7 {
+  z-index: 10;
+  color: hsla(0, 0, 0, 0.45);
+  opacity: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-7:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-7:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-10 {
+  z-index: 10;
+  color: hsla(0, 0, 0, 0.45);
+  opacity: 0;
+}
+
+.emotion-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-11:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-11:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-21 {
+  height: 24px;
+  padding-block: 2px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+}
+
+.emotion-21:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background: rgba(0, 0, 0, 0.06)!important;
+  border-color: transparent!important;
+}
+
+.emotion-21:focus {
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+  border-color: #1677ff!important;
+}
+
+<div>
+  <div
+    class="layoutkit-flexbox emotion-0"
+    style="background: rgb(245, 245, 245);"
+  >
     <div
       class="layoutkit-flexbox emotion-1 studio-sortable-list"
     >
@@ -24235,7 +20625,7 @@ exports[`<SortableList /> > renders getId.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="0c6e0dc7fe8265039be4edfdb1076de9fa781a72-0"
+            data-id="91eee9c2-a671-40f4-b552-2e9aecf4e3b9"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -24318,7 +20708,7 @@ exports[`<SortableList /> > renders getId.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="0c6e0dc7fe8265039be4edfdb1076de9fa781a72-1"
+            data-id="07cccb56-a22c-4dcd-9f5b-d3ecfdc21ddd"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -24351,7 +20741,7 @@ exports[`<SortableList /> > renders getId.tsx correctly 1`] = `
                 class="layoutkit-flexbox emotion-8"
                 style="padding-left: 4px;"
               >
-                hello
+                world
               </div>
               <div
                 class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
@@ -24391,6 +20781,40 @@ exports[`<SortableList /> > renders getId.tsx correctly 1`] = `
           </div>
         </li>
       </ul>
+      <button
+        class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-sortable-list-btn-add emotion-21"
+        type="button"
+      >
+        <span
+          class="studio-btn-icon"
+        >
+          <span
+            aria-label="plus"
+            class="anticon anticon-plus"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="plus"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+              />
+              <path
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          自定义添加
+        </span>
+      </button>
       <div
         id="DndDescribedBy-14"
         style="display: none;"
@@ -24413,6 +20837,103 @@ exports[`<SortableList /> > renders getId.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`<SortableList /> > renders empty.tsx correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding: 24px;
+}
+
+.emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+<div>
+  <div
+    class="layoutkit-flexbox emotion-0"
+    style="background: rgb(245, 245, 245);"
+  >
+    <div
+      class="layoutkit-flexbox emotion-1 studio-sortable-list"
+    >
+      <div
+        class="studio-empty studio-empty-normal"
+      >
+        <div
+          class="studio-empty-image"
+        >
+          <svg
+            height="41"
+            viewBox="0 0 64 41"
+            width="64"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              fill="none"
+              fill-rule="evenodd"
+              transform="translate(0 1)"
+            >
+              <ellipse
+                cx="32"
+                cy="33"
+                fill="#f5f5f5"
+                rx="32"
+                ry="7"
+              />
+              <g
+                fill-rule="nonzero"
+                stroke="#d9d9d9"
+              >
+                <path
+                  d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                />
+                <path
+                  d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                  fill="#fafafa"
+                />
+              </g>
+            </g>
+          </svg>
+        </div>
+        <div
+          class="studio-empty-description"
+        >
+          暂无数据
+        </div>
+      </div>
+      <div
+        id="DndDescribedBy-13"
+        style="display: none;"
+      >
+        
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+      </div>
+      <div
+        aria-atomic="true"
+        aria-live="assertive"
+        id="DndLiveRegion-13"
+        role="status"
+        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
 .emotion-0 {
   display: -webkit-box;
@@ -24635,7 +21156,7 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="关关雎鸠"
+          data-id="a7f222f0-886b-4397-a4b3-ebbf3fa19195"
           data-index="0"
           role="button"
           style="padding: 24px; background: pink; color: rgb(135, 74, 74); border-radius: 16px; box-shadow: none; background-color: rgb(255, 255, 255);"
@@ -24668,7 +21189,9 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
               class="layoutkit-flexbox emotion-7"
               style="padding-left: 4px;"
             >
-              关关雎鸠
+              <div>
+                关关雎鸠
+              </div>
             </div>
             <div
               class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9"
@@ -24718,7 +21241,7 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="在河之洲"
+          data-id="58e428e6-7c4b-4316-b26f-8026d2443a96"
           data-index="1"
           role="button"
           style="padding: 24px; background: pink; color: rgb(135, 74, 74); border-radius: 16px; box-shadow: none; background-color: rgb(255, 255, 255);"
@@ -24751,7 +21274,9 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
               class="layoutkit-flexbox emotion-7"
               style="padding-left: 4px;"
             >
-              在河之洲
+              <div>
+                在河之洲
+              </div>
             </div>
             <div
               class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9"
@@ -24801,7 +21326,7 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="窈窕淑女"
+          data-id="9aa21a57-a147-4737-9c0a-49d3dc0e288b"
           data-index="2"
           role="button"
           style="padding: 24px; background: pink; color: rgb(135, 74, 74); border-radius: 16px; box-shadow: none; background-color: rgb(255, 255, 255);"
@@ -24834,7 +21359,9 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
               class="layoutkit-flexbox emotion-7"
               style="padding-left: 4px;"
             >
-              窈窕淑女
+              <div>
+                窈窕淑女
+              </div>
             </div>
             <div
               class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9"
@@ -24884,7 +21411,7 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="君子好逑"
+          data-id="58a8dec7-cb06-4600-ae36-66b24f31b436"
           data-index="3"
           role="button"
           style="padding: 24px; background: pink; color: rgb(135, 74, 74); border-radius: 16px; box-shadow: none; background-color: rgb(255, 255, 255);"
@@ -24917,7 +21444,9 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
               class="layoutkit-flexbox emotion-7"
               style="padding-left: 4px;"
             >
-              君子好逑
+              <div>
+                君子好逑
+              </div>
             </div>
             <div
               class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9"
@@ -25239,7 +21768,7 @@ exports[`<SortableList /> > renders provider.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="index"
+            data-id="d87fc83e-c7c3-4dd8-bede-0227db4f07fd"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -25402,7 +21931,7 @@ exports[`<SortableList /> > renders provider.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="authName"
+            data-id="d8775a3c-da95-421e-bdf9-f3af51827388"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -25565,7 +22094,7 @@ exports[`<SortableList /> > renders provider.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="authedName"
+            data-id="2eec038d-d4df-4884-9376-74c4e80823a4"
             data-index="2"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -26046,7 +22575,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="index"
+            data-id="991b9b60-3c7c-4744-ab4d-85c70507b8c0"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -26209,7 +22738,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="authName"
+            data-id="8e68656a-c130-421e-9bc9-92fc1d45ceb0"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -26372,7 +22901,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="authedName"
+            data-id="189efd57-971c-4a91-a272-9e00aefe3693"
             data-index="2"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -26799,7 +23328,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="index"
+            data-id="e71c5f37-b7d1-4a49-ae47-7af81cfc5b70"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -26962,7 +23491,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="authName"
+            data-id="5701b781-52c8-496a-8617-04cde44da4e6"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -27125,7 +23654,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="authedName"
+            data-id="fea6f1b6-901f-40e5-b611-37b433c04451"
             data-index="2"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -27493,7 +24022,7 @@ exports[`<SortableList /> > renders renderItem.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-5 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="1"
+            data-id="aa6fd927-6dea-4632-a63c-321f94155fb2"
             data-index="0"
             role="button"
             style="padding: 16px; background-color: rgb(255, 255, 255);"
@@ -27582,7 +24111,7 @@ exports[`<SortableList /> > renders renderItem.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-5 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="2"
+            data-id="2e3668bd-1538-4a76-8588-7d56ef17abae"
             data-index="1"
             role="button"
             style="padding: 16px; background-color: rgb(255, 255, 255);"
@@ -27671,7 +24200,7 @@ exports[`<SortableList /> > renders renderItem.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-5 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="3"
+            data-id="fcf71bda-c7d6-4ee5-8a81-0b4b36ae8e1c"
             data-index="2"
             role="button"
             style="padding: 16px; background-color: rgb(255, 255, 255);"
@@ -27760,7 +24289,7 @@ exports[`<SortableList /> > renders renderItem.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-5 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="4"
+            data-id="233e5e8f-a8b0-4474-ad4d-c832f413d6e0"
             data-index="3"
             role="button"
             style="padding: 16px; background-color: rgb(255, 255, 255);"
@@ -28113,7 +24642,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="index"
+            data-id="75bb2426-a73f-4746-b26d-3d7d6b88e5fa"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -28276,7 +24805,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="authName"
+            data-id="3ad5576f-7bec-4dbf-a280-9ff2abd44d19"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -28439,7 +24968,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="authedName"
+            data-id="ddc053d7-53b1-4f1b-af2f-76c7ead9e928"
             data-index="2"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -28888,7 +25417,7 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-23"
+            aria-describedby="DndDescribedBy-21"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -28959,7 +25488,7 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-23"
+            aria-describedby="DndDescribedBy-21"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -29048,7 +25577,7 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-23"
+            aria-describedby="DndDescribedBy-21"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -29119,7 +25648,7 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-23"
+            aria-describedby="DndDescribedBy-21"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -29190,7 +25719,7 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-23"
+            aria-describedby="DndDescribedBy-21"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -29261,7 +25790,7 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-23"
+            aria-describedby="DndDescribedBy-21"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -29332,7 +25861,7 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-23"
+            aria-describedby="DndDescribedBy-21"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -29403,7 +25932,7 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-23"
+            aria-describedby="DndDescribedBy-21"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -29492,7 +26021,7 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-23"
+            aria-describedby="DndDescribedBy-21"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -29563,7 +26092,7 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-23"
+            aria-describedby="DndDescribedBy-21"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -29660,7 +26189,7 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
         </span>
       </button>
       <div
-        id="DndDescribedBy-23"
+        id="DndDescribedBy-21"
         style="display: none;"
       >
         
@@ -29672,7 +26201,7 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
       <div
         aria-atomic="true"
         aria-live="assertive"
-        id="DndLiveRegion-23"
+        id="DndLiveRegion-21"
         role="status"
         style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
       />
@@ -29955,7 +26484,7 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-22"
+            aria-describedby="DndDescribedBy-20"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -30022,7 +26551,7 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-22"
+            aria-describedby="DndDescribedBy-20"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -30107,7 +26636,7 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-22"
+            aria-describedby="DndDescribedBy-20"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -30174,7 +26703,7 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-22"
+            aria-describedby="DndDescribedBy-20"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -30241,7 +26770,7 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-22"
+            aria-describedby="DndDescribedBy-20"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -30308,7 +26837,7 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-22"
+            aria-describedby="DndDescribedBy-20"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -30375,7 +26904,7 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-22"
+            aria-describedby="DndDescribedBy-20"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -30442,7 +26971,7 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-22"
+            aria-describedby="DndDescribedBy-20"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -30527,7 +27056,7 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-22"
+            aria-describedby="DndDescribedBy-20"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -30594,7 +27123,7 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-22"
+            aria-describedby="DndDescribedBy-20"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -30687,7 +27216,7 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
         </span>
       </button>
       <div
-        id="DndDescribedBy-22"
+        id="DndDescribedBy-20"
         style="display: none;"
       >
         
@@ -30699,7 +27228,7 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
       <div
         aria-atomic="true"
         aria-live="assertive"
-        id="DndLiveRegion-22"
+        id="DndLiveRegion-20"
         role="status"
         style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
       />
@@ -31445,7 +27974,7 @@ exports[`<SortableTree /> > renders disableDrag.tsx correctly 1`] = `
         </span>
       </button>
       <div
-        id="DndDescribedBy-21"
+        id="DndDescribedBy-19"
         style="display: none;"
       >
         
@@ -31457,7 +27986,7 @@ exports[`<SortableTree /> > renders disableDrag.tsx correctly 1`] = `
       <div
         aria-atomic="true"
         aria-live="assertive"
-        id="DndLiveRegion-21"
+        id="DndLiveRegion-19"
         role="status"
         style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
       />
@@ -31788,7 +28317,7 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-20"
+            aria-describedby="DndDescribedBy-18"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -31879,7 +28408,7 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-20"
+            aria-describedby="DndDescribedBy-18"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -31988,7 +28517,7 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-20"
+            aria-describedby="DndDescribedBy-18"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -32079,7 +28608,7 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-20"
+            aria-describedby="DndDescribedBy-18"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -32170,7 +28699,7 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-20"
+            aria-describedby="DndDescribedBy-18"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -32261,7 +28790,7 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-20"
+            aria-describedby="DndDescribedBy-18"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -32352,7 +28881,7 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-20"
+            aria-describedby="DndDescribedBy-18"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -32443,7 +28972,7 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-20"
+            aria-describedby="DndDescribedBy-18"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -32552,7 +29081,7 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-20"
+            aria-describedby="DndDescribedBy-18"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -32643,7 +29172,7 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-20"
+            aria-describedby="DndDescribedBy-18"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -32760,7 +29289,7 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
         </span>
       </button>
       <div
-        id="DndDescribedBy-20"
+        id="DndDescribedBy-18"
         style="display: none;"
       >
         
@@ -32772,7 +29301,7 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
       <div
         aria-atomic="true"
         aria-live="assertive"
-        id="DndLiveRegion-20"
+        id="DndLiveRegion-18"
         role="status"
         style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
       />
@@ -33055,7 +29584,7 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-19"
+            aria-describedby="DndDescribedBy-17"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -33122,7 +29651,7 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-19"
+            aria-describedby="DndDescribedBy-17"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -33207,7 +29736,7 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-19"
+            aria-describedby="DndDescribedBy-17"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -33274,7 +29803,7 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-19"
+            aria-describedby="DndDescribedBy-17"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -33341,7 +29870,7 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-19"
+            aria-describedby="DndDescribedBy-17"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -33408,7 +29937,7 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-19"
+            aria-describedby="DndDescribedBy-17"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -33475,7 +30004,7 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-19"
+            aria-describedby="DndDescribedBy-17"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -33542,7 +30071,7 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-19"
+            aria-describedby="DndDescribedBy-17"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -33627,7 +30156,7 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-19"
+            aria-describedby="DndDescribedBy-17"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -33694,7 +30223,7 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
           class="studio-sortable-tree-node-body"
         >
           <button
-            aria-describedby="DndDescribedBy-19"
+            aria-describedby="DndDescribedBy-17"
             aria-disabled="false"
             aria-roledescription="sortable"
             class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
@@ -33787,7 +30316,7 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
         </span>
       </button>
       <div
-        id="DndDescribedBy-19"
+        id="DndDescribedBy-17"
         style="display: none;"
       >
         
@@ -33799,7 +30328,7 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
       <div
         aria-atomic="true"
         aria-live="assertive"
-        id="DndLiveRegion-19"
+        id="DndLiveRegion-17"
         role="status"
         style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
       />

From e9492277838d63f4b5c80afc527c59d4b4ac4727 Mon Sep 17 00:00:00 2001
From: rdmclin2 <rdmclin2@gmail.com>
Date: Thu, 7 Sep 2023 19:21:42 +0800
Subject: [PATCH 08/10] =?UTF-8?q?:recycle:=20chore:=20=E4=BA=A7=E7=94=9F?=
 =?UTF-8?q?=E7=A1=AE=E5=AE=9A=E7=9A=84=20id?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/SortableList/container/StoreUpdater.tsx   |   3 +-
 src/SortableList/store/keyManagerReducer.ts   |   3 +-
 src/SortableList/utils/index.tsx              |   8 +
 .../components/TreeItem/index.tsx             |   1 +
 tests/__snapshots__/demo.test.tsx.snap        | 184 +++++++-----------
 5 files changed, 80 insertions(+), 119 deletions(-)

diff --git a/src/SortableList/container/StoreUpdater.tsx b/src/SortableList/container/StoreUpdater.tsx
index cb800f1c..6c9f9281 100644
--- a/src/SortableList/container/StoreUpdater.tsx
+++ b/src/SortableList/container/StoreUpdater.tsx
@@ -4,6 +4,7 @@ import { createStoreUpdater } from 'zustand-utils';
 import { useSortableList } from '..';
 import { useStoreApi } from '../store';
 import type { StoreUpdaterProps } from '../type';
+import { getUUID } from '../utils';
 
 const StoreUpdater = forwardRef(
   (
@@ -33,7 +34,7 @@ const StoreUpdater = forwardRef(
         value.forEach((__, index) => {
           const key = draft[index];
           if (key === undefined) {
-            draft[index] = crypto.randomUUID();
+            draft[index] = getUUID();
           }
         });
         return draft;
diff --git a/src/SortableList/store/keyManagerReducer.ts b/src/SortableList/store/keyManagerReducer.ts
index ad733e98..487be858 100644
--- a/src/SortableList/store/keyManagerReducer.ts
+++ b/src/SortableList/store/keyManagerReducer.ts
@@ -1,6 +1,7 @@
 import { arrayMove } from '@dnd-kit/sortable';
 import { produce } from 'immer';
 import { SortableListDispatchPayload } from '../type';
+import { getUUID } from '../utils';
 
 export const keyManagerReducer = (value: any[], payload: SortableListDispatchPayload) => {
   switch (payload.type) {
@@ -37,7 +38,7 @@ export const keyManagerReducer = (value: any[], payload: SortableListDispatchPay
     case 'addItem':
       const { index = value.length } = payload;
       return produce(value, (draft) => {
-        draft.splice(index, 0, crypto.randomUUID());
+        draft.splice(index, 0, getUUID());
         return draft;
       });
 
diff --git a/src/SortableList/utils/index.tsx b/src/SortableList/utils/index.tsx
index c2d4a0bd..9129f193 100644
--- a/src/SortableList/utils/index.tsx
+++ b/src/SortableList/utils/index.tsx
@@ -4,6 +4,8 @@ import { useEffect, useState } from 'react';
 
 const defaultInitializer = (index: number) => index;
 
+const env = this === window ? 'browser' : 'node';
+
 export function createRange<T = number>(
   length: number,
   initializer: (index: number) => any = defaultInitializer,
@@ -64,3 +66,9 @@ export const useLatest = (props: any) => {
 export const getIndexOfActiveItem = (list: any[], id?: UniqueIdentifier) => {
   return id ? list.findIndex((item) => item === id) : -1;
 };
+
+let id = 0;
+
+export const getUUID = () => {
+  return env === 'browser' ? crypto.randomUUID() : id++;
+};
diff --git a/src/SortableTree/components/TreeItem/index.tsx b/src/SortableTree/components/TreeItem/index.tsx
index cba891a8..2cdd073e 100644
--- a/src/SortableTree/components/TreeItem/index.tsx
+++ b/src/SortableTree/components/TreeItem/index.tsx
@@ -125,6 +125,7 @@ const TreeItem: FC<TreeItemProps> = memo(
     depth,
     disableSelection = iOS,
     collapsed,
+    indentationWidth: _indentationWidth,
     onCollapse,
     onRemove,
     style,
diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap
index 5bea678f..58a5611b 100644
--- a/tests/__snapshots__/demo.test.tsx.snap
+++ b/tests/__snapshots__/demo.test.tsx.snap
@@ -2648,7 +2648,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="d4f7789b-6345-4850-aa99-8aa271766e59"
+          data-id="16"
           data-index="0"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -2682,7 +2682,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-0-d4f7789b-6345-4850-aa99-8aa271766e59"
+                id="column-list-0-16"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -2890,7 +2890,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="af3d7eec-c7f9-4517-b978-874debf99401"
+          data-id="17"
           data-index="1"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -2924,7 +2924,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-1-af3d7eec-c7f9-4517-b978-874debf99401"
+                id="column-list-1-17"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -3132,7 +3132,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="7726b796-213b-483b-9053-9bfeee3c4836"
+          data-id="18"
           data-index="2"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -3166,7 +3166,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-2-7726b796-213b-483b-9053-9bfeee3c4836"
+                id="column-list-2-18"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -3720,7 +3720,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="4c936799-c16d-4fe8-8a85-267dced72ba8"
+          data-id="12"
           data-index="0"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -3754,7 +3754,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-0-4c936799-c16d-4fe8-8a85-267dced72ba8"
+                id="column-list-0-12"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -3950,7 +3950,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="02c394d4-4eb2-48ed-9f30-e686a0579d96"
+          data-id="13"
           data-index="1"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -3984,7 +3984,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-1-02c394d4-4eb2-48ed-9f30-e686a0579d96"
+                id="column-list-1-13"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -4180,7 +4180,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="ac5cf1ee-8327-473a-9b30-9165e672d2b2"
+          data-id="14"
           data-index="2"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -4214,7 +4214,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-2-ac5cf1ee-8327-473a-9b30-9165e672d2b2"
+                id="column-list-2-14"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -4410,7 +4410,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="d24c2ecd-abfe-4de4-bf9e-bcdaaf296a52"
+          data-id="15"
           data-index="3"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -4444,7 +4444,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-3-d24c2ecd-abfe-4de4-bf9e-bcdaaf296a52"
+                id="column-list-3-15"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -4947,7 +4947,7 @@ exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="615bfd5f-8265-4819-9b87-4582085a8211"
+          data-id="9"
           data-index="0"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -4981,7 +4981,7 @@ exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-0-615bfd5f-8265-4819-9b87-4582085a8211"
+                id="column-list-0-9"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -5160,7 +5160,7 @@ exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="7997d7d7-d268-4997-8fd6-2bca80c8e3c0"
+          data-id="10"
           data-index="1"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -5194,7 +5194,7 @@ exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-1-7997d7d7-d268-4997-8fd6-2bca80c8e3c0"
+                id="column-list-1-10"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -5373,7 +5373,7 @@ exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="e28321d5-8112-4859-a135-c77331bf4056"
+          data-id="11"
           data-index="2"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -5407,7 +5407,7 @@ exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-2-e28321d5-8112-4859-a135-c77331bf4056"
+                id="column-list-2-11"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -5950,7 +5950,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="3c45306b-16ce-4b93-8e48-a700c9bc632e"
+          data-id="6"
           data-index="0"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -5984,7 +5984,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-0-3c45306b-16ce-4b93-8e48-a700c9bc632e"
+                id="column-list-0-6"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -6163,7 +6163,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="c9e3bc32-4669-4e89-89a0-b1750a521ed0"
+          data-id="7"
           data-index="1"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -6197,7 +6197,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-1-c9e3bc32-4669-4e89-89a0-b1750a521ed0"
+                id="column-list-1-7"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -6376,7 +6376,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="885c09fa-b93f-4516-91b7-fa919f42cc4a"
+          data-id="8"
           data-index="2"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -6410,7 +6410,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-2-885c09fa-b93f-4516-91b7-fa919f42cc4a"
+                id="column-list-2-8"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -6960,7 +6960,7 @@ exports[`<ColumnList /> > renders customCreate.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-9 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="8b2688e1-d581-4bf4-8276-e712bd800f9a"
+          data-id="3"
           data-index="0"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -6994,7 +6994,7 @@ exports[`<ColumnList /> > renders customCreate.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-15"
-                id="column-list-0-8b2688e1-d581-4bf4-8276-e712bd800f9a"
+                id="column-list-0-3"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -7173,7 +7173,7 @@ exports[`<ColumnList /> > renders customCreate.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-9 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="97f42563-406b-4c1e-8ad9-81d1698c95ab"
+          data-id="4"
           data-index="1"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -7207,7 +7207,7 @@ exports[`<ColumnList /> > renders customCreate.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-15"
-                id="column-list-1-97f42563-406b-4c1e-8ad9-81d1698c95ab"
+                id="column-list-1-4"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -7386,7 +7386,7 @@ exports[`<ColumnList /> > renders customCreate.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-9 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="88ee860b-ff32-4d28-80a2-62b9ba765f79"
+          data-id="5"
           data-index="2"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -7420,7 +7420,7 @@ exports[`<ColumnList /> > renders customCreate.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-15"
-                id="column-list-2-88ee860b-ff32-4d28-80a2-62b9ba765f79"
+                id="column-list-2-5"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -8048,7 +8048,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="4d6c48c4-c0e9-4c17-b45e-ca74d627341d"
+          data-id="0"
           data-index="0"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -8082,7 +8082,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-0-4d6c48c4-c0e9-4c17-b45e-ca74d627341d"
+                id="column-list-0-null"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -8090,7 +8090,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
               />
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-0-4d6c48c4-c0e9-4c17-b45e-ca74d627341d"
+                id="column-list-0-null"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -8145,7 +8145,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="9b94d116-daec-4cda-884c-4fe4304094f4"
+          data-id="1"
           data-index="1"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -8179,7 +8179,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-1-9b94d116-daec-4cda-884c-4fe4304094f4"
+                id="column-list-1-1"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -8187,7 +8187,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
               />
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-1-9b94d116-daec-4cda-884c-4fe4304094f4"
+                id="column-list-1-1"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -8242,7 +8242,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="6ed81628-b229-4b92-9381-efd37943c8a9"
+          data-id="2"
           data-index="2"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -8276,7 +8276,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-2-6ed81628-b229-4b92-9381-efd37943c8a9"
+                id="column-list-2-2"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -8284,7 +8284,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
               />
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-2-6ed81628-b229-4b92-9381-efd37943c8a9"
+                id="column-list-2-2"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -19757,7 +19757,7 @@ exports[`<SortableList /> > renders Basic.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="90fa7df0-b10c-4e43-8af2-f2555b38afa9"
+            data-id="43"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -19842,7 +19842,7 @@ exports[`<SortableList /> > renders Basic.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="e149d74e-e507-4f69-ad1b-1d4dba4da9cf"
+            data-id="44"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -20175,7 +20175,7 @@ exports[`<SortableList /> > renders controlled.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="5a98fbd1-3bae-44e4-876e-a5f8183bb90b"
+            data-id="41"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -20260,7 +20260,7 @@ exports[`<SortableList /> > renders controlled.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="99cf3b78-4d52-4e4f-868f-86a6ad9513f3"
+            data-id="42"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -20625,7 +20625,7 @@ exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="91eee9c2-a671-40f4-b552-2e9aecf4e3b9"
+            data-id="39"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -20708,7 +20708,7 @@ exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="07cccb56-a22c-4dcd-9f5b-d3ecfdc21ddd"
+            data-id="40"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -21156,7 +21156,7 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="a7f222f0-886b-4397-a4b3-ebbf3fa19195"
+          data-id="35"
           data-index="0"
           role="button"
           style="padding: 24px; background: pink; color: rgb(135, 74, 74); border-radius: 16px; box-shadow: none; background-color: rgb(255, 255, 255);"
@@ -21241,7 +21241,7 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="58e428e6-7c4b-4316-b26f-8026d2443a96"
+          data-id="36"
           data-index="1"
           role="button"
           style="padding: 24px; background: pink; color: rgb(135, 74, 74); border-radius: 16px; box-shadow: none; background-color: rgb(255, 255, 255);"
@@ -21326,7 +21326,7 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="9aa21a57-a147-4737-9c0a-49d3dc0e288b"
+          data-id="37"
           data-index="2"
           role="button"
           style="padding: 24px; background: pink; color: rgb(135, 74, 74); border-radius: 16px; box-shadow: none; background-color: rgb(255, 255, 255);"
@@ -21411,7 +21411,7 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="58a8dec7-cb06-4600-ae36-66b24f31b436"
+          data-id="38"
           data-index="3"
           role="button"
           style="padding: 24px; background: pink; color: rgb(135, 74, 74); border-radius: 16px; box-shadow: none; background-color: rgb(255, 255, 255);"
@@ -21768,7 +21768,7 @@ exports[`<SortableList /> > renders provider.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="d87fc83e-c7c3-4dd8-bede-0227db4f07fd"
+            data-id="32"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -21931,7 +21931,7 @@ exports[`<SortableList /> > renders provider.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="d8775a3c-da95-421e-bdf9-f3af51827388"
+            data-id="33"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -22094,7 +22094,7 @@ exports[`<SortableList /> > renders provider.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="2eec038d-d4df-4884-9376-74c4e80823a4"
+            data-id="34"
             data-index="2"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -22575,7 +22575,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="991b9b60-3c7c-4744-ab4d-85c70507b8c0"
+            data-id="29"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -22738,7 +22738,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="8e68656a-c130-421e-9bc9-92fc1d45ceb0"
+            data-id="30"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -22901,7 +22901,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="189efd57-971c-4a91-a272-9e00aefe3693"
+            data-id="31"
             data-index="2"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -23328,7 +23328,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="e71c5f37-b7d1-4a49-ae47-7af81cfc5b70"
+            data-id="26"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -23491,7 +23491,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="5701b781-52c8-496a-8617-04cde44da4e6"
+            data-id="27"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -23654,7 +23654,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="fea6f1b6-901f-40e5-b611-37b433c04451"
+            data-id="28"
             data-index="2"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -24022,7 +24022,7 @@ exports[`<SortableList /> > renders renderItem.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-5 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="aa6fd927-6dea-4632-a63c-321f94155fb2"
+            data-id="22"
             data-index="0"
             role="button"
             style="padding: 16px; background-color: rgb(255, 255, 255);"
@@ -24111,7 +24111,7 @@ exports[`<SortableList /> > renders renderItem.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-5 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="2e3668bd-1538-4a76-8588-7d56ef17abae"
+            data-id="23"
             data-index="1"
             role="button"
             style="padding: 16px; background-color: rgb(255, 255, 255);"
@@ -24200,7 +24200,7 @@ exports[`<SortableList /> > renders renderItem.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-5 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="fcf71bda-c7d6-4ee5-8a81-0b4b36ae8e1c"
+            data-id="24"
             data-index="2"
             role="button"
             style="padding: 16px; background-color: rgb(255, 255, 255);"
@@ -24289,7 +24289,7 @@ exports[`<SortableList /> > renders renderItem.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-5 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="233e5e8f-a8b0-4474-ad4d-c832f413d6e0"
+            data-id="25"
             data-index="3"
             role="button"
             style="padding: 16px; background-color: rgb(255, 255, 255);"
@@ -24642,7 +24642,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="75bb2426-a73f-4746-b26d-3d7d6b88e5fa"
+            data-id="19"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -24805,7 +24805,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="3ad5576f-7bec-4dbf-a280-9ff2abd44d19"
+            data-id="20"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -24968,7 +24968,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="ddc053d7-53b1-4f1b-af2f-76c7ead9e928"
+            data-id="21"
             data-index="2"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -25410,7 +25410,6 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
     >
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -25481,7 +25480,6 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -25570,7 +25568,6 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -25641,7 +25638,6 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -25712,7 +25708,6 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -25783,7 +25778,6 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -25854,7 +25848,6 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -25925,7 +25918,6 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -26014,7 +26006,6 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -26085,7 +26076,6 @@ exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -26477,7 +26467,6 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
     >
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -26544,7 +26533,6 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -26629,7 +26617,6 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -26696,7 +26683,6 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -26763,7 +26749,6 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -26830,7 +26815,6 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -26897,7 +26881,6 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -26964,7 +26947,6 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -27049,7 +27031,6 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -27116,7 +27097,6 @@ exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -27475,7 +27455,6 @@ exports[`<SortableTree /> > renders disableDrag.tsx correctly 1`] = `
     >
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -27518,7 +27497,6 @@ exports[`<SortableTree /> > renders disableDrag.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -27579,7 +27557,6 @@ exports[`<SortableTree /> > renders disableDrag.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -27622,7 +27599,6 @@ exports[`<SortableTree /> > renders disableDrag.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -27665,7 +27641,6 @@ exports[`<SortableTree /> > renders disableDrag.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -27708,7 +27683,6 @@ exports[`<SortableTree /> > renders disableDrag.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -27751,7 +27725,6 @@ exports[`<SortableTree /> > renders disableDrag.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -27794,7 +27767,6 @@ exports[`<SortableTree /> > renders disableDrag.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -27855,7 +27827,6 @@ exports[`<SortableTree /> > renders disableDrag.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -27898,7 +27869,6 @@ exports[`<SortableTree /> > renders disableDrag.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -28310,7 +28280,6 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
     >
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -28401,7 +28370,6 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -28510,7 +28478,6 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -28601,7 +28568,6 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -28692,7 +28658,6 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -28783,7 +28748,6 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -28874,7 +28838,6 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -28965,7 +28928,6 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -29074,7 +29036,6 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -29165,7 +29126,6 @@ exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -29577,7 +29537,6 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
     >
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -29644,7 +29603,6 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -29729,7 +29687,6 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -29796,7 +29753,6 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -29863,7 +29819,6 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -29930,7 +29885,6 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -29997,7 +29951,6 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -30064,7 +30017,6 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 0px; transition: transform 200ms ease;"
       >
         <div
@@ -30149,7 +30101,6 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div
@@ -30216,7 +30167,6 @@ exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
       </li>
       <li
         class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        indentationwidth="24"
         style="--spacing: 24px; transition: transform 200ms ease;"
       >
         <div

From d5b9f2eb7554e435865f589f44981e11bf46271c Mon Sep 17 00:00:00 2001
From: rdmclin2 <rdmclin2@gmail.com>
Date: Thu, 7 Sep 2023 19:36:22 +0800
Subject: [PATCH 09/10] =?UTF-8?q?:recycle:=20refactor:=20=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=20uuid=20=E5=9C=A8=E6=B5=8B=E8=AF=95=E7=8E=AF?=
 =?UTF-8?q?=E5=A2=83=E4=B8=8B=E8=BF=94=E5=9B=9E=E7=A1=AE=E5=AE=9A=E7=9A=84?=
 =?UTF-8?q?=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/SortableList/container/StoreUpdater.tsx |    2 +-
 src/SortableList/store/keyManagerReducer.ts |    2 +-
 src/SortableList/utils/index.tsx            |    8 +-
 tests/__snapshots__/demo.test.tsx.snap      | 7076 +------------------
 4 files changed, 71 insertions(+), 7017 deletions(-)

diff --git a/src/SortableList/container/StoreUpdater.tsx b/src/SortableList/container/StoreUpdater.tsx
index 6c9f9281..7f40d2b1 100644
--- a/src/SortableList/container/StoreUpdater.tsx
+++ b/src/SortableList/container/StoreUpdater.tsx
@@ -34,7 +34,7 @@ const StoreUpdater = forwardRef(
         value.forEach((__, index) => {
           const key = draft[index];
           if (key === undefined) {
-            draft[index] = getUUID();
+            draft[index] = getUUID(index);
           }
         });
         return draft;
diff --git a/src/SortableList/store/keyManagerReducer.ts b/src/SortableList/store/keyManagerReducer.ts
index 487be858..12979fa4 100644
--- a/src/SortableList/store/keyManagerReducer.ts
+++ b/src/SortableList/store/keyManagerReducer.ts
@@ -38,7 +38,7 @@ export const keyManagerReducer = (value: any[], payload: SortableListDispatchPay
     case 'addItem':
       const { index = value.length } = payload;
       return produce(value, (draft) => {
-        draft.splice(index, 0, getUUID());
+        draft.splice(index, 0, getUUID(index));
         return draft;
       });
 
diff --git a/src/SortableList/utils/index.tsx b/src/SortableList/utils/index.tsx
index 9129f193..ec826776 100644
--- a/src/SortableList/utils/index.tsx
+++ b/src/SortableList/utils/index.tsx
@@ -4,8 +4,6 @@ import { useEffect, useState } from 'react';
 
 const defaultInitializer = (index: number) => index;
 
-const env = this === window ? 'browser' : 'node';
-
 export function createRange<T = number>(
   length: number,
   initializer: (index: number) => any = defaultInitializer,
@@ -67,8 +65,6 @@ export const getIndexOfActiveItem = (list: any[], id?: UniqueIdentifier) => {
   return id ? list.findIndex((item) => item === id) : -1;
 };
 
-let id = 0;
-
-export const getUUID = () => {
-  return env === 'browser' ? crypto.randomUUID() : id++;
+export const getUUID = (index) => {
+  return process.env.NODE_ENV === 'test' ? `test-${index}` : crypto.randomUUID();
 };
diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap
index 58a5611b..a499311e 100644
--- a/tests/__snapshots__/demo.test.tsx.snap
+++ b/tests/__snapshots__/demo.test.tsx.snap
@@ -2648,7 +2648,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="16"
+          data-id="test-0"
           data-index="0"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -2682,7 +2682,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-0-16"
+                id="column-list-0-test-0"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -2890,7 +2890,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="17"
+          data-id="test-1"
           data-index="1"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -2924,7 +2924,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-1-17"
+                id="column-list-1-test-1"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -3132,7 +3132,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="18"
+          data-id="test-2"
           data-index="2"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -3166,7 +3166,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-2-18"
+                id="column-list-2-test-2"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -3720,7 +3720,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="12"
+          data-id="test-0"
           data-index="0"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -3754,7 +3754,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-0-12"
+                id="column-list-0-test-0"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -3950,7 +3950,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="13"
+          data-id="test-1"
           data-index="1"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -3984,7 +3984,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-1-13"
+                id="column-list-1-test-1"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -4180,7 +4180,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="14"
+          data-id="test-2"
           data-index="2"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -4214,7 +4214,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-2-14"
+                id="column-list-2-test-2"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -4410,7 +4410,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="15"
+          data-id="test-3"
           data-index="3"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -4444,7 +4444,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-3-15"
+                id="column-list-3-test-3"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -4947,7 +4947,7 @@ exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="9"
+          data-id="test-0"
           data-index="0"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -4981,7 +4981,7 @@ exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-0-9"
+                id="column-list-0-test-0"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -5160,7 +5160,7 @@ exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="10"
+          data-id="test-1"
           data-index="1"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -5194,7 +5194,7 @@ exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-1-10"
+                id="column-list-1-test-1"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -5373,7 +5373,7 @@ exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-7 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="11"
+          data-id="test-2"
           data-index="2"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -5407,7 +5407,7 @@ exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-2-11"
+                id="column-list-2-test-2"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -5950,7 +5950,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="6"
+          data-id="test-0"
           data-index="0"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -5984,7 +5984,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-0-6"
+                id="column-list-0-test-0"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -6163,7 +6163,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="7"
+          data-id="test-1"
           data-index="1"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -6197,7 +6197,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-1-7"
+                id="column-list-1-test-1"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -6376,7 +6376,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-8 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="8"
+          data-id="test-2"
           data-index="2"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -6410,7 +6410,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-2-8"
+                id="column-list-2-test-2"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -6960,7 +6960,7 @@ exports[`<ColumnList /> > renders customCreate.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-9 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="3"
+          data-id="test-0"
           data-index="0"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -6994,7 +6994,7 @@ exports[`<ColumnList /> > renders customCreate.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-15"
-                id="column-list-0-3"
+                id="column-list-0-test-0"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -7173,7 +7173,7 @@ exports[`<ColumnList /> > renders customCreate.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-9 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="4"
+          data-id="test-1"
           data-index="1"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -7207,7 +7207,7 @@ exports[`<ColumnList /> > renders customCreate.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-15"
-                id="column-list-1-4"
+                id="column-list-1-test-1"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -7386,7 +7386,7 @@ exports[`<ColumnList /> > renders customCreate.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-9 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="5"
+          data-id="test-2"
           data-index="2"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -7420,7 +7420,7 @@ exports[`<ColumnList /> > renders customCreate.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-15"
-                id="column-list-2-5"
+                id="column-list-2-test-2"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -8048,7 +8048,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="0"
+          data-id="test-0"
           data-index="0"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -8082,7 +8082,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-0-null"
+                id="column-list-0-test-0"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -8090,7 +8090,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
               />
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-0-null"
+                id="column-list-0-test-0"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -8145,7 +8145,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="1"
+          data-id="test-1"
           data-index="1"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -8179,7 +8179,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-1-1"
+                id="column-list-1-test-1"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -8187,7 +8187,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
               />
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-1-1"
+                id="column-list-1-test-1"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -8242,7 +8242,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="2"
+          data-id="test-2"
           data-index="2"
           role="button"
           style="background-color: rgb(255, 255, 255);"
@@ -8276,7 +8276,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-2-2"
+                id="column-list-2-test-2"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -8284,7 +8284,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
               />
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-2-2"
+                id="column-list-2-test-2"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -19757,7 +19757,7 @@ exports[`<SortableList /> > renders Basic.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="43"
+            data-id="test-0"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -19842,7 +19842,7 @@ exports[`<SortableList /> > renders Basic.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="44"
+            data-id="test-1"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -20175,7 +20175,7 @@ exports[`<SortableList /> > renders controlled.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="41"
+            data-id="test-0"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -20260,7 +20260,7 @@ exports[`<SortableList /> > renders controlled.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="42"
+            data-id="test-1"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -20625,7 +20625,7 @@ exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="39"
+            data-id="test-0"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -20708,7 +20708,7 @@ exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="40"
+            data-id="test-1"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -21156,7 +21156,7 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="35"
+          data-id="test-0"
           data-index="0"
           role="button"
           style="padding: 24px; background: pink; color: rgb(135, 74, 74); border-radius: 16px; box-shadow: none; background-color: rgb(255, 255, 255);"
@@ -21241,7 +21241,7 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="36"
+          data-id="test-1"
           data-index="1"
           role="button"
           style="padding: 24px; background: pink; color: rgb(135, 74, 74); border-radius: 16px; box-shadow: none; background-color: rgb(255, 255, 255);"
@@ -21326,7 +21326,7 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="37"
+          data-id="test-2"
           data-index="2"
           role="button"
           style="padding: 24px; background: pink; color: rgb(135, 74, 74); border-radius: 16px; box-shadow: none; background-color: rgb(255, 255, 255);"
@@ -21411,7 +21411,7 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
           aria-roledescription="sortable"
           class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
           data-cypress="draggable-item"
-          data-id="38"
+          data-id="test-3"
           data-index="3"
           role="button"
           style="padding: 24px; background: pink; color: rgb(135, 74, 74); border-radius: 16px; box-shadow: none; background-color: rgb(255, 255, 255);"
@@ -21768,7 +21768,7 @@ exports[`<SortableList /> > renders provider.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="32"
+            data-id="test-0"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -21931,7 +21931,7 @@ exports[`<SortableList /> > renders provider.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="33"
+            data-id="test-1"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -22094,7 +22094,7 @@ exports[`<SortableList /> > renders provider.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="34"
+            data-id="test-2"
             data-index="2"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -22575,7 +22575,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="29"
+            data-id="test-0"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -22738,7 +22738,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="30"
+            data-id="test-1"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -22901,7 +22901,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="31"
+            data-id="test-2"
             data-index="2"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -23328,7 +23328,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="26"
+            data-id="test-0"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -23491,7 +23491,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="27"
+            data-id="test-1"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -23654,7 +23654,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="28"
+            data-id="test-2"
             data-index="2"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -24022,7 +24022,7 @@ exports[`<SortableList /> > renders renderItem.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-5 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="22"
+            data-id="test-0"
             data-index="0"
             role="button"
             style="padding: 16px; background-color: rgb(255, 255, 255);"
@@ -24111,7 +24111,7 @@ exports[`<SortableList /> > renders renderItem.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-5 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="23"
+            data-id="test-1"
             data-index="1"
             role="button"
             style="padding: 16px; background-color: rgb(255, 255, 255);"
@@ -24200,7 +24200,7 @@ exports[`<SortableList /> > renders renderItem.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-5 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="24"
+            data-id="test-2"
             data-index="2"
             role="button"
             style="padding: 16px; background-color: rgb(255, 255, 255);"
@@ -24289,7 +24289,7 @@ exports[`<SortableList /> > renders renderItem.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-5 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="25"
+            data-id="test-3"
             data-index="3"
             role="button"
             style="padding: 16px; background-color: rgb(255, 255, 255);"
@@ -24642,7 +24642,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="19"
+            data-id="test-0"
             data-index="0"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -24805,7 +24805,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="20"
+            data-id="test-1"
             data-index="1"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -24968,7 +24968,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
             aria-roledescription="sortable"
             class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
-            data-id="21"
+            data-id="test-2"
             data-index="2"
             role="button"
             style="background-color: rgb(255, 255, 255);"
@@ -25142,6945 +25142,3 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
   </div>
 </div>
 `;
-
-exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.emotion-1 .studio-sortable-tree-node {
-  box-sizing: border-box;
-  padding-left: var(--spacing);
-  list-style: none;
-}
-
-.emotion-1 .studio-sortable-tree-node-clone {
-  display: inline-block;
-  padding: 0;
-  padding-top: 5px;
-  padding-left: 10px;
-  pointer-events: none;
-}
-
-.emotion-1 .studio-sortable-tree-node-clone .studio-sortable-tree-node-body {
-  padding-right: 24px;
-  background-color: #ffffff;
-  border: 1px solid #dedede;
-  border-radius: 4px;
-  box-shadow: 0 15px 15px 0 rgba(34, 33, 81, 0.1);
-}
-
-.emotion-1 .studio-sortable-tree-node:hover .studio-sortable-tree-node-handle {
-  opacity: 1;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator {
-  position: relative;
-  z-index: 1;
-  margin-bottom: -1px;
-  opacity: 1;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body {
-  position: relative;
-  height: 4px;
-  padding: 0;
-  background-color: #56a1f8;
-  border-color: #1677ff;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body::before {
-  position: absolute;
-  top: -4px;
-  left: -8px;
-  display: block;
-  width: 12px;
-  height: 12px;
-  background-color: #fff;
-  border: 1px solid #1677ff;
-  border-radius: 50%;
-  content: '';
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body>* {
-  height: 0;
-  opacity: 0;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost:not(.studio-sortable-tree-node-indicator) {
-  opacity: 0.5;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost .studio-sortable-tree-node-body>* {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.emotion-1 .studio-sortable-tree-node-body {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 2px;
-  background-color: rgba(0, 0, 0, 0.02);
-  border-radius: 4px;
-}
-
-.emotion-1 .studio-sortable-tree-node-content {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.emotion-1 .studio-sortable-tree-node-count {
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: #fff;
-  font-weight: 600;
-  font-size: 14px;
-  background-color: #1677ff;
-  border-radius: 50%;
-}
-
-.emotion-1 .disableSelection .studio-sortable-tree-node-content,
-.emotion-1 .clone .studio-sortable-tree-node-content,
-.emotion-1 .disableSelection .studio-sortable-tree-node-count,
-.emotion-1 .clone .studio-sortable-tree-node-count {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.emotion-2 {
-  margin-bottom: 4px;
-}
-
-.emotion-2:hover .studio-sortable-tree-node-handle,
-.emotion-2:hover .studio-sortable-tree-node-remove {
-  opacity: 1;
-}
-
-.emotion-3 {
-  position: absolute;
-  left: -13px;
-  opacity: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-3:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-3:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-4 {
-  opacity: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-4:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-4:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-7 svg {
-  -webkit-transition: -webkit-transform 250ms ease;
-  transition: transform 250ms ease;
-}
-
-.emotion-7:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-7:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-34 {
-  height: 24px;
-  padding-block: 2px;
-  margin-top: 4px;
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-}
-
-.emotion-34:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background: rgba(0, 0, 0, 0.06)!important;
-  border-color: transparent!important;
-}
-
-.emotion-34:focus {
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-  border-color: #1677ff!important;
-}
-
-<div>
-  <div
-    style="width: 340px; padding: 0px 12px;"
-  >
-    <div
-      class="layoutkit-flexbox emotion-0 emotion-1"
-    >
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-21"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <input
-              class="studio-input"
-              type="text"
-              value="Home"
-            />
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-21"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 70 41"
-                width="10"
-              >
-                <path
-                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <input
-              class="studio-input"
-              type="text"
-              value="Collections"
-            />
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-21"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <input
-              class="studio-input"
-              type="text"
-              value=""
-            />
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-21"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <input
-              class="studio-input"
-              type="text"
-              value=""
-            />
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-21"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <input
-              class="studio-input"
-              type="text"
-              value=""
-            />
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-21"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <input
-              class="studio-input"
-              type="text"
-              value=""
-            />
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-21"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <input
-              class="studio-input"
-              type="text"
-              value=""
-            />
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-21"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 70 41"
-                width="10"
-              >
-                <path
-                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <input
-              class="studio-input"
-              type="text"
-              value=""
-            />
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-21"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <input
-              class="studio-input"
-              type="text"
-              value=""
-            />
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-21"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <input
-              class="studio-input"
-              type="text"
-              value=""
-            />
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <button
-        class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-btn-solid studio-sortable-tree-btn-add emotion-34"
-        type="button"
-      >
-        <span
-          class="studio-btn-icon"
-        >
-          <span
-            aria-label="plus"
-            class="anticon anticon-plus"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="plus"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-              />
-              <path
-                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
-              />
-            </svg>
-          </span>
-        </span>
-        <span>
-          添加一项
-        </span>
-      </button>
-      <div
-        id="DndDescribedBy-21"
-        style="display: none;"
-      >
-        
-    To pick up a draggable item, press the space bar.
-    While dragging, use the arrow keys to move the item.
-    Press space again to drop the item in its new position, or press escape to cancel.
-  
-      </div>
-      <div
-        aria-atomic="true"
-        aria-live="assertive"
-        id="DndLiveRegion-21"
-        role="status"
-        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.emotion-1 .studio-sortable-tree-node {
-  box-sizing: border-box;
-  padding-left: var(--spacing);
-  list-style: none;
-}
-
-.emotion-1 .studio-sortable-tree-node-clone {
-  display: inline-block;
-  padding: 0;
-  padding-top: 5px;
-  padding-left: 10px;
-  pointer-events: none;
-}
-
-.emotion-1 .studio-sortable-tree-node-clone .studio-sortable-tree-node-body {
-  padding-right: 24px;
-  background-color: #ffffff;
-  border: 1px solid #dedede;
-  border-radius: 4px;
-  box-shadow: 0 15px 15px 0 rgba(34, 33, 81, 0.1);
-}
-
-.emotion-1 .studio-sortable-tree-node:hover .studio-sortable-tree-node-handle {
-  opacity: 1;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator {
-  position: relative;
-  z-index: 1;
-  margin-bottom: -1px;
-  opacity: 1;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body {
-  position: relative;
-  height: 4px;
-  padding: 0;
-  background-color: #56a1f8;
-  border-color: #1677ff;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body::before {
-  position: absolute;
-  top: -4px;
-  left: -8px;
-  display: block;
-  width: 12px;
-  height: 12px;
-  background-color: #fff;
-  border: 1px solid #1677ff;
-  border-radius: 50%;
-  content: '';
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body>* {
-  height: 0;
-  opacity: 0;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost:not(.studio-sortable-tree-node-indicator) {
-  opacity: 0.5;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost .studio-sortable-tree-node-body>* {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.emotion-1 .studio-sortable-tree-node-body {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 2px;
-  background-color: rgba(0, 0, 0, 0.02);
-  border-radius: 4px;
-}
-
-.emotion-1 .studio-sortable-tree-node-content {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.emotion-1 .studio-sortable-tree-node-count {
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: #fff;
-  font-weight: 600;
-  font-size: 14px;
-  background-color: #1677ff;
-  border-radius: 50%;
-}
-
-.emotion-1 .disableSelection .studio-sortable-tree-node-content,
-.emotion-1 .clone .studio-sortable-tree-node-content,
-.emotion-1 .disableSelection .studio-sortable-tree-node-count,
-.emotion-1 .clone .studio-sortable-tree-node-count {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.emotion-2 {
-  margin-bottom: 4px;
-}
-
-.emotion-2:hover .studio-sortable-tree-node-handle,
-.emotion-2:hover .studio-sortable-tree-node-remove {
-  opacity: 1;
-}
-
-.emotion-3 {
-  position: absolute;
-  left: -13px;
-  opacity: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-3:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-3:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-4 {
-  opacity: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-4:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-4:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-7 svg {
-  -webkit-transition: -webkit-transform 250ms ease;
-  transition: transform 250ms ease;
-}
-
-.emotion-7:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-7:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-34 {
-  height: 24px;
-  padding-block: 2px;
-  margin-top: 4px;
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-}
-
-.emotion-34:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background: rgba(0, 0, 0, 0.06)!important;
-  border-color: transparent!important;
-}
-
-.emotion-34:focus {
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-  border-color: #1677ff!important;
-}
-
-<div>
-  <div
-    style="width: 340px;"
-  >
-    <div
-      class="layoutkit-flexbox emotion-0 emotion-1"
-    >
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-20"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            1
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-20"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 70 41"
-                width="10"
-              >
-                <path
-                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            2
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-20"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Spring
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-20"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Summer
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-20"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Fall
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-20"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Winter
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-20"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            About Us
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-20"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 70 41"
-                width="10"
-              >
-                <path
-                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            My Account
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-20"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Addresses
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-20"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Order History
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <button
-        class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-btn-solid studio-sortable-tree-btn-add emotion-34"
-        type="button"
-      >
-        <span
-          class="studio-btn-icon"
-        >
-          <span
-            aria-label="plus"
-            class="anticon anticon-plus"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="plus"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-              />
-              <path
-                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
-              />
-            </svg>
-          </span>
-        </span>
-        <span>
-          添加一项
-        </span>
-      </button>
-      <div
-        id="DndDescribedBy-20"
-        style="display: none;"
-      >
-        
-    To pick up a draggable item, press the space bar.
-    While dragging, use the arrow keys to move the item.
-    Press space again to drop the item in its new position, or press escape to cancel.
-  
-      </div>
-      <div
-        aria-atomic="true"
-        aria-live="assertive"
-        id="DndLiveRegion-20"
-        role="status"
-        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<SortableTree /> > renders disableDrag.tsx correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.emotion-1 .studio-sortable-tree-node {
-  box-sizing: border-box;
-  padding-left: var(--spacing);
-  list-style: none;
-}
-
-.emotion-1 .studio-sortable-tree-node-clone {
-  display: inline-block;
-  padding: 0;
-  padding-top: 5px;
-  padding-left: 10px;
-  pointer-events: none;
-}
-
-.emotion-1 .studio-sortable-tree-node-clone .studio-sortable-tree-node-body {
-  padding-right: 24px;
-  background-color: #ffffff;
-  border: 1px solid #dedede;
-  border-radius: 4px;
-  box-shadow: 0 15px 15px 0 rgba(34, 33, 81, 0.1);
-}
-
-.emotion-1 .studio-sortable-tree-node:hover .studio-sortable-tree-node-handle {
-  opacity: 1;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator {
-  position: relative;
-  z-index: 1;
-  margin-bottom: -1px;
-  opacity: 1;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body {
-  position: relative;
-  height: 4px;
-  padding: 0;
-  background-color: #56a1f8;
-  border-color: #1677ff;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body::before {
-  position: absolute;
-  top: -4px;
-  left: -8px;
-  display: block;
-  width: 12px;
-  height: 12px;
-  background-color: #fff;
-  border: 1px solid #1677ff;
-  border-radius: 50%;
-  content: '';
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body>* {
-  height: 0;
-  opacity: 0;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost:not(.studio-sortable-tree-node-indicator) {
-  opacity: 0.5;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost .studio-sortable-tree-node-body>* {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.emotion-1 .studio-sortable-tree-node-body {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 2px;
-  background-color: rgba(0, 0, 0, 0.02);
-  border-radius: 4px;
-}
-
-.emotion-1 .studio-sortable-tree-node-content {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.emotion-1 .studio-sortable-tree-node-count {
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: #fff;
-  font-weight: 600;
-  font-size: 14px;
-  background-color: #1677ff;
-  border-radius: 50%;
-}
-
-.emotion-1 .disableSelection .studio-sortable-tree-node-content,
-.emotion-1 .clone .studio-sortable-tree-node-content,
-.emotion-1 .disableSelection .studio-sortable-tree-node-count,
-.emotion-1 .clone .studio-sortable-tree-node-count {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.emotion-2 {
-  margin-bottom: 4px;
-}
-
-.emotion-2:hover .studio-sortable-tree-node-handle,
-.emotion-2:hover .studio-sortable-tree-node-remove {
-  opacity: 1;
-}
-
-.emotion-3 {
-  opacity: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-3:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-3:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-5 svg {
-  -webkit-transition: -webkit-transform 250ms ease;
-  transition: transform 250ms ease;
-}
-
-.emotion-5:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-5:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-24 {
-  height: 24px;
-  padding-block: 2px;
-  margin-top: 4px;
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-}
-
-.emotion-24:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background: rgba(0, 0, 0, 0.06)!important;
-  border-color: transparent!important;
-}
-
-.emotion-24:focus {
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-  border-color: #1677ff!important;
-}
-
-<div>
-  <div
-    style="width: 340px;"
-  >
-    <div
-      class="layoutkit-flexbox emotion-0 emotion-1"
-    >
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            1
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 70 41"
-                width="10"
-              >
-                <path
-                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            2
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Spring
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Summer
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Fall
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Winter
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            About Us
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 70 41"
-                width="10"
-              >
-                <path
-                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            My Account
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Addresses
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Order History
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <button
-        class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-btn-solid studio-sortable-tree-btn-add emotion-24"
-        type="button"
-      >
-        <span
-          class="studio-btn-icon"
-        >
-          <span
-            aria-label="plus"
-            class="anticon anticon-plus"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="plus"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-              />
-              <path
-                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
-              />
-            </svg>
-          </span>
-        </span>
-        <span>
-          添加一项
-        </span>
-      </button>
-      <div
-        id="DndDescribedBy-19"
-        style="display: none;"
-      >
-        
-    To pick up a draggable item, press the space bar.
-    While dragging, use the arrow keys to move the item.
-    Press space again to drop the item in its new position, or press escape to cancel.
-  
-      </div>
-      <div
-        aria-atomic="true"
-        aria-live="assertive"
-        id="DndLiveRegion-19"
-        role="status"
-        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.emotion-1 .studio-sortable-tree-node {
-  box-sizing: border-box;
-  padding-left: var(--spacing);
-  list-style: none;
-}
-
-.emotion-1 .studio-sortable-tree-node-clone {
-  display: inline-block;
-  padding: 0;
-  padding-top: 5px;
-  padding-left: 10px;
-  pointer-events: none;
-}
-
-.emotion-1 .studio-sortable-tree-node-clone .studio-sortable-tree-node-body {
-  padding-right: 24px;
-  background-color: #ffffff;
-  border: 1px solid #dedede;
-  border-radius: 4px;
-  box-shadow: 0 15px 15px 0 rgba(34, 33, 81, 0.1);
-}
-
-.emotion-1 .studio-sortable-tree-node:hover .studio-sortable-tree-node-handle {
-  opacity: 1;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator {
-  position: relative;
-  z-index: 1;
-  margin-bottom: -1px;
-  opacity: 1;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body {
-  position: relative;
-  height: 4px;
-  padding: 0;
-  background-color: #56a1f8;
-  border-color: #1677ff;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body::before {
-  position: absolute;
-  top: -4px;
-  left: -8px;
-  display: block;
-  width: 12px;
-  height: 12px;
-  background-color: #fff;
-  border: 1px solid #1677ff;
-  border-radius: 50%;
-  content: '';
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body>* {
-  height: 0;
-  opacity: 0;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost:not(.studio-sortable-tree-node-indicator) {
-  opacity: 0.5;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost .studio-sortable-tree-node-body>* {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.emotion-1 .studio-sortable-tree-node-body {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 2px;
-  background-color: rgba(0, 0, 0, 0.02);
-  border-radius: 4px;
-}
-
-.emotion-1 .studio-sortable-tree-node-content {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.emotion-1 .studio-sortable-tree-node-count {
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: #fff;
-  font-weight: 600;
-  font-size: 14px;
-  background-color: #1677ff;
-  border-radius: 50%;
-}
-
-.emotion-1 .disableSelection .studio-sortable-tree-node-content,
-.emotion-1 .clone .studio-sortable-tree-node-content,
-.emotion-1 .disableSelection .studio-sortable-tree-node-count,
-.emotion-1 .clone .studio-sortable-tree-node-count {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.emotion-2 {
-  margin-bottom: 4px;
-}
-
-.emotion-2:hover .studio-sortable-tree-node-handle,
-.emotion-2:hover .studio-sortable-tree-node-remove {
-  opacity: 1;
-}
-
-.emotion-3 {
-  position: absolute;
-  left: -13px;
-  opacity: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-3:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-3:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 4px;
-}
-
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-5:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-5:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-6 {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.06);
-}
-
-.emotion-7 {
-  opacity: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-7:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-7:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-10 svg {
-  -webkit-transition: -webkit-transform 250ms ease;
-  transition: transform 250ms ease;
-}
-
-.emotion-10:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-10:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-64 {
-  height: 24px;
-  padding-block: 2px;
-  margin-top: 4px;
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-}
-
-.emotion-64:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background: rgba(0, 0, 0, 0.06)!important;
-  border-color: transparent!important;
-}
-
-.emotion-64:focus {
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-  border-color: #1677ff!important;
-}
-
-<div>
-  <div
-    style="width: 340px; padding: 0px 12px;"
-  >
-    <div
-      class="layoutkit-flexbox emotion-0 emotion-1"
-    >
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-18"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <div
-              class="layoutkit-flexbox emotion-4"
-            >
-              <div>
-                <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <div
-                      class="emotion-6"
-                    />
-                  </span>
-                </button>
-              </div>
-              <input
-                class="studio-input studio-input-sm"
-                id="1"
-                tabindex="10"
-                type="text"
-                value="首页"
-              />
-            </div>
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-18"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-10"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 70 41"
-                width="10"
-              >
-                <path
-                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <div
-              class="layoutkit-flexbox emotion-4"
-            >
-              <div>
-                <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <div
-                      class="emotion-6"
-                    />
-                  </span>
-                </button>
-              </div>
-              <input
-                class="studio-input studio-input-sm"
-                id="2"
-                tabindex="10"
-                type="text"
-                value="Collections"
-              />
-            </div>
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-18"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <div
-              class="layoutkit-flexbox emotion-4"
-            >
-              <div>
-                <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <div
-                      class="emotion-6"
-                    />
-                  </span>
-                </button>
-              </div>
-              <input
-                class="studio-input studio-input-sm"
-                id="3"
-                tabindex="10"
-                type="text"
-                value="Spring"
-              />
-            </div>
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-18"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <div
-              class="layoutkit-flexbox emotion-4"
-            >
-              <div>
-                <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <div
-                      class="emotion-6"
-                    />
-                  </span>
-                </button>
-              </div>
-              <input
-                class="studio-input studio-input-sm"
-                id="Summer"
-                tabindex="10"
-                type="text"
-                value="Summer"
-              />
-            </div>
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-18"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <div
-              class="layoutkit-flexbox emotion-4"
-            >
-              <div>
-                <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <div
-                      class="emotion-6"
-                    />
-                  </span>
-                </button>
-              </div>
-              <input
-                class="studio-input studio-input-sm"
-                id="Fall"
-                tabindex="10"
-                type="text"
-                value="Fall"
-              />
-            </div>
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-18"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <div
-              class="layoutkit-flexbox emotion-4"
-            >
-              <div>
-                <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <div
-                      class="emotion-6"
-                    />
-                  </span>
-                </button>
-              </div>
-              <input
-                class="studio-input studio-input-sm"
-                id="Winter"
-                tabindex="10"
-                type="text"
-                value="Winter"
-              />
-            </div>
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-18"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <div
-              class="layoutkit-flexbox emotion-4"
-            >
-              <div>
-                <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <div
-                      class="emotion-6"
-                    />
-                  </span>
-                </button>
-              </div>
-              <input
-                class="studio-input studio-input-sm"
-                id="About Us"
-                tabindex="10"
-                type="text"
-                value="About Us"
-              />
-            </div>
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-18"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-10"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 70 41"
-                width="10"
-              >
-                <path
-                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <div
-              class="layoutkit-flexbox emotion-4"
-            >
-              <div>
-                <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <div
-                      class="emotion-6"
-                    />
-                  </span>
-                </button>
-              </div>
-              <input
-                class="studio-input studio-input-sm"
-                id="My Account"
-                tabindex="10"
-                type="text"
-                value="My Account"
-              />
-            </div>
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-18"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <div
-              class="layoutkit-flexbox emotion-4"
-            >
-              <div>
-                <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <div
-                      class="emotion-6"
-                    />
-                  </span>
-                </button>
-              </div>
-              <input
-                class="studio-input studio-input-sm"
-                id="Addresses"
-                tabindex="10"
-                type="text"
-                value="Addresses"
-              />
-            </div>
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-18"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            <div
-              class="layoutkit-flexbox emotion-4"
-            >
-              <div>
-                <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
-                  type="button"
-                >
-                  <span
-                    class="studio-btn-icon"
-                  >
-                    <div
-                      class="emotion-6"
-                    />
-                  </span>
-                </button>
-              </div>
-              <input
-                class="studio-input studio-input-sm"
-                id="Order History"
-                tabindex="10"
-                type="text"
-                value="Order History"
-              />
-            </div>
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <button
-        class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-btn-solid studio-sortable-tree-btn-add emotion-64"
-        type="button"
-      >
-        <span
-          class="studio-btn-icon"
-        >
-          <span
-            aria-label="plus"
-            class="anticon anticon-plus"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="plus"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-              />
-              <path
-                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
-              />
-            </svg>
-          </span>
-        </span>
-        <span>
-          添加一项
-        </span>
-      </button>
-      <div
-        id="DndDescribedBy-18"
-        style="display: none;"
-      >
-        
-    To pick up a draggable item, press the space bar.
-    While dragging, use the arrow keys to move the item.
-    Press space again to drop the item in its new position, or press escape to cancel.
-  
-      </div>
-      <div
-        aria-atomic="true"
-        aria-live="assertive"
-        id="DndLiveRegion-18"
-        role="status"
-        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.emotion-1 .studio-sortable-tree-node {
-  box-sizing: border-box;
-  padding-left: var(--spacing);
-  list-style: none;
-}
-
-.emotion-1 .studio-sortable-tree-node-clone {
-  display: inline-block;
-  padding: 0;
-  padding-top: 5px;
-  padding-left: 10px;
-  pointer-events: none;
-}
-
-.emotion-1 .studio-sortable-tree-node-clone .studio-sortable-tree-node-body {
-  padding-right: 24px;
-  background-color: #ffffff;
-  border: 1px solid #dedede;
-  border-radius: 4px;
-  box-shadow: 0 15px 15px 0 rgba(34, 33, 81, 0.1);
-}
-
-.emotion-1 .studio-sortable-tree-node:hover .studio-sortable-tree-node-handle {
-  opacity: 1;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator {
-  position: relative;
-  z-index: 1;
-  margin-bottom: -1px;
-  opacity: 1;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body {
-  position: relative;
-  height: 4px;
-  padding: 0;
-  background-color: #56a1f8;
-  border-color: #1677ff;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body::before {
-  position: absolute;
-  top: -4px;
-  left: -8px;
-  display: block;
-  width: 12px;
-  height: 12px;
-  background-color: #fff;
-  border: 1px solid #1677ff;
-  border-radius: 50%;
-  content: '';
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body>* {
-  height: 0;
-  opacity: 0;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost:not(.studio-sortable-tree-node-indicator) {
-  opacity: 0.5;
-}
-
-.emotion-1 .studio-sortable-tree-node-ghost .studio-sortable-tree-node-body>* {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.emotion-1 .studio-sortable-tree-node-body {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 2px;
-  background-color: rgba(0, 0, 0, 0.02);
-  border-radius: 4px;
-}
-
-.emotion-1 .studio-sortable-tree-node-content {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.emotion-1 .studio-sortable-tree-node-count {
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: #fff;
-  font-weight: 600;
-  font-size: 14px;
-  background-color: #1677ff;
-  border-radius: 50%;
-}
-
-.emotion-1 .disableSelection .studio-sortable-tree-node-content,
-.emotion-1 .clone .studio-sortable-tree-node-content,
-.emotion-1 .disableSelection .studio-sortable-tree-node-count,
-.emotion-1 .clone .studio-sortable-tree-node-count {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.emotion-2 {
-  margin-bottom: 4px;
-}
-
-.emotion-2:hover .studio-sortable-tree-node-handle,
-.emotion-2:hover .studio-sortable-tree-node-remove {
-  opacity: 1;
-}
-
-.emotion-3 {
-  position: absolute;
-  left: -13px;
-  opacity: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-3:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-3:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-4 {
-  opacity: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-4:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-4:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-.emotion-7 svg {
-  -webkit-transition: -webkit-transform 250ms ease;
-  transition: transform 250ms ease;
-}
-
-.emotion-7:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-}
-
-.emotion-7:active {
-  scale: 0.8;
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-34 {
-  height: 24px;
-  padding-block: 2px;
-  margin-top: 4px;
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-}
-
-.emotion-34:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background: rgba(0, 0, 0, 0.06)!important;
-  border-color: transparent!important;
-}
-
-.emotion-34:focus {
-  color: rgba(0, 0, 0, 0.65);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-  border-color: #1677ff!important;
-}
-
-<div>
-  <div
-    style="width: 340px;"
-  >
-    <div
-      class="layoutkit-flexbox emotion-0 emotion-1"
-    >
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-17"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            1
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-17"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 70 41"
-                width="10"
-              >
-                <path
-                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            2
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-17"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Spring
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-17"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Summer
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-17"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Fall
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-17"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Winter
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-17"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            About Us
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 0px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-17"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-7"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 70 41"
-                width="10"
-              >
-                <path
-                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            My Account
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-17"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Addresses
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <li
-        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
-        style="--spacing: 24px; transition: transform 200ms ease;"
-      >
-        <div
-          class="studio-sortable-tree-node-body"
-        >
-          <button
-            aria-describedby="DndDescribedBy-17"
-            aria-disabled="false"
-            aria-roledescription="sortable"
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
-            role="button"
-            style="width: 12px;"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <svg
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="16"
-              >
-                <path
-                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
-                />
-              </svg>
-            </span>
-          </button>
-          <span
-            class="studio-sortable-tree-node-content"
-          >
-            Order History
-          </span>
-          <button
-            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
-            type="button"
-          >
-            <span
-              class="studio-btn-icon"
-            >
-              <span
-                aria-label="delete"
-                class="anticon anticon-delete"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="delete"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </li>
-      <button
-        class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-btn-solid studio-sortable-tree-btn-add emotion-34"
-        type="button"
-      >
-        <span
-          class="studio-btn-icon"
-        >
-          <span
-            aria-label="plus"
-            class="anticon anticon-plus"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="plus"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-              />
-              <path
-                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
-              />
-            </svg>
-          </span>
-        </span>
-        <span>
-          添加一项
-        </span>
-      </button>
-      <div
-        id="DndDescribedBy-17"
-        style="display: none;"
-      >
-        
-    To pick up a draggable item, press the space bar.
-    While dragging, use the arrow keys to move the item.
-    Press space again to drop the item in its new position, or press escape to cancel.
-  
-      </div>
-      <div
-        aria-atomic="true"
-        aria-live="assertive"
-        id="DndLiveRegion-17"
-        role="status"
-        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TipGuide /> > renders controlled.tsx correctly 1`] = `
-.emotion-0 {
-  position: relative;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.emotion-1 {
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translate(-50%);
-  -moz-transform: translate(-50%);
-  -ms-transform: translate(-50%);
-  transform: translate(-50%);
-}
-
-<div>
-  <div
-    class="studio-space studio-space-horizontal studio-space-align-center"
-  >
-    <div
-      class="studio-space-item"
-      style="margin-right: 8px;"
-    >
-      <button
-        class="studio-btn studio-btn-default"
-        type="button"
-      >
-        <span>
-          Open
-        </span>
-      </button>
-    </div>
-    <div
-      class="studio-space-item"
-      style="margin-right: 8px;"
-    >
-      <button
-        class="studio-btn studio-btn-default"
-        type="button"
-      >
-        <span>
-          Close
-        </span>
-      </button>
-    </div>
-    <div
-      class="studio-space-item"
-    >
-      <div
-        class="studio-tip-guide emotion-0"
-      >
-        <div
-          class="studio-list studio-list-split"
-        >
-          <div
-            class="studio-spin-nested-loading"
-          >
-            <div
-              class="studio-spin-container"
-            >
-              <div
-                class="studio-list-empty-text"
-              >
-                <div
-                  class="studio-empty studio-empty-normal"
-                >
-                  <div
-                    class="studio-empty-image"
-                  >
-                    <svg
-                      height="41"
-                      viewBox="0 0 64 41"
-                      width="64"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <g
-                        fill="none"
-                        fill-rule="evenodd"
-                        transform="translate(0 1)"
-                      >
-                        <ellipse
-                          cx="32"
-                          cy="33"
-                          fill="#f5f5f5"
-                          rx="32"
-                          ry="7"
-                        />
-                        <g
-                          fill-rule="nonzero"
-                          stroke="#d9d9d9"
-                        >
-                          <path
-                            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                          />
-                          <path
-                            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                            fill="#fafafa"
-                          />
-                        </g>
-                      </g>
-                    </svg>
-                  </div>
-                  <div
-                    class="studio-empty-description"
-                  >
-                    No data
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="studio-tip-guide-tip emotion-1"
-        >
-          <span
-            class="studio-badge studio-badge-status studio-badge-not-a-wrapper studio-popover-open"
-          >
-            <span
-              class="studio-badge-status-dot studio-badge-status-processing"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TipGuide /> > renders footer.tsx correctly 1`] = `
-.emotion-0 {
-  position: relative;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.emotion-1 {
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translate(-50%);
-  -moz-transform: translate(-50%);
-  -ms-transform: translate(-50%);
-  transform: translate(-50%);
-}
-
-<div>
-  <div
-    class="studio-tip-guide emotion-0"
-  >
-    <button
-      class="studio-btn studio-btn-default"
-      type="button"
-    >
-      <span>
-        Open
-      </span>
-    </button>
-    <div
-      class="studio-tip-guide-tip emotion-1"
-    >
-      <span
-        class="studio-badge studio-badge-status studio-badge-not-a-wrapper studio-popover-open"
-      >
-        <span
-          class="studio-badge-status-dot studio-badge-status-processing"
-        />
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TipGuide /> > renders localStorage.tsx correctly 1`] = `
-.emotion-0 {
-  position: relative;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.emotion-1 {
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translate(-50%);
-  -moz-transform: translate(-50%);
-  -ms-transform: translate(-50%);
-  transform: translate(-50%);
-}
-
-<div>
-  <div
-    class="studio-space studio-space-horizontal studio-space-align-center"
-  >
-    <div
-      class="studio-space-item"
-      style="margin-right: 8px;"
-    />
-    <div
-      class="studio-space-item"
-      style="margin-right: 8px;"
-    >
-      <button
-        class="studio-btn studio-btn-default"
-        type="button"
-      >
-        <span>
-          Clear LocalStorage
-        </span>
-      </button>
-    </div>
-    <div
-      class="studio-space-item"
-    >
-      <div
-        class="studio-tip-guide emotion-0"
-      >
-        <div
-          class="studio-list studio-list-split"
-        >
-          <div
-            class="studio-spin-nested-loading"
-          >
-            <div
-              class="studio-spin-container"
-            >
-              <div
-                class="studio-list-empty-text"
-              >
-                <div
-                  class="studio-empty studio-empty-normal"
-                >
-                  <div
-                    class="studio-empty-image"
-                  >
-                    <svg
-                      height="41"
-                      viewBox="0 0 64 41"
-                      width="64"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <g
-                        fill="none"
-                        fill-rule="evenodd"
-                        transform="translate(0 1)"
-                      >
-                        <ellipse
-                          cx="32"
-                          cy="33"
-                          fill="#f5f5f5"
-                          rx="32"
-                          ry="7"
-                        />
-                        <g
-                          fill-rule="nonzero"
-                          stroke="#d9d9d9"
-                        >
-                          <path
-                            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                          />
-                          <path
-                            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                            fill="#fafafa"
-                          />
-                        </g>
-                      </g>
-                    </svg>
-                  </div>
-                  <div
-                    class="studio-empty-description"
-                  >
-                    No data
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="studio-tip-guide-tip emotion-1"
-        >
-          <span
-            class="studio-badge studio-badge-status studio-badge-not-a-wrapper studio-popover-open"
-          >
-            <span
-              class="studio-badge-status-dot studio-badge-status-processing"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TipGuide /> > renders normal.tsx correctly 1`] = `
-.emotion-0 {
-  position: relative;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.emotion-1 {
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translate(-50%);
-  -moz-transform: translate(-50%);
-  -ms-transform: translate(-50%);
-  transform: translate(-50%);
-}
-
-<div>
-  <div
-    class="studio-tip-guide emotion-0"
-  >
-    <button
-      class="studio-btn studio-btn-default"
-      type="button"
-    >
-      <span>
-        Button
-      </span>
-    </button>
-    <div
-      class="studio-tip-guide-tip emotion-1"
-    >
-      <span
-        class="studio-badge studio-badge-status studio-badge-not-a-wrapper studio-popover-open"
-      >
-        <span
-          class="studio-badge-status-dot studio-badge-status-processing"
-        />
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<TipGuide /> > renders offset.tsx correctly 1`] = `
-.emotion-0 {
-  position: relative;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.emotion-1 {
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translate(-50%);
-  -moz-transform: translate(-50%);
-  -ms-transform: translate(-50%);
-  transform: translate(-50%);
-}
-
-<div>
-  <div
-    class="studio-tip-guide emotion-0"
-  >
-    <button
-      class="studio-btn studio-btn-default"
-      type="button"
-    >
-      <span>
-        Pro-Editor
-      </span>
-    </button>
-    <div
-      class="studio-tip-guide-tip emotion-1"
-      style="margin-top: -24px;"
-    >
-      <span
-        class="studio-badge studio-badge-status studio-badge-not-a-wrapper studio-popover-open"
-      >
-        <span
-          class="studio-badge-status-dot studio-badge-status-processing"
-        />
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<antd /> > renders basic.tsx correctly 1`] = `
-.emotion-0:hover {
-  color: rgba(0, 0, 0, 0.88);
-  background-color: rgba(0, 0, 0, 0.04);
-  border-color: transparent;
-}
-
-.emotion-0:focus {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background-color: rgba(0, 0, 0, 0.02)!important;
-  border-color: #1677ff!important;
-  box-shadow: none;
-}
-
-<div>
-  <div
-    class="studio-space studio-space-vertical"
-  >
-    <div
-      class="studio-space-item"
-      style="margin-bottom: 8px;"
-    >
-      Input
-    </div>
-    <div
-      class="studio-space-item"
-    >
-      <div
-        class="studio-space studio-space-vertical"
-      >
-        <div
-          class="studio-space-item"
-          style="margin-bottom: 8px;"
-        >
-          <input
-            class="studio-input emotion-0"
-            placeholder="请输入内容"
-            type="text"
-            value=""
-          />
-        </div>
-        <div
-          class="studio-space-item"
-        >
-          <input
-            class="studio-input emotion-0"
-            type="text"
-            value="包含有文本"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<antd /> > renders inputNumber.tsx correctly 1`] = `
-.emotion-0:hover {
-  color: rgba(0, 0, 0, 0.88);
-  background-color: rgba(0, 0, 0, 0.04);
-  border-color: transparent;
-}
-
-.emotion-0:focus {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background-color: rgba(0, 0, 0, 0.02)!important;
-  border-color: #1677ff!important;
-  box-shadow: none;
-}
-
-.emotion-0 .studio-input-number-group-addon {
-  padding: 0 4px;
-  color: rgba(0, 0, 0, 0.45);
-  background: rgba(0, 0, 0, 0.02);
-  border-color: transparent;
-}
-
-<div>
-  <div
-    class="studio-space studio-space-vertical"
-  >
-    <div
-      class="studio-space-item"
-      style="margin-bottom: 8px;"
-    >
-      InputNumber
-    </div>
-    <div
-      class="studio-space-item"
-    >
-      <div
-        class="studio-space studio-space-vertical"
-      >
-        <div
-          class="studio-space-item"
-          style="margin-bottom: 8px;"
-        >
-          <div
-            class="studio-input-number-group-wrapper emotion-0 studio-input-number-group-wrapper-lg"
-          >
-            <div
-              class="studio-input-number-wrapper studio-input-number-group"
-            >
-              <div
-                class="studio-input-number studio-input-number-lg"
-              >
-                <div
-                  class="studio-input-number-handler-wrap"
-                >
-                  <span
-                    aria-disabled="false"
-                    aria-label="Increase Value"
-                    class="studio-input-number-handler studio-input-number-handler-up"
-                    role="button"
-                    unselectable="on"
-                  >
-                    <span
-                      aria-label="up"
-                      class="anticon anticon-up studio-input-number-handler-up-inner"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="up"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    aria-disabled="false"
-                    aria-label="Decrease Value"
-                    class="studio-input-number-handler studio-input-number-handler-down"
-                    role="button"
-                    unselectable="on"
-                  >
-                    <span
-                      aria-label="down"
-                      class="anticon anticon-down studio-input-number-handler-down-inner"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="down"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="studio-input-number-input-wrap"
-                >
-                  <input
-                    aria-valuenow="100"
-                    autocomplete="off"
-                    class="studio-input-number-input"
-                    role="spinbutton"
-                    step="1"
-                    value="100"
-                  />
-                </div>
-              </div>
-              <div
-                class="studio-input-number-group-addon"
-              >
-                列
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="studio-space-item"
-          style="margin-bottom: 8px;"
-        >
-          <div
-            class="studio-input-number-group-wrapper emotion-0 studio-input-number-group-wrapper-sm"
-          >
-            <div
-              class="studio-input-number-wrapper studio-input-number-group"
-            >
-              <div
-                class="studio-input-number studio-input-number-sm"
-              >
-                <div
-                  class="studio-input-number-handler-wrap"
-                >
-                  <span
-                    aria-disabled="false"
-                    aria-label="Increase Value"
-                    class="studio-input-number-handler studio-input-number-handler-up"
-                    role="button"
-                    unselectable="on"
-                  >
-                    <span
-                      aria-label="up"
-                      class="anticon anticon-up studio-input-number-handler-up-inner"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="up"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    aria-disabled="false"
-                    aria-label="Decrease Value"
-                    class="studio-input-number-handler studio-input-number-handler-down"
-                    role="button"
-                    unselectable="on"
-                  >
-                    <span
-                      aria-label="down"
-                      class="anticon anticon-down studio-input-number-handler-down-inner"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="down"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="studio-input-number-input-wrap"
-                >
-                  <input
-                    aria-valuenow="100"
-                    autocomplete="off"
-                    class="studio-input-number-input"
-                    role="spinbutton"
-                    step="1"
-                    value="100"
-                  />
-                </div>
-              </div>
-              <div
-                class="studio-input-number-group-addon"
-              >
-                列
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="studio-space-item"
-        >
-          <div
-            class="studio-input-number-group-wrapper emotion-0 studio-input-number-group-wrapper-sm"
-          >
-            <div
-              class="studio-input-number-wrapper studio-input-number-group"
-            >
-              <div
-                class="studio-input-number studio-input-number-sm"
-              >
-                <div
-                  class="studio-input-number-handler-wrap"
-                >
-                  <span
-                    aria-disabled="false"
-                    aria-label="Increase Value"
-                    class="studio-input-number-handler studio-input-number-handler-up"
-                    role="button"
-                    unselectable="on"
-                  >
-                    <span
-                      aria-label="up"
-                      class="anticon anticon-up studio-input-number-handler-up-inner"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="up"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    aria-disabled="false"
-                    aria-label="Decrease Value"
-                    class="studio-input-number-handler studio-input-number-handler-down"
-                    role="button"
-                    unselectable="on"
-                  >
-                    <span
-                      aria-label="down"
-                      class="anticon anticon-down studio-input-number-handler-down-inner"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="down"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="studio-input-number-input-wrap"
-                >
-                  <input
-                    aria-valuenow="100"
-                    autocomplete="off"
-                    class="studio-input-number-input"
-                    role="spinbutton"
-                    step="1"
-                    value="100"
-                  />
-                </div>
-              </div>
-              <div
-                class="studio-input-number-group-addon"
-              >
-                列
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<antd /> > renders segmented.tsx correctly 1`] = `
-.emotion-0 {
-  padding: 4px;
-}
-
-.emotion-0 .studio-segmented-item {
-  margin-right: 4px;
-  color: rgba(0, 0, 0, 0.45);
-  border-radius: 2px;
-}
-
-.emotion-0 .studio-segmented-item:hover {
-  color: rgba(0, 0, 0, 0.65);
-}
-
-.emotion-0 .studio-segmented-item:last-child {
-  margin-right: 0;
-}
-
-.emotion-0 .studio-segmented-item-selected {
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-0 .studio-segmented-item-selected:hover {
-  color: rgba(0, 0, 0, 0.88);
-}
-
-.emotion-0 .studio-segmented-item-label {
-  min-height: auto;
-  padding: 2px 7px;
-  line-height: unset;
-}
-
-<div>
-  <div>
-    <div
-      class="studio-segmented emotion-0"
-    >
-      <div
-        class="studio-segmented-group"
-      >
-        <label
-          class="studio-segmented-item studio-segmented-item-selected"
-        >
-          <input
-            checked=""
-            class="studio-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="studio-segmented-item-label"
-            title="画布"
-          >
-            画布
-          </div>
-        </label>
-        <label
-          class="studio-segmented-item"
-        >
-          <input
-            class="studio-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="studio-segmented-item-label"
-            title="代码"
-          >
-            代码
-          </div>
-        </label>
-      </div>
-    </div>
-    <div>
-      canvas
-    </div>
-    <div
-      class="studio-divider studio-divider-horizontal"
-      role="separator"
-    />
-    <div
-      class="studio-segmented emotion-0 studio-segmented-sm"
-    >
-      <div
-        class="studio-segmented-group"
-      >
-        <label
-          class="studio-segmented-item studio-segmented-item-selected"
-        >
-          <input
-            checked=""
-            class="studio-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="studio-segmented-item-label"
-            title="画布"
-          >
-            画布
-          </div>
-        </label>
-        <label
-          class="studio-segmented-item"
-        >
-          <input
-            class="studio-segmented-item-input"
-            type="radio"
-          />
-          <div
-            class="studio-segmented-item-label"
-            title="代码"
-          >
-            代码
-          </div>
-        </label>
-      </div>
-    </div>
-    <div>
-      canvas
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<antd /> > renders select.tsx correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: 16px;
-}
-
-.emotion-2.studio-select-multiple:not(.emotion-2.studio-select-customize-input) .emotion-2.studio-select.studio-select-selector:hover {
-  color: rgba(0, 0, 0, 0.88);
-  background-color: rgba(0, 0, 0, 0.04);
-  border-color: transparent;
-}
-
-.emotion-2.studio-select-multiple:not(.emotion-2.studio-select-customize-input) .emotion-2.studio-select.studio-select-selector:focus {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background-color: rgba(0, 0, 0, 0.02)!important;
-  border-color: #1677ff!important;
-  box-shadow: none;
-}
-
-.emotion-2.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector {
-  border-color: transparent;
-}
-
-.emotion-2.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:hover {
-  color: rgba(0, 0, 0, 0.88);
-  background-color: rgba(0, 0, 0, 0.04);
-  border-color: transparent;
-}
-
-.emotion-2.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:focus {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background-color: rgba(0, 0, 0, 0.02)!important;
-  border-color: #1677ff!important;
-  box-shadow: none;
-}
-
-.emotion-2.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background-color: rgba(0, 0, 0, 0.02)!important;
-  border-color: #1677ff!important;
-  box-shadow: none;
-}
-
-.emotion-2.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input) .studio-select-selector {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background-color: rgba(0, 0, 0, 0.02)!important;
-  border-color: #1677ff!important;
-  box-shadow: none;
-}
-
-.emotion-2 .studio-select-arrow {
-  top: 13px;
-  right: 8px;
-  width: 10px;
-  height: 10px;
-  font-size: 10px;
-}
-
-<div>
-  <div
-    class="studio-card studio-card-bordered"
-  >
-    <div
-      class="studio-card-head"
-    >
-      <div
-        class="studio-card-head-wrapper"
-      >
-        <div
-          class="studio-card-head-title"
-        >
-          Select
-        </div>
-      </div>
-    </div>
-    <div
-      class="studio-card-body"
-    >
-      <div
-        class="layoutkit-flexbox emotion-0"
-      >
-        <div
-          class="layoutkit-flexbox emotion-1"
-        >
-          默认
-          <div
-            class="studio-select emotion-2 studio-select-single studio-select-show-arrow"
-            style="width: 120px;"
-          >
-            <div
-              class="studio-select-selector"
-            >
-              <span
-                class="studio-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="rc_select_TEST_OR_SSR_list"
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  aria-label="Search"
-                  aria-owns="rc_select_TEST_OR_SSR_list"
-                  autocomplete="off"
-                  class="studio-select-selection-search-input"
-                  id="rc_select_TEST_OR_SSR"
-                  readonly=""
-                  role="combobox"
-                  style="opacity: 0;"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="studio-select-selection-placeholder"
-              >
-                请输入
-              </span>
-            </div>
-            <span
-              aria-hidden="true"
-              class="studio-select-arrow"
-              style="user-select: none;"
-              unselectable="on"
-            >
-              <span
-                aria-label="down"
-                class="anticon anticon-down studio-select-suffix"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="down"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </div>
-          <div
-            class="studio-select emotion-2 studio-select-single studio-select-show-arrow"
-            style="width: 120px;"
-          >
-            <div
-              class="studio-select-selector"
-            >
-              <span
-                class="studio-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="rc_select_TEST_OR_SSR_list"
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  aria-label="Search"
-                  aria-owns="rc_select_TEST_OR_SSR_list"
-                  autocomplete="off"
-                  class="studio-select-selection-search-input"
-                  id="rc_select_TEST_OR_SSR"
-                  readonly=""
-                  role="combobox"
-                  style="opacity: 0;"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="studio-select-selection-item"
-                title="123"
-              >
-                123
-              </span>
-            </div>
-            <span
-              aria-hidden="true"
-              class="studio-select-arrow"
-              style="user-select: none;"
-              unselectable="on"
-            >
-              <span
-                aria-label="down"
-                class="anticon anticon-down studio-select-suffix"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="down"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </div>
-        </div>
-        <div
-          class="layoutkit-flexbox emotion-1"
-        >
-          小尺寸
-          <div
-            class="studio-select studio-select-sm emotion-2 studio-select-single studio-select-show-arrow"
-            style="width: 120px;"
-          >
-            <div
-              class="studio-select-selector"
-            >
-              <span
-                class="studio-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="rc_select_TEST_OR_SSR_list"
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  aria-label="Search"
-                  aria-owns="rc_select_TEST_OR_SSR_list"
-                  autocomplete="off"
-                  class="studio-select-selection-search-input"
-                  id="rc_select_TEST_OR_SSR"
-                  readonly=""
-                  role="combobox"
-                  style="opacity: 0;"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="studio-select-selection-placeholder"
-              >
-                请输入
-              </span>
-            </div>
-            <span
-              aria-hidden="true"
-              class="studio-select-arrow"
-              style="user-select: none;"
-              unselectable="on"
-            >
-              <span
-                aria-label="down"
-                class="anticon anticon-down studio-select-suffix"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="down"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </div>
-          <div
-            class="studio-select studio-select-sm emotion-2 studio-select-single studio-select-show-arrow"
-            style="width: 120px;"
-          >
-            <div
-              class="studio-select-selector"
-            >
-              <span
-                class="studio-select-selection-search"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-controls="rc_select_TEST_OR_SSR_list"
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  aria-label="Search"
-                  aria-owns="rc_select_TEST_OR_SSR_list"
-                  autocomplete="off"
-                  class="studio-select-selection-search-input"
-                  id="rc_select_TEST_OR_SSR"
-                  readonly=""
-                  role="combobox"
-                  style="opacity: 0;"
-                  type="search"
-                  unselectable="on"
-                  value=""
-                />
-              </span>
-              <span
-                class="studio-select-selection-item"
-                title="123"
-              >
-                123
-              </span>
-            </div>
-            <span
-              aria-hidden="true"
-              class="studio-select-arrow"
-              style="user-select: none;"
-              unselectable="on"
-            >
-              <span
-                aria-label="down"
-                class="anticon anticon-down studio-select-suffix"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="down"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<antd /> > renders tabs.tsx correctly 1`] = `
-.emotion-0 {
-  position: relative;
-  height: 100%;
-}
-
-.emotion-0 .studio-tabs-tab+.studio-tabs-tab {
-  margin: 8px 4px!important;
-  padding: 0 12px!important;
-}
-
-.emotion-0 .studio-tabs-tab {
-  color: rgba(0, 0, 0, 0.65);
-  -webkit-transition: background-color 150ms ease-out;
-  transition: background-color 150ms ease-out;
-}
-
-.emotion-0 .studio-tabs-tab:first-child {
-  margin: 8px 4px 8px 0;
-  padding: 4px 12px!important;
-}
-
-.emotion-0 .studio-tabs-tab:hover {
-  color: rgba(0, 0, 0, 0.88)!important;
-  background: rgba(0, 0, 0, 0.04);
-  border-radius: 4px;
-}
-
-.emotion-0 .studio-tabs-nav {
-  height: 46px;
-  padding: 0 12px;
-  padding-right: 8px!important;
-}
-
-.emotion-0 .studio-tabs-nav {
-  position: absolute!important;
-  z-index: 10;
-  width: 100%;
-  background: rgba(255,255,255,0.6);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-}
-
-.emotion-0 .studio-tabs-content-holder {
-  padding-top: 54px;
-  overflow-y: auto;
-}
-
-<div>
-  <div
-    class="studio-tabs studio-tabs-top emotion-0"
-  >
-    <div
-      class="studio-tabs-nav"
-      role="tablist"
-    >
-      <div
-        class="studio-tabs-nav-wrap"
-      >
-        <div
-          class="studio-tabs-nav-list"
-          style="transform: translate(0px, 0px);"
-        >
-          <div
-            class="studio-tabs-tab studio-tabs-tab-active"
-            data-node-key="1"
-          >
-            <div
-              aria-controls="rc-tabs-test-panel-1"
-              aria-selected="true"
-              class="studio-tabs-tab-btn"
-              id="rc-tabs-test-tab-1"
-              role="tab"
-              tabindex="0"
-            >
-              Tab 1
-            </div>
-          </div>
-          <div
-            class="studio-tabs-tab"
-            data-node-key="2"
-          >
-            <div
-              aria-controls="rc-tabs-test-panel-2"
-              aria-selected="false"
-              class="studio-tabs-tab-btn"
-              id="rc-tabs-test-tab-2"
-              role="tab"
-              tabindex="0"
-            >
-              Tab 2
-            </div>
-          </div>
-          <div
-            class="studio-tabs-tab"
-            data-node-key="3"
-          >
-            <div
-              aria-controls="rc-tabs-test-panel-3"
-              aria-selected="false"
-              class="studio-tabs-tab-btn"
-              id="rc-tabs-test-tab-3"
-              role="tab"
-              tabindex="0"
-            >
-              Tab 3
-            </div>
-          </div>
-          <div
-            class="studio-tabs-ink-bar studio-tabs-ink-bar-animated"
-            style="left: 0px; width: 0px;"
-          />
-        </div>
-      </div>
-      <div
-        class="studio-tabs-nav-operations studio-tabs-nav-operations-hidden"
-      >
-        <button
-          aria-controls="rc-tabs-test-more-popup"
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-hidden="true"
-          class="studio-tabs-nav-more"
-          id="rc-tabs-test-more"
-          style="visibility: hidden; order: 1;"
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            aria-label="ellipsis"
-            class="anticon anticon-ellipsis"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="ellipsis"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="studio-tabs-content-holder"
-    >
-      <div
-        class="studio-tabs-content studio-tabs-content-top"
-      >
-        <div
-          aria-hidden="false"
-          aria-labelledby="rc-tabs-test-tab-1"
-          class="studio-tabs-tabpane studio-tabs-tabpane-active"
-          id="rc-tabs-test-panel-1"
-          role="tabpanel"
-          tabindex="0"
-        >
-          Content of Tab Pane 1
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<antd /> > renders tree.tsx correctly 1`] = `
-<div>
-  <div
-    class="studio-tree studio-tree-icon-hide"
-    role="tree"
-  >
-    <div>
-      <input
-        aria-label="for screen reader"
-        style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
-        tabindex="0"
-        value=""
-      />
-    </div>
-    <div
-      aria-hidden="true"
-      class="studio-tree-treenode"
-      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
-    >
-      <div
-        class="studio-tree-indent"
-      >
-        <div
-          class="studio-tree-indent-unit"
-        />
-      </div>
-    </div>
-    <div
-      class="studio-tree-list"
-      style="position: relative;"
-    >
-      <div
-        class="studio-tree-list-holder"
-      >
-        <div>
-          <div
-            class="studio-tree-list-holder-inner"
-            style="display: flex; flex-direction: column;"
-          >
-            <div
-              aria-grabbed="false"
-              class="studio-tree-treenode studio-tree-treenode-switcher-open studio-tree-treenode-checkbox-checked studio-tree-treenode-leaf-last"
-              draggable="false"
-            >
-              <span
-                aria-hidden="true"
-                class="studio-tree-indent"
-              />
-              <span
-                class="studio-tree-switcher studio-tree-switcher_open"
-              >
-                <span
-                  aria-label="caret-down"
-                  class="anticon anticon-caret-down studio-tree-switcher-icon"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="caret-down"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="0 0 1024 1024"
-                    width="1em"
-                  >
-                    <path
-                      d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="studio-tree-checkbox studio-tree-checkbox-checked"
-              >
-                <span
-                  class="studio-tree-checkbox-inner"
-                />
-              </span>
-              <span
-                class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-open"
-                title="parent 1"
-              >
-                <span
-                  class="studio-tree-title"
-                >
-                  parent 1
-                </span>
-              </span>
-            </div>
-            <div
-              aria-grabbed="false"
-              class="studio-tree-treenode studio-tree-treenode-disabled studio-tree-treenode-switcher-open studio-tree-treenode-checkbox-checked studio-tree-treenode-selected"
-              draggable="false"
-            >
-              <span
-                aria-hidden="true"
-                class="studio-tree-indent"
-              >
-                <span
-                  class="studio-tree-indent-unit studio-tree-indent-unit-start studio-tree-indent-unit-end"
-                />
-              </span>
-              <span
-                class="studio-tree-switcher studio-tree-switcher_open"
-              >
-                <span
-                  aria-label="caret-down"
-                  class="anticon anticon-caret-down studio-tree-switcher-icon"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="caret-down"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="0 0 1024 1024"
-                    width="1em"
-                  >
-                    <path
-                      d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="studio-tree-checkbox studio-tree-checkbox-checked studio-tree-checkbox-disabled"
-              >
-                <span
-                  class="studio-tree-checkbox-inner"
-                />
-              </span>
-              <span
-                class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-open"
-                title="parent 1-0"
-              >
-                <span
-                  class="studio-tree-title"
-                >
-                  parent 1-0
-                </span>
-              </span>
-            </div>
-            <div
-              aria-grabbed="false"
-              class="studio-tree-treenode studio-tree-treenode-switcher-close"
-              draggable="false"
-            >
-              <span
-                aria-hidden="true"
-                class="studio-tree-indent"
-              >
-                <span
-                  class="studio-tree-indent-unit studio-tree-indent-unit-start studio-tree-indent-unit-end"
-                />
-                <span
-                  class="studio-tree-indent-unit studio-tree-indent-unit-start"
-                />
-              </span>
-              <span
-                class="studio-tree-switcher studio-tree-switcher-noop"
-              />
-              <span
-                class="studio-tree-checkbox studio-tree-checkbox-disabled"
-              >
-                <span
-                  class="studio-tree-checkbox-inner"
-                />
-              </span>
-              <span
-                class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-normal"
-                title="leaf"
-              >
-                <span
-                  class="studio-tree-title"
-                >
-                  leaf
-                </span>
-              </span>
-            </div>
-            <div
-              aria-grabbed="false"
-              class="studio-tree-treenode studio-tree-treenode-switcher-close studio-tree-treenode-leaf-last"
-              draggable="false"
-            >
-              <span
-                aria-hidden="true"
-                class="studio-tree-indent"
-              >
-                <span
-                  class="studio-tree-indent-unit studio-tree-indent-unit-start studio-tree-indent-unit-end"
-                />
-                <span
-                  class="studio-tree-indent-unit studio-tree-indent-unit-start"
-                />
-              </span>
-              <span
-                class="studio-tree-switcher studio-tree-switcher-noop"
-              />
-              <span
-                class="studio-tree-checkbox"
-              >
-                <span
-                  class="studio-tree-checkbox-inner"
-                />
-              </span>
-              <span
-                class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-normal"
-                title="leaf"
-              >
-                <span
-                  class="studio-tree-title"
-                >
-                  leaf
-                </span>
-              </span>
-            </div>
-            <div
-              aria-grabbed="false"
-              class="studio-tree-treenode studio-tree-treenode-switcher-open studio-tree-treenode-checkbox-checked studio-tree-treenode-leaf-last"
-              draggable="false"
-            >
-              <span
-                aria-hidden="true"
-                class="studio-tree-indent"
-              >
-                <span
-                  class="studio-tree-indent-unit studio-tree-indent-unit-start studio-tree-indent-unit-end"
-                />
-              </span>
-              <span
-                class="studio-tree-switcher studio-tree-switcher_open"
-              >
-                <span
-                  aria-label="caret-down"
-                  class="anticon anticon-caret-down studio-tree-switcher-icon"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="caret-down"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="0 0 1024 1024"
-                    width="1em"
-                  >
-                    <path
-                      d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="studio-tree-checkbox studio-tree-checkbox-checked"
-              >
-                <span
-                  class="studio-tree-checkbox-inner"
-                />
-              </span>
-              <span
-                class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-open"
-                title="parent 1-1"
-              >
-                <span
-                  class="studio-tree-title"
-                >
-                  parent 1-1
-                </span>
-              </span>
-            </div>
-            <div
-              aria-grabbed="false"
-              class="studio-tree-treenode studio-tree-treenode-switcher-close studio-tree-treenode-checkbox-checked studio-tree-treenode-leaf-last"
-              draggable="false"
-            >
-              <span
-                aria-hidden="true"
-                class="studio-tree-indent"
-              >
-                <span
-                  class="studio-tree-indent-unit studio-tree-indent-unit-start studio-tree-indent-unit-end"
-                />
-                <span
-                  class="studio-tree-indent-unit studio-tree-indent-unit-end"
-                />
-              </span>
-              <span
-                class="studio-tree-switcher studio-tree-switcher-noop"
-              />
-              <span
-                class="studio-tree-checkbox studio-tree-checkbox-checked"
-              >
-                <span
-                  class="studio-tree-checkbox-inner"
-                />
-              </span>
-              <span
-                class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-normal"
-                title=""
-              >
-                <span
-                  class="studio-tree-title"
-                >
-                  <span
-                    style="color: rgb(24, 144, 255);"
-                  >
-                    sss
-                  </span>
-                </span>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<antd /> > renders treeselect.tsx correctly 1`] = `
-<div>
-  <div
-    class="studio-select studio-tree-select studio-select-single studio-select-allow-clear studio-select-show-arrow studio-select-show-search"
-    style="width: 100%;"
-  >
-    <div
-      class="studio-select-selector"
-    >
-      <span
-        class="studio-select-selection-search"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-label="Search"
-          aria-owns="rc_select_TEST_OR_SSR_list"
-          autocomplete="off"
-          class="studio-select-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
-          role="combobox"
-          type="search"
-          value=""
-        />
-      </span>
-      <span
-        class="studio-select-selection-placeholder"
-      >
-        Please select
-      </span>
-    </div>
-    <span
-      aria-hidden="true"
-      class="studio-select-arrow"
-      style="user-select: none;"
-      unselectable="on"
-    >
-      <span
-        aria-label="down"
-        class="anticon anticon-down studio-select-suffix"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="down"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-          />
-        </svg>
-      </span>
-    </span>
-  </div>
-</div>
-`;

From ed6a8780e5122794b6d25156cd8c87ec0e970dbd Mon Sep 17 00:00:00 2001
From: rdmclin2 <rdmclin2@gmail.com>
Date: Thu, 7 Sep 2023 19:38:03 +0800
Subject: [PATCH 10/10] :camera_flash: chore: update snapshot

---
 tests/__snapshots__/demo.test.tsx.snap | 6942 ++++++++++++++++++++++++
 1 file changed, 6942 insertions(+)

diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap
index a499311e..f99ac237 100644
--- a/tests/__snapshots__/demo.test.tsx.snap
+++ b/tests/__snapshots__/demo.test.tsx.snap
@@ -25142,3 +25142,6945 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`<SortableTree /> > renders controlled.tsx correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-1 .studio-sortable-tree-node {
+  box-sizing: border-box;
+  padding-left: var(--spacing);
+  list-style: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone {
+  display: inline-block;
+  padding: 0;
+  padding-top: 5px;
+  padding-left: 10px;
+  pointer-events: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone .studio-sortable-tree-node-body {
+  padding-right: 24px;
+  background-color: #ffffff;
+  border: 1px solid #dedede;
+  border-radius: 4px;
+  box-shadow: 0 15px 15px 0 rgba(34, 33, 81, 0.1);
+}
+
+.emotion-1 .studio-sortable-tree-node:hover .studio-sortable-tree-node-handle {
+  opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator {
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body {
+  position: relative;
+  height: 4px;
+  padding: 0;
+  background-color: #56a1f8;
+  border-color: #1677ff;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body::before {
+  position: absolute;
+  top: -4px;
+  left: -8px;
+  display: block;
+  width: 12px;
+  height: 12px;
+  background-color: #fff;
+  border: 1px solid #1677ff;
+  border-radius: 50%;
+  content: '';
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body>* {
+  height: 0;
+  opacity: 0;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost:not(.studio-sortable-tree-node-indicator) {
+  opacity: 0.5;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost .studio-sortable-tree-node-body>* {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-body {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 2px;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
+}
+
+.emotion-1 .studio-sortable-tree-node-content {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.emotion-1 .studio-sortable-tree-node-count {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: #fff;
+  font-weight: 600;
+  font-size: 14px;
+  background-color: #1677ff;
+  border-radius: 50%;
+}
+
+.emotion-1 .disableSelection .studio-sortable-tree-node-content,
+.emotion-1 .clone .studio-sortable-tree-node-content,
+.emotion-1 .disableSelection .studio-sortable-tree-node-count,
+.emotion-1 .clone .studio-sortable-tree-node-count {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-2 {
+  margin-bottom: 4px;
+}
+
+.emotion-2:hover .studio-sortable-tree-node-handle,
+.emotion-2:hover .studio-sortable-tree-node-remove {
+  opacity: 1;
+}
+
+.emotion-3 {
+  position: absolute;
+  left: -13px;
+  opacity: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-3:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-3:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-4 {
+  opacity: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-4:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-4:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-7 svg {
+  -webkit-transition: -webkit-transform 250ms ease;
+  transition: transform 250ms ease;
+}
+
+.emotion-7:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-7:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-34 {
+  height: 24px;
+  padding-block: 2px;
+  margin-top: 4px;
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+}
+
+.emotion-34:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background: rgba(0, 0, 0, 0.06)!important;
+  border-color: transparent!important;
+}
+
+.emotion-34:focus {
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+  border-color: #1677ff!important;
+}
+
+<div>
+  <div
+    style="width: 340px; padding: 0px 12px;"
+  >
+    <div
+      class="layoutkit-flexbox emotion-0 emotion-1"
+    >
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-21"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <input
+              class="studio-input"
+              type="text"
+              value="Home"
+            />
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-21"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 70 41"
+                width="10"
+              >
+                <path
+                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <input
+              class="studio-input"
+              type="text"
+              value="Collections"
+            />
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-21"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <input
+              class="studio-input"
+              type="text"
+              value=""
+            />
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-21"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <input
+              class="studio-input"
+              type="text"
+              value=""
+            />
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-21"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <input
+              class="studio-input"
+              type="text"
+              value=""
+            />
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-21"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <input
+              class="studio-input"
+              type="text"
+              value=""
+            />
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-21"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <input
+              class="studio-input"
+              type="text"
+              value=""
+            />
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-21"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 70 41"
+                width="10"
+              >
+                <path
+                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <input
+              class="studio-input"
+              type="text"
+              value=""
+            />
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-21"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <input
+              class="studio-input"
+              type="text"
+              value=""
+            />
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-21"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <input
+              class="studio-input"
+              type="text"
+              value=""
+            />
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <button
+        class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-btn-solid studio-sortable-tree-btn-add emotion-34"
+        type="button"
+      >
+        <span
+          class="studio-btn-icon"
+        >
+          <span
+            aria-label="plus"
+            class="anticon anticon-plus"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="plus"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+              />
+              <path
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          添加一项
+        </span>
+      </button>
+      <div
+        id="DndDescribedBy-21"
+        style="display: none;"
+      >
+        
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+      </div>
+      <div
+        aria-atomic="true"
+        aria-live="assertive"
+        id="DndLiveRegion-21"
+        role="status"
+        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SortableTree /> > renders default.tsx correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-1 .studio-sortable-tree-node {
+  box-sizing: border-box;
+  padding-left: var(--spacing);
+  list-style: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone {
+  display: inline-block;
+  padding: 0;
+  padding-top: 5px;
+  padding-left: 10px;
+  pointer-events: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone .studio-sortable-tree-node-body {
+  padding-right: 24px;
+  background-color: #ffffff;
+  border: 1px solid #dedede;
+  border-radius: 4px;
+  box-shadow: 0 15px 15px 0 rgba(34, 33, 81, 0.1);
+}
+
+.emotion-1 .studio-sortable-tree-node:hover .studio-sortable-tree-node-handle {
+  opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator {
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body {
+  position: relative;
+  height: 4px;
+  padding: 0;
+  background-color: #56a1f8;
+  border-color: #1677ff;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body::before {
+  position: absolute;
+  top: -4px;
+  left: -8px;
+  display: block;
+  width: 12px;
+  height: 12px;
+  background-color: #fff;
+  border: 1px solid #1677ff;
+  border-radius: 50%;
+  content: '';
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body>* {
+  height: 0;
+  opacity: 0;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost:not(.studio-sortable-tree-node-indicator) {
+  opacity: 0.5;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost .studio-sortable-tree-node-body>* {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-body {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 2px;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
+}
+
+.emotion-1 .studio-sortable-tree-node-content {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.emotion-1 .studio-sortable-tree-node-count {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: #fff;
+  font-weight: 600;
+  font-size: 14px;
+  background-color: #1677ff;
+  border-radius: 50%;
+}
+
+.emotion-1 .disableSelection .studio-sortable-tree-node-content,
+.emotion-1 .clone .studio-sortable-tree-node-content,
+.emotion-1 .disableSelection .studio-sortable-tree-node-count,
+.emotion-1 .clone .studio-sortable-tree-node-count {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-2 {
+  margin-bottom: 4px;
+}
+
+.emotion-2:hover .studio-sortable-tree-node-handle,
+.emotion-2:hover .studio-sortable-tree-node-remove {
+  opacity: 1;
+}
+
+.emotion-3 {
+  position: absolute;
+  left: -13px;
+  opacity: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-3:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-3:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-4 {
+  opacity: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-4:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-4:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-7 svg {
+  -webkit-transition: -webkit-transform 250ms ease;
+  transition: transform 250ms ease;
+}
+
+.emotion-7:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-7:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-34 {
+  height: 24px;
+  padding-block: 2px;
+  margin-top: 4px;
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+}
+
+.emotion-34:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background: rgba(0, 0, 0, 0.06)!important;
+  border-color: transparent!important;
+}
+
+.emotion-34:focus {
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+  border-color: #1677ff!important;
+}
+
+<div>
+  <div
+    style="width: 340px;"
+  >
+    <div
+      class="layoutkit-flexbox emotion-0 emotion-1"
+    >
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-20"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            1
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-20"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 70 41"
+                width="10"
+              >
+                <path
+                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            2
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-20"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Spring
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-20"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Summer
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-20"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Fall
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-20"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Winter
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-20"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            About Us
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-20"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 70 41"
+                width="10"
+              >
+                <path
+                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            My Account
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-20"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Addresses
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-20"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Order History
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <button
+        class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-btn-solid studio-sortable-tree-btn-add emotion-34"
+        type="button"
+      >
+        <span
+          class="studio-btn-icon"
+        >
+          <span
+            aria-label="plus"
+            class="anticon anticon-plus"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="plus"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+              />
+              <path
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          添加一项
+        </span>
+      </button>
+      <div
+        id="DndDescribedBy-20"
+        style="display: none;"
+      >
+        
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+      </div>
+      <div
+        aria-atomic="true"
+        aria-live="assertive"
+        id="DndLiveRegion-20"
+        role="status"
+        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SortableTree /> > renders disableDrag.tsx correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-1 .studio-sortable-tree-node {
+  box-sizing: border-box;
+  padding-left: var(--spacing);
+  list-style: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone {
+  display: inline-block;
+  padding: 0;
+  padding-top: 5px;
+  padding-left: 10px;
+  pointer-events: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone .studio-sortable-tree-node-body {
+  padding-right: 24px;
+  background-color: #ffffff;
+  border: 1px solid #dedede;
+  border-radius: 4px;
+  box-shadow: 0 15px 15px 0 rgba(34, 33, 81, 0.1);
+}
+
+.emotion-1 .studio-sortable-tree-node:hover .studio-sortable-tree-node-handle {
+  opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator {
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body {
+  position: relative;
+  height: 4px;
+  padding: 0;
+  background-color: #56a1f8;
+  border-color: #1677ff;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body::before {
+  position: absolute;
+  top: -4px;
+  left: -8px;
+  display: block;
+  width: 12px;
+  height: 12px;
+  background-color: #fff;
+  border: 1px solid #1677ff;
+  border-radius: 50%;
+  content: '';
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body>* {
+  height: 0;
+  opacity: 0;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost:not(.studio-sortable-tree-node-indicator) {
+  opacity: 0.5;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost .studio-sortable-tree-node-body>* {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-body {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 2px;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
+}
+
+.emotion-1 .studio-sortable-tree-node-content {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.emotion-1 .studio-sortable-tree-node-count {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: #fff;
+  font-weight: 600;
+  font-size: 14px;
+  background-color: #1677ff;
+  border-radius: 50%;
+}
+
+.emotion-1 .disableSelection .studio-sortable-tree-node-content,
+.emotion-1 .clone .studio-sortable-tree-node-content,
+.emotion-1 .disableSelection .studio-sortable-tree-node-count,
+.emotion-1 .clone .studio-sortable-tree-node-count {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-2 {
+  margin-bottom: 4px;
+}
+
+.emotion-2:hover .studio-sortable-tree-node-handle,
+.emotion-2:hover .studio-sortable-tree-node-remove {
+  opacity: 1;
+}
+
+.emotion-3 {
+  opacity: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-3:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-3:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-5 svg {
+  -webkit-transition: -webkit-transform 250ms ease;
+  transition: transform 250ms ease;
+}
+
+.emotion-5:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-5:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-24 {
+  height: 24px;
+  padding-block: 2px;
+  margin-top: 4px;
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+}
+
+.emotion-24:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background: rgba(0, 0, 0, 0.06)!important;
+  border-color: transparent!important;
+}
+
+.emotion-24:focus {
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+  border-color: #1677ff!important;
+}
+
+<div>
+  <div
+    style="width: 340px;"
+  >
+    <div
+      class="layoutkit-flexbox emotion-0 emotion-1"
+    >
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            1
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 70 41"
+                width="10"
+              >
+                <path
+                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            2
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Spring
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Summer
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Fall
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Winter
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            About Us
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 70 41"
+                width="10"
+              >
+                <path
+                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            My Account
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Addresses
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Order History
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-3"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <button
+        class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-btn-solid studio-sortable-tree-btn-add emotion-24"
+        type="button"
+      >
+        <span
+          class="studio-btn-icon"
+        >
+          <span
+            aria-label="plus"
+            class="anticon anticon-plus"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="plus"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+              />
+              <path
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          添加一项
+        </span>
+      </button>
+      <div
+        id="DndDescribedBy-19"
+        style="display: none;"
+      >
+        
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+      </div>
+      <div
+        aria-atomic="true"
+        aria-live="assertive"
+        id="DndLiveRegion-19"
+        role="status"
+        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SortableTree /> > renders renderContent.tsx correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-1 .studio-sortable-tree-node {
+  box-sizing: border-box;
+  padding-left: var(--spacing);
+  list-style: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone {
+  display: inline-block;
+  padding: 0;
+  padding-top: 5px;
+  padding-left: 10px;
+  pointer-events: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone .studio-sortable-tree-node-body {
+  padding-right: 24px;
+  background-color: #ffffff;
+  border: 1px solid #dedede;
+  border-radius: 4px;
+  box-shadow: 0 15px 15px 0 rgba(34, 33, 81, 0.1);
+}
+
+.emotion-1 .studio-sortable-tree-node:hover .studio-sortable-tree-node-handle {
+  opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator {
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body {
+  position: relative;
+  height: 4px;
+  padding: 0;
+  background-color: #56a1f8;
+  border-color: #1677ff;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body::before {
+  position: absolute;
+  top: -4px;
+  left: -8px;
+  display: block;
+  width: 12px;
+  height: 12px;
+  background-color: #fff;
+  border: 1px solid #1677ff;
+  border-radius: 50%;
+  content: '';
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body>* {
+  height: 0;
+  opacity: 0;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost:not(.studio-sortable-tree-node-indicator) {
+  opacity: 0.5;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost .studio-sortable-tree-node-body>* {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-body {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 2px;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
+}
+
+.emotion-1 .studio-sortable-tree-node-content {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.emotion-1 .studio-sortable-tree-node-count {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: #fff;
+  font-weight: 600;
+  font-size: 14px;
+  background-color: #1677ff;
+  border-radius: 50%;
+}
+
+.emotion-1 .disableSelection .studio-sortable-tree-node-content,
+.emotion-1 .clone .studio-sortable-tree-node-content,
+.emotion-1 .disableSelection .studio-sortable-tree-node-count,
+.emotion-1 .clone .studio-sortable-tree-node-count {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-2 {
+  margin-bottom: 4px;
+}
+
+.emotion-2:hover .studio-sortable-tree-node-handle,
+.emotion-2:hover .studio-sortable-tree-node-remove {
+  opacity: 1;
+}
+
+.emotion-3 {
+  position: absolute;
+  left: -13px;
+  opacity: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-3:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-3:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 4px;
+}
+
+.emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-5:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-5:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-6 {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.emotion-7 {
+  opacity: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-7:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-7:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-10 svg {
+  -webkit-transition: -webkit-transform 250ms ease;
+  transition: transform 250ms ease;
+}
+
+.emotion-10:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-10:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-64 {
+  height: 24px;
+  padding-block: 2px;
+  margin-top: 4px;
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+}
+
+.emotion-64:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background: rgba(0, 0, 0, 0.06)!important;
+  border-color: transparent!important;
+}
+
+.emotion-64:focus {
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+  border-color: #1677ff!important;
+}
+
+<div>
+  <div
+    style="width: 340px; padding: 0px 12px;"
+  >
+    <div
+      class="layoutkit-flexbox emotion-0 emotion-1"
+    >
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-18"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <div
+              class="layoutkit-flexbox emotion-4"
+            >
+              <div>
+                <button
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
+                  type="button"
+                >
+                  <span
+                    class="studio-btn-icon"
+                  >
+                    <div
+                      class="emotion-6"
+                    />
+                  </span>
+                </button>
+              </div>
+              <input
+                class="studio-input studio-input-sm"
+                id="1"
+                tabindex="10"
+                type="text"
+                value="首页"
+              />
+            </div>
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-18"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-10"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 70 41"
+                width="10"
+              >
+                <path
+                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <div
+              class="layoutkit-flexbox emotion-4"
+            >
+              <div>
+                <button
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
+                  type="button"
+                >
+                  <span
+                    class="studio-btn-icon"
+                  >
+                    <div
+                      class="emotion-6"
+                    />
+                  </span>
+                </button>
+              </div>
+              <input
+                class="studio-input studio-input-sm"
+                id="2"
+                tabindex="10"
+                type="text"
+                value="Collections"
+              />
+            </div>
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-18"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <div
+              class="layoutkit-flexbox emotion-4"
+            >
+              <div>
+                <button
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
+                  type="button"
+                >
+                  <span
+                    class="studio-btn-icon"
+                  >
+                    <div
+                      class="emotion-6"
+                    />
+                  </span>
+                </button>
+              </div>
+              <input
+                class="studio-input studio-input-sm"
+                id="3"
+                tabindex="10"
+                type="text"
+                value="Spring"
+              />
+            </div>
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-18"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <div
+              class="layoutkit-flexbox emotion-4"
+            >
+              <div>
+                <button
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
+                  type="button"
+                >
+                  <span
+                    class="studio-btn-icon"
+                  >
+                    <div
+                      class="emotion-6"
+                    />
+                  </span>
+                </button>
+              </div>
+              <input
+                class="studio-input studio-input-sm"
+                id="Summer"
+                tabindex="10"
+                type="text"
+                value="Summer"
+              />
+            </div>
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-18"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <div
+              class="layoutkit-flexbox emotion-4"
+            >
+              <div>
+                <button
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
+                  type="button"
+                >
+                  <span
+                    class="studio-btn-icon"
+                  >
+                    <div
+                      class="emotion-6"
+                    />
+                  </span>
+                </button>
+              </div>
+              <input
+                class="studio-input studio-input-sm"
+                id="Fall"
+                tabindex="10"
+                type="text"
+                value="Fall"
+              />
+            </div>
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-18"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <div
+              class="layoutkit-flexbox emotion-4"
+            >
+              <div>
+                <button
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
+                  type="button"
+                >
+                  <span
+                    class="studio-btn-icon"
+                  >
+                    <div
+                      class="emotion-6"
+                    />
+                  </span>
+                </button>
+              </div>
+              <input
+                class="studio-input studio-input-sm"
+                id="Winter"
+                tabindex="10"
+                type="text"
+                value="Winter"
+              />
+            </div>
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-18"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <div
+              class="layoutkit-flexbox emotion-4"
+            >
+              <div>
+                <button
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
+                  type="button"
+                >
+                  <span
+                    class="studio-btn-icon"
+                  >
+                    <div
+                      class="emotion-6"
+                    />
+                  </span>
+                </button>
+              </div>
+              <input
+                class="studio-input studio-input-sm"
+                id="About Us"
+                tabindex="10"
+                type="text"
+                value="About Us"
+              />
+            </div>
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-18"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-10"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 70 41"
+                width="10"
+              >
+                <path
+                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <div
+              class="layoutkit-flexbox emotion-4"
+            >
+              <div>
+                <button
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
+                  type="button"
+                >
+                  <span
+                    class="studio-btn-icon"
+                  >
+                    <div
+                      class="emotion-6"
+                    />
+                  </span>
+                </button>
+              </div>
+              <input
+                class="studio-input studio-input-sm"
+                id="My Account"
+                tabindex="10"
+                type="text"
+                value="My Account"
+              />
+            </div>
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-18"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <div
+              class="layoutkit-flexbox emotion-4"
+            >
+              <div>
+                <button
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
+                  type="button"
+                >
+                  <span
+                    class="studio-btn-icon"
+                  >
+                    <div
+                      class="emotion-6"
+                    />
+                  </span>
+                </button>
+              </div>
+              <input
+                class="studio-input studio-input-sm"
+                id="Addresses"
+                tabindex="10"
+                type="text"
+                value="Addresses"
+              />
+            </div>
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-18"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            <div
+              class="layoutkit-flexbox emotion-4"
+            >
+              <div>
+                <button
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-5"
+                  type="button"
+                >
+                  <span
+                    class="studio-btn-icon"
+                  >
+                    <div
+                      class="emotion-6"
+                    />
+                  </span>
+                </button>
+              </div>
+              <input
+                class="studio-input studio-input-sm"
+                id="Order History"
+                tabindex="10"
+                type="text"
+                value="Order History"
+              />
+            </div>
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <button
+        class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-btn-solid studio-sortable-tree-btn-add emotion-64"
+        type="button"
+      >
+        <span
+          class="studio-btn-icon"
+        >
+          <span
+            aria-label="plus"
+            class="anticon anticon-plus"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="plus"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+              />
+              <path
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          添加一项
+        </span>
+      </button>
+      <div
+        id="DndDescribedBy-18"
+        style="display: none;"
+      >
+        
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+      </div>
+      <div
+        aria-atomic="true"
+        aria-live="assertive"
+        id="DndLiveRegion-18"
+        role="status"
+        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SortableTree /> > renders sortableRule.tsx correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-1 .studio-sortable-tree-node {
+  box-sizing: border-box;
+  padding-left: var(--spacing);
+  list-style: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone {
+  display: inline-block;
+  padding: 0;
+  padding-top: 5px;
+  padding-left: 10px;
+  pointer-events: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone .studio-sortable-tree-node-body {
+  padding-right: 24px;
+  background-color: #ffffff;
+  border: 1px solid #dedede;
+  border-radius: 4px;
+  box-shadow: 0 15px 15px 0 rgba(34, 33, 81, 0.1);
+}
+
+.emotion-1 .studio-sortable-tree-node:hover .studio-sortable-tree-node-handle {
+  opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator {
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body {
+  position: relative;
+  height: 4px;
+  padding: 0;
+  background-color: #56a1f8;
+  border-color: #1677ff;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body::before {
+  position: absolute;
+  top: -4px;
+  left: -8px;
+  display: block;
+  width: 12px;
+  height: 12px;
+  background-color: #fff;
+  border: 1px solid #1677ff;
+  border-radius: 50%;
+  content: '';
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body>* {
+  height: 0;
+  opacity: 0;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost:not(.studio-sortable-tree-node-indicator) {
+  opacity: 0.5;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost .studio-sortable-tree-node-body>* {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-body {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 2px;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
+}
+
+.emotion-1 .studio-sortable-tree-node-content {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.emotion-1 .studio-sortable-tree-node-count {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: #fff;
+  font-weight: 600;
+  font-size: 14px;
+  background-color: #1677ff;
+  border-radius: 50%;
+}
+
+.emotion-1 .disableSelection .studio-sortable-tree-node-content,
+.emotion-1 .clone .studio-sortable-tree-node-content,
+.emotion-1 .disableSelection .studio-sortable-tree-node-count,
+.emotion-1 .clone .studio-sortable-tree-node-count {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-2 {
+  margin-bottom: 4px;
+}
+
+.emotion-2:hover .studio-sortable-tree-node-handle,
+.emotion-2:hover .studio-sortable-tree-node-remove {
+  opacity: 1;
+}
+
+.emotion-3 {
+  position: absolute;
+  left: -13px;
+  opacity: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-3:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-3:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-4 {
+  opacity: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-4:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-4:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.emotion-7 svg {
+  -webkit-transition: -webkit-transform 250ms ease;
+  transition: transform 250ms ease;
+}
+
+.emotion-7:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-7:active {
+  scale: 0.8;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-34 {
+  height: 24px;
+  padding-block: 2px;
+  margin-top: 4px;
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+}
+
+.emotion-34:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background: rgba(0, 0, 0, 0.06)!important;
+  border-color: transparent!important;
+}
+
+.emotion-34:focus {
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+  border-color: #1677ff!important;
+}
+
+<div>
+  <div
+    style="width: 340px;"
+  >
+    <div
+      class="layoutkit-flexbox emotion-0 emotion-1"
+    >
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-17"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            1
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-17"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 70 41"
+                width="10"
+              >
+                <path
+                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            2
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-17"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Spring
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-17"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Summer
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-17"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Fall
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-17"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Winter
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-17"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            About Us
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 0px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-17"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-7"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 70 41"
+                width="10"
+              >
+                <path
+                  d="M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            My Account
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-17"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Addresses
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <li
+        class="studio-sortable-tree-node studio-sortable-tree-node-indicator emotion-2"
+        style="--spacing: 24px; transition: transform 200ms ease;"
+      >
+        <div
+          class="studio-sortable-tree-node-body"
+        >
+          <button
+            aria-describedby="DndDescribedBy-17"
+            aria-disabled="false"
+            aria-roledescription="sortable"
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-handle studio-actionicon emotion-3"
+            role="button"
+            style="width: 12px;"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                width="16"
+              >
+                <path
+                  d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                />
+              </svg>
+            </span>
+          </button>
+          <span
+            class="studio-sortable-tree-node-content"
+          >
+            Order History
+          </span>
+          <button
+            class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-tree-node-remove studio-actionicon emotion-4"
+            type="button"
+          >
+            <span
+              class="studio-btn-icon"
+            >
+              <span
+                aria-label="delete"
+                class="anticon anticon-delete"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="delete"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </li>
+      <button
+        class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-btn-solid studio-sortable-tree-btn-add emotion-34"
+        type="button"
+      >
+        <span
+          class="studio-btn-icon"
+        >
+          <span
+            aria-label="plus"
+            class="anticon anticon-plus"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="plus"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+              />
+              <path
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          添加一项
+        </span>
+      </button>
+      <div
+        id="DndDescribedBy-17"
+        style="display: none;"
+      >
+        
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  
+      </div>
+      <div
+        aria-atomic="true"
+        aria-live="assertive"
+        id="DndLiveRegion-17"
+        role="status"
+        style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<TipGuide /> > renders controlled.tsx correctly 1`] = `
+.emotion-0 {
+  position: relative;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.emotion-1 {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translate(-50%);
+  -moz-transform: translate(-50%);
+  -ms-transform: translate(-50%);
+  transform: translate(-50%);
+}
+
+<div>
+  <div
+    class="studio-space studio-space-horizontal studio-space-align-center"
+  >
+    <div
+      class="studio-space-item"
+      style="margin-right: 8px;"
+    >
+      <button
+        class="studio-btn studio-btn-default"
+        type="button"
+      >
+        <span>
+          Open
+        </span>
+      </button>
+    </div>
+    <div
+      class="studio-space-item"
+      style="margin-right: 8px;"
+    >
+      <button
+        class="studio-btn studio-btn-default"
+        type="button"
+      >
+        <span>
+          Close
+        </span>
+      </button>
+    </div>
+    <div
+      class="studio-space-item"
+    >
+      <div
+        class="studio-tip-guide emotion-0"
+      >
+        <div
+          class="studio-list studio-list-split"
+        >
+          <div
+            class="studio-spin-nested-loading"
+          >
+            <div
+              class="studio-spin-container"
+            >
+              <div
+                class="studio-list-empty-text"
+              >
+                <div
+                  class="studio-empty studio-empty-normal"
+                >
+                  <div
+                    class="studio-empty-image"
+                  >
+                    <svg
+                      height="41"
+                      viewBox="0 0 64 41"
+                      width="64"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        fill="none"
+                        fill-rule="evenodd"
+                        transform="translate(0 1)"
+                      >
+                        <ellipse
+                          cx="32"
+                          cy="33"
+                          fill="#f5f5f5"
+                          rx="32"
+                          ry="7"
+                        />
+                        <g
+                          fill-rule="nonzero"
+                          stroke="#d9d9d9"
+                        >
+                          <path
+                            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                          />
+                          <path
+                            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                            fill="#fafafa"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </div>
+                  <div
+                    class="studio-empty-description"
+                  >
+                    No data
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="studio-tip-guide-tip emotion-1"
+        >
+          <span
+            class="studio-badge studio-badge-status studio-badge-not-a-wrapper studio-popover-open"
+          >
+            <span
+              class="studio-badge-status-dot studio-badge-status-processing"
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<TipGuide /> > renders footer.tsx correctly 1`] = `
+.emotion-0 {
+  position: relative;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.emotion-1 {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translate(-50%);
+  -moz-transform: translate(-50%);
+  -ms-transform: translate(-50%);
+  transform: translate(-50%);
+}
+
+<div>
+  <div
+    class="studio-tip-guide emotion-0"
+  >
+    <button
+      class="studio-btn studio-btn-default"
+      type="button"
+    >
+      <span>
+        Open
+      </span>
+    </button>
+    <div
+      class="studio-tip-guide-tip emotion-1"
+    >
+      <span
+        class="studio-badge studio-badge-status studio-badge-not-a-wrapper studio-popover-open"
+      >
+        <span
+          class="studio-badge-status-dot studio-badge-status-processing"
+        />
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<TipGuide /> > renders localStorage.tsx correctly 1`] = `
+.emotion-0 {
+  position: relative;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.emotion-1 {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translate(-50%);
+  -moz-transform: translate(-50%);
+  -ms-transform: translate(-50%);
+  transform: translate(-50%);
+}
+
+<div>
+  <div
+    class="studio-space studio-space-horizontal studio-space-align-center"
+  >
+    <div
+      class="studio-space-item"
+      style="margin-right: 8px;"
+    />
+    <div
+      class="studio-space-item"
+      style="margin-right: 8px;"
+    >
+      <button
+        class="studio-btn studio-btn-default"
+        type="button"
+      >
+        <span>
+          Clear LocalStorage
+        </span>
+      </button>
+    </div>
+    <div
+      class="studio-space-item"
+    >
+      <div
+        class="studio-tip-guide emotion-0"
+      >
+        <div
+          class="studio-list studio-list-split"
+        >
+          <div
+            class="studio-spin-nested-loading"
+          >
+            <div
+              class="studio-spin-container"
+            >
+              <div
+                class="studio-list-empty-text"
+              >
+                <div
+                  class="studio-empty studio-empty-normal"
+                >
+                  <div
+                    class="studio-empty-image"
+                  >
+                    <svg
+                      height="41"
+                      viewBox="0 0 64 41"
+                      width="64"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        fill="none"
+                        fill-rule="evenodd"
+                        transform="translate(0 1)"
+                      >
+                        <ellipse
+                          cx="32"
+                          cy="33"
+                          fill="#f5f5f5"
+                          rx="32"
+                          ry="7"
+                        />
+                        <g
+                          fill-rule="nonzero"
+                          stroke="#d9d9d9"
+                        >
+                          <path
+                            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                          />
+                          <path
+                            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                            fill="#fafafa"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </div>
+                  <div
+                    class="studio-empty-description"
+                  >
+                    No data
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="studio-tip-guide-tip emotion-1"
+        >
+          <span
+            class="studio-badge studio-badge-status studio-badge-not-a-wrapper studio-popover-open"
+          >
+            <span
+              class="studio-badge-status-dot studio-badge-status-processing"
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<TipGuide /> > renders normal.tsx correctly 1`] = `
+.emotion-0 {
+  position: relative;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.emotion-1 {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translate(-50%);
+  -moz-transform: translate(-50%);
+  -ms-transform: translate(-50%);
+  transform: translate(-50%);
+}
+
+<div>
+  <div
+    class="studio-tip-guide emotion-0"
+  >
+    <button
+      class="studio-btn studio-btn-default"
+      type="button"
+    >
+      <span>
+        Button
+      </span>
+    </button>
+    <div
+      class="studio-tip-guide-tip emotion-1"
+    >
+      <span
+        class="studio-badge studio-badge-status studio-badge-not-a-wrapper studio-popover-open"
+      >
+        <span
+          class="studio-badge-status-dot studio-badge-status-processing"
+        />
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<TipGuide /> > renders offset.tsx correctly 1`] = `
+.emotion-0 {
+  position: relative;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.emotion-1 {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translate(-50%);
+  -moz-transform: translate(-50%);
+  -ms-transform: translate(-50%);
+  transform: translate(-50%);
+}
+
+<div>
+  <div
+    class="studio-tip-guide emotion-0"
+  >
+    <button
+      class="studio-btn studio-btn-default"
+      type="button"
+    >
+      <span>
+        Pro-Editor
+      </span>
+    </button>
+    <div
+      class="studio-tip-guide-tip emotion-1"
+      style="margin-top: -24px;"
+    >
+      <span
+        class="studio-badge studio-badge-status studio-badge-not-a-wrapper studio-popover-open"
+      >
+        <span
+          class="studio-badge-status-dot studio-badge-status-processing"
+        />
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<antd /> > renders basic.tsx correctly 1`] = `
+.emotion-0:hover {
+  color: rgba(0, 0, 0, 0.88);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: transparent;
+}
+
+.emotion-0:focus {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background-color: rgba(0, 0, 0, 0.02)!important;
+  border-color: #1677ff!important;
+  box-shadow: none;
+}
+
+<div>
+  <div
+    class="studio-space studio-space-vertical"
+  >
+    <div
+      class="studio-space-item"
+      style="margin-bottom: 8px;"
+    >
+      Input
+    </div>
+    <div
+      class="studio-space-item"
+    >
+      <div
+        class="studio-space studio-space-vertical"
+      >
+        <div
+          class="studio-space-item"
+          style="margin-bottom: 8px;"
+        >
+          <input
+            class="studio-input emotion-0"
+            placeholder="请输入内容"
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="studio-space-item"
+        >
+          <input
+            class="studio-input emotion-0"
+            type="text"
+            value="包含有文本"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<antd /> > renders inputNumber.tsx correctly 1`] = `
+.emotion-0:hover {
+  color: rgba(0, 0, 0, 0.88);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: transparent;
+}
+
+.emotion-0:focus {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background-color: rgba(0, 0, 0, 0.02)!important;
+  border-color: #1677ff!important;
+  box-shadow: none;
+}
+
+.emotion-0 .studio-input-number-group-addon {
+  padding: 0 4px;
+  color: rgba(0, 0, 0, 0.45);
+  background: rgba(0, 0, 0, 0.02);
+  border-color: transparent;
+}
+
+<div>
+  <div
+    class="studio-space studio-space-vertical"
+  >
+    <div
+      class="studio-space-item"
+      style="margin-bottom: 8px;"
+    >
+      InputNumber
+    </div>
+    <div
+      class="studio-space-item"
+    >
+      <div
+        class="studio-space studio-space-vertical"
+      >
+        <div
+          class="studio-space-item"
+          style="margin-bottom: 8px;"
+        >
+          <div
+            class="studio-input-number-group-wrapper emotion-0 studio-input-number-group-wrapper-lg"
+          >
+            <div
+              class="studio-input-number-wrapper studio-input-number-group"
+            >
+              <div
+                class="studio-input-number studio-input-number-lg"
+              >
+                <div
+                  class="studio-input-number-handler-wrap"
+                >
+                  <span
+                    aria-disabled="false"
+                    aria-label="Increase Value"
+                    class="studio-input-number-handler studio-input-number-handler-up"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      aria-label="up"
+                      class="anticon anticon-up studio-input-number-handler-up-inner"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="up"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                  <span
+                    aria-disabled="false"
+                    aria-label="Decrease Value"
+                    class="studio-input-number-handler studio-input-number-handler-down"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      aria-label="down"
+                      class="anticon anticon-down studio-input-number-handler-down-inner"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="down"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </div>
+                <div
+                  class="studio-input-number-input-wrap"
+                >
+                  <input
+                    aria-valuenow="100"
+                    autocomplete="off"
+                    class="studio-input-number-input"
+                    role="spinbutton"
+                    step="1"
+                    value="100"
+                  />
+                </div>
+              </div>
+              <div
+                class="studio-input-number-group-addon"
+              >
+                列
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="studio-space-item"
+          style="margin-bottom: 8px;"
+        >
+          <div
+            class="studio-input-number-group-wrapper emotion-0 studio-input-number-group-wrapper-sm"
+          >
+            <div
+              class="studio-input-number-wrapper studio-input-number-group"
+            >
+              <div
+                class="studio-input-number studio-input-number-sm"
+              >
+                <div
+                  class="studio-input-number-handler-wrap"
+                >
+                  <span
+                    aria-disabled="false"
+                    aria-label="Increase Value"
+                    class="studio-input-number-handler studio-input-number-handler-up"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      aria-label="up"
+                      class="anticon anticon-up studio-input-number-handler-up-inner"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="up"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                  <span
+                    aria-disabled="false"
+                    aria-label="Decrease Value"
+                    class="studio-input-number-handler studio-input-number-handler-down"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      aria-label="down"
+                      class="anticon anticon-down studio-input-number-handler-down-inner"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="down"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </div>
+                <div
+                  class="studio-input-number-input-wrap"
+                >
+                  <input
+                    aria-valuenow="100"
+                    autocomplete="off"
+                    class="studio-input-number-input"
+                    role="spinbutton"
+                    step="1"
+                    value="100"
+                  />
+                </div>
+              </div>
+              <div
+                class="studio-input-number-group-addon"
+              >
+                列
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="studio-space-item"
+        >
+          <div
+            class="studio-input-number-group-wrapper emotion-0 studio-input-number-group-wrapper-sm"
+          >
+            <div
+              class="studio-input-number-wrapper studio-input-number-group"
+            >
+              <div
+                class="studio-input-number studio-input-number-sm"
+              >
+                <div
+                  class="studio-input-number-handler-wrap"
+                >
+                  <span
+                    aria-disabled="false"
+                    aria-label="Increase Value"
+                    class="studio-input-number-handler studio-input-number-handler-up"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      aria-label="up"
+                      class="anticon anticon-up studio-input-number-handler-up-inner"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="up"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                  <span
+                    aria-disabled="false"
+                    aria-label="Decrease Value"
+                    class="studio-input-number-handler studio-input-number-handler-down"
+                    role="button"
+                    unselectable="on"
+                  >
+                    <span
+                      aria-label="down"
+                      class="anticon anticon-down studio-input-number-handler-down-inner"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="down"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </div>
+                <div
+                  class="studio-input-number-input-wrap"
+                >
+                  <input
+                    aria-valuenow="100"
+                    autocomplete="off"
+                    class="studio-input-number-input"
+                    role="spinbutton"
+                    step="1"
+                    value="100"
+                  />
+                </div>
+              </div>
+              <div
+                class="studio-input-number-group-addon"
+              >
+                列
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<antd /> > renders segmented.tsx correctly 1`] = `
+.emotion-0 {
+  padding: 4px;
+}
+
+.emotion-0 .studio-segmented-item {
+  margin-right: 4px;
+  color: rgba(0, 0, 0, 0.45);
+  border-radius: 2px;
+}
+
+.emotion-0 .studio-segmented-item:hover {
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.emotion-0 .studio-segmented-item:last-child {
+  margin-right: 0;
+}
+
+.emotion-0 .studio-segmented-item-selected {
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-0 .studio-segmented-item-selected:hover {
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-0 .studio-segmented-item-label {
+  min-height: auto;
+  padding: 2px 7px;
+  line-height: unset;
+}
+
+<div>
+  <div>
+    <div
+      class="studio-segmented emotion-0"
+    >
+      <div
+        class="studio-segmented-group"
+      >
+        <label
+          class="studio-segmented-item studio-segmented-item-selected"
+        >
+          <input
+            checked=""
+            class="studio-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="studio-segmented-item-label"
+            title="画布"
+          >
+            画布
+          </div>
+        </label>
+        <label
+          class="studio-segmented-item"
+        >
+          <input
+            class="studio-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="studio-segmented-item-label"
+            title="代码"
+          >
+            代码
+          </div>
+        </label>
+      </div>
+    </div>
+    <div>
+      canvas
+    </div>
+    <div
+      class="studio-divider studio-divider-horizontal"
+      role="separator"
+    />
+    <div
+      class="studio-segmented emotion-0 studio-segmented-sm"
+    >
+      <div
+        class="studio-segmented-group"
+      >
+        <label
+          class="studio-segmented-item studio-segmented-item-selected"
+        >
+          <input
+            checked=""
+            class="studio-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="studio-segmented-item-label"
+            title="画布"
+          >
+            画布
+          </div>
+        </label>
+        <label
+          class="studio-segmented-item"
+        >
+          <input
+            class="studio-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="studio-segmented-item-label"
+            title="代码"
+          >
+            代码
+          </div>
+        </label>
+      </div>
+    </div>
+    <div>
+      canvas
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<antd /> > renders select.tsx correctly 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 16px;
+}
+
+.emotion-2.studio-select-multiple:not(.emotion-2.studio-select-customize-input) .emotion-2.studio-select.studio-select-selector:hover {
+  color: rgba(0, 0, 0, 0.88);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: transparent;
+}
+
+.emotion-2.studio-select-multiple:not(.emotion-2.studio-select-customize-input) .emotion-2.studio-select.studio-select-selector:focus {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background-color: rgba(0, 0, 0, 0.02)!important;
+  border-color: #1677ff!important;
+  box-shadow: none;
+}
+
+.emotion-2.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector {
+  border-color: transparent;
+}
+
+.emotion-2.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:hover {
+  color: rgba(0, 0, 0, 0.88);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: transparent;
+}
+
+.emotion-2.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:focus {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background-color: rgba(0, 0, 0, 0.02)!important;
+  border-color: #1677ff!important;
+  box-shadow: none;
+}
+
+.emotion-2.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background-color: rgba(0, 0, 0, 0.02)!important;
+  border-color: #1677ff!important;
+  box-shadow: none;
+}
+
+.emotion-2.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input) .studio-select-selector {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background-color: rgba(0, 0, 0, 0.02)!important;
+  border-color: #1677ff!important;
+  box-shadow: none;
+}
+
+.emotion-2 .studio-select-arrow {
+  top: 13px;
+  right: 8px;
+  width: 10px;
+  height: 10px;
+  font-size: 10px;
+}
+
+<div>
+  <div
+    class="studio-card studio-card-bordered"
+  >
+    <div
+      class="studio-card-head"
+    >
+      <div
+        class="studio-card-head-wrapper"
+      >
+        <div
+          class="studio-card-head-title"
+        >
+          Select
+        </div>
+      </div>
+    </div>
+    <div
+      class="studio-card-body"
+    >
+      <div
+        class="layoutkit-flexbox emotion-0"
+      >
+        <div
+          class="layoutkit-flexbox emotion-1"
+        >
+          默认
+          <div
+            class="studio-select emotion-2 studio-select-single studio-select-show-arrow"
+            style="width: 120px;"
+          >
+            <div
+              class="studio-select-selector"
+            >
+              <span
+                class="studio-select-selection-search"
+              >
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="rc_select_TEST_OR_SSR_list"
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  aria-label="Search"
+                  aria-owns="rc_select_TEST_OR_SSR_list"
+                  autocomplete="off"
+                  class="studio-select-selection-search-input"
+                  id="rc_select_TEST_OR_SSR"
+                  readonly=""
+                  role="combobox"
+                  style="opacity: 0;"
+                  type="search"
+                  unselectable="on"
+                  value=""
+                />
+              </span>
+              <span
+                class="studio-select-selection-placeholder"
+              >
+                请输入
+              </span>
+            </div>
+            <span
+              aria-hidden="true"
+              class="studio-select-arrow"
+              style="user-select: none;"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down studio-select-suffix"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </div>
+          <div
+            class="studio-select emotion-2 studio-select-single studio-select-show-arrow"
+            style="width: 120px;"
+          >
+            <div
+              class="studio-select-selector"
+            >
+              <span
+                class="studio-select-selection-search"
+              >
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="rc_select_TEST_OR_SSR_list"
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  aria-label="Search"
+                  aria-owns="rc_select_TEST_OR_SSR_list"
+                  autocomplete="off"
+                  class="studio-select-selection-search-input"
+                  id="rc_select_TEST_OR_SSR"
+                  readonly=""
+                  role="combobox"
+                  style="opacity: 0;"
+                  type="search"
+                  unselectable="on"
+                  value=""
+                />
+              </span>
+              <span
+                class="studio-select-selection-item"
+                title="123"
+              >
+                123
+              </span>
+            </div>
+            <span
+              aria-hidden="true"
+              class="studio-select-arrow"
+              style="user-select: none;"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down studio-select-suffix"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </div>
+        </div>
+        <div
+          class="layoutkit-flexbox emotion-1"
+        >
+          小尺寸
+          <div
+            class="studio-select studio-select-sm emotion-2 studio-select-single studio-select-show-arrow"
+            style="width: 120px;"
+          >
+            <div
+              class="studio-select-selector"
+            >
+              <span
+                class="studio-select-selection-search"
+              >
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="rc_select_TEST_OR_SSR_list"
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  aria-label="Search"
+                  aria-owns="rc_select_TEST_OR_SSR_list"
+                  autocomplete="off"
+                  class="studio-select-selection-search-input"
+                  id="rc_select_TEST_OR_SSR"
+                  readonly=""
+                  role="combobox"
+                  style="opacity: 0;"
+                  type="search"
+                  unselectable="on"
+                  value=""
+                />
+              </span>
+              <span
+                class="studio-select-selection-placeholder"
+              >
+                请输入
+              </span>
+            </div>
+            <span
+              aria-hidden="true"
+              class="studio-select-arrow"
+              style="user-select: none;"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down studio-select-suffix"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </div>
+          <div
+            class="studio-select studio-select-sm emotion-2 studio-select-single studio-select-show-arrow"
+            style="width: 120px;"
+          >
+            <div
+              class="studio-select-selector"
+            >
+              <span
+                class="studio-select-selection-search"
+              >
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="rc_select_TEST_OR_SSR_list"
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  aria-label="Search"
+                  aria-owns="rc_select_TEST_OR_SSR_list"
+                  autocomplete="off"
+                  class="studio-select-selection-search-input"
+                  id="rc_select_TEST_OR_SSR"
+                  readonly=""
+                  role="combobox"
+                  style="opacity: 0;"
+                  type="search"
+                  unselectable="on"
+                  value=""
+                />
+              </span>
+              <span
+                class="studio-select-selection-item"
+                title="123"
+              >
+                123
+              </span>
+            </div>
+            <span
+              aria-hidden="true"
+              class="studio-select-arrow"
+              style="user-select: none;"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down studio-select-suffix"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<antd /> > renders tabs.tsx correctly 1`] = `
+.emotion-0 {
+  position: relative;
+  height: 100%;
+}
+
+.emotion-0 .studio-tabs-tab+.studio-tabs-tab {
+  margin: 8px 4px!important;
+  padding: 0 12px!important;
+}
+
+.emotion-0 .studio-tabs-tab {
+  color: rgba(0, 0, 0, 0.65);
+  -webkit-transition: background-color 150ms ease-out;
+  transition: background-color 150ms ease-out;
+}
+
+.emotion-0 .studio-tabs-tab:first-child {
+  margin: 8px 4px 8px 0;
+  padding: 4px 12px!important;
+}
+
+.emotion-0 .studio-tabs-tab:hover {
+  color: rgba(0, 0, 0, 0.88)!important;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+}
+
+.emotion-0 .studio-tabs-nav {
+  height: 46px;
+  padding: 0 12px;
+  padding-right: 8px!important;
+}
+
+.emotion-0 .studio-tabs-nav {
+  position: absolute!important;
+  z-index: 10;
+  width: 100%;
+  background: rgba(255,255,255,0.6);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+
+.emotion-0 .studio-tabs-content-holder {
+  padding-top: 54px;
+  overflow-y: auto;
+}
+
+<div>
+  <div
+    class="studio-tabs studio-tabs-top emotion-0"
+  >
+    <div
+      class="studio-tabs-nav"
+      role="tablist"
+    >
+      <div
+        class="studio-tabs-nav-wrap"
+      >
+        <div
+          class="studio-tabs-nav-list"
+          style="transform: translate(0px, 0px);"
+        >
+          <div
+            class="studio-tabs-tab studio-tabs-tab-active"
+            data-node-key="1"
+          >
+            <div
+              aria-controls="rc-tabs-test-panel-1"
+              aria-selected="true"
+              class="studio-tabs-tab-btn"
+              id="rc-tabs-test-tab-1"
+              role="tab"
+              tabindex="0"
+            >
+              Tab 1
+            </div>
+          </div>
+          <div
+            class="studio-tabs-tab"
+            data-node-key="2"
+          >
+            <div
+              aria-controls="rc-tabs-test-panel-2"
+              aria-selected="false"
+              class="studio-tabs-tab-btn"
+              id="rc-tabs-test-tab-2"
+              role="tab"
+              tabindex="0"
+            >
+              Tab 2
+            </div>
+          </div>
+          <div
+            class="studio-tabs-tab"
+            data-node-key="3"
+          >
+            <div
+              aria-controls="rc-tabs-test-panel-3"
+              aria-selected="false"
+              class="studio-tabs-tab-btn"
+              id="rc-tabs-test-tab-3"
+              role="tab"
+              tabindex="0"
+            >
+              Tab 3
+            </div>
+          </div>
+          <div
+            class="studio-tabs-ink-bar studio-tabs-ink-bar-animated"
+            style="left: 0px; width: 0px;"
+          />
+        </div>
+      </div>
+      <div
+        class="studio-tabs-nav-operations studio-tabs-nav-operations-hidden"
+      >
+        <button
+          aria-controls="rc-tabs-test-more-popup"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-hidden="true"
+          class="studio-tabs-nav-more"
+          id="rc-tabs-test-more"
+          style="visibility: hidden; order: 1;"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="studio-tabs-content-holder"
+    >
+      <div
+        class="studio-tabs-content studio-tabs-content-top"
+      >
+        <div
+          aria-hidden="false"
+          aria-labelledby="rc-tabs-test-tab-1"
+          class="studio-tabs-tabpane studio-tabs-tabpane-active"
+          id="rc-tabs-test-panel-1"
+          role="tabpanel"
+          tabindex="0"
+        >
+          Content of Tab Pane 1
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<antd /> > renders tree.tsx correctly 1`] = `
+<div>
+  <div
+    class="studio-tree studio-tree-icon-hide"
+    role="tree"
+  >
+    <div>
+      <input
+        aria-label="for screen reader"
+        style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
+        tabindex="0"
+        value=""
+      />
+    </div>
+    <div
+      aria-hidden="true"
+      class="studio-tree-treenode"
+      style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden; border: 0px; padding: 0px;"
+    >
+      <div
+        class="studio-tree-indent"
+      >
+        <div
+          class="studio-tree-indent-unit"
+        />
+      </div>
+    </div>
+    <div
+      class="studio-tree-list"
+      style="position: relative;"
+    >
+      <div
+        class="studio-tree-list-holder"
+      >
+        <div>
+          <div
+            class="studio-tree-list-holder-inner"
+            style="display: flex; flex-direction: column;"
+          >
+            <div
+              aria-grabbed="false"
+              class="studio-tree-treenode studio-tree-treenode-switcher-open studio-tree-treenode-checkbox-checked studio-tree-treenode-leaf-last"
+              draggable="false"
+            >
+              <span
+                aria-hidden="true"
+                class="studio-tree-indent"
+              />
+              <span
+                class="studio-tree-switcher studio-tree-switcher_open"
+              >
+                <span
+                  aria-label="caret-down"
+                  class="anticon anticon-caret-down studio-tree-switcher-icon"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="caret-down"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="0 0 1024 1024"
+                    width="1em"
+                  >
+                    <path
+                      d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <span
+                class="studio-tree-checkbox studio-tree-checkbox-checked"
+              >
+                <span
+                  class="studio-tree-checkbox-inner"
+                />
+              </span>
+              <span
+                class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-open"
+                title="parent 1"
+              >
+                <span
+                  class="studio-tree-title"
+                >
+                  parent 1
+                </span>
+              </span>
+            </div>
+            <div
+              aria-grabbed="false"
+              class="studio-tree-treenode studio-tree-treenode-disabled studio-tree-treenode-switcher-open studio-tree-treenode-checkbox-checked studio-tree-treenode-selected"
+              draggable="false"
+            >
+              <span
+                aria-hidden="true"
+                class="studio-tree-indent"
+              >
+                <span
+                  class="studio-tree-indent-unit studio-tree-indent-unit-start studio-tree-indent-unit-end"
+                />
+              </span>
+              <span
+                class="studio-tree-switcher studio-tree-switcher_open"
+              >
+                <span
+                  aria-label="caret-down"
+                  class="anticon anticon-caret-down studio-tree-switcher-icon"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="caret-down"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="0 0 1024 1024"
+                    width="1em"
+                  >
+                    <path
+                      d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <span
+                class="studio-tree-checkbox studio-tree-checkbox-checked studio-tree-checkbox-disabled"
+              >
+                <span
+                  class="studio-tree-checkbox-inner"
+                />
+              </span>
+              <span
+                class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-open"
+                title="parent 1-0"
+              >
+                <span
+                  class="studio-tree-title"
+                >
+                  parent 1-0
+                </span>
+              </span>
+            </div>
+            <div
+              aria-grabbed="false"
+              class="studio-tree-treenode studio-tree-treenode-switcher-close"
+              draggable="false"
+            >
+              <span
+                aria-hidden="true"
+                class="studio-tree-indent"
+              >
+                <span
+                  class="studio-tree-indent-unit studio-tree-indent-unit-start studio-tree-indent-unit-end"
+                />
+                <span
+                  class="studio-tree-indent-unit studio-tree-indent-unit-start"
+                />
+              </span>
+              <span
+                class="studio-tree-switcher studio-tree-switcher-noop"
+              />
+              <span
+                class="studio-tree-checkbox studio-tree-checkbox-disabled"
+              >
+                <span
+                  class="studio-tree-checkbox-inner"
+                />
+              </span>
+              <span
+                class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-normal"
+                title="leaf"
+              >
+                <span
+                  class="studio-tree-title"
+                >
+                  leaf
+                </span>
+              </span>
+            </div>
+            <div
+              aria-grabbed="false"
+              class="studio-tree-treenode studio-tree-treenode-switcher-close studio-tree-treenode-leaf-last"
+              draggable="false"
+            >
+              <span
+                aria-hidden="true"
+                class="studio-tree-indent"
+              >
+                <span
+                  class="studio-tree-indent-unit studio-tree-indent-unit-start studio-tree-indent-unit-end"
+                />
+                <span
+                  class="studio-tree-indent-unit studio-tree-indent-unit-start"
+                />
+              </span>
+              <span
+                class="studio-tree-switcher studio-tree-switcher-noop"
+              />
+              <span
+                class="studio-tree-checkbox"
+              >
+                <span
+                  class="studio-tree-checkbox-inner"
+                />
+              </span>
+              <span
+                class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-normal"
+                title="leaf"
+              >
+                <span
+                  class="studio-tree-title"
+                >
+                  leaf
+                </span>
+              </span>
+            </div>
+            <div
+              aria-grabbed="false"
+              class="studio-tree-treenode studio-tree-treenode-switcher-open studio-tree-treenode-checkbox-checked studio-tree-treenode-leaf-last"
+              draggable="false"
+            >
+              <span
+                aria-hidden="true"
+                class="studio-tree-indent"
+              >
+                <span
+                  class="studio-tree-indent-unit studio-tree-indent-unit-start studio-tree-indent-unit-end"
+                />
+              </span>
+              <span
+                class="studio-tree-switcher studio-tree-switcher_open"
+              >
+                <span
+                  aria-label="caret-down"
+                  class="anticon anticon-caret-down studio-tree-switcher-icon"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="caret-down"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="0 0 1024 1024"
+                    width="1em"
+                  >
+                    <path
+                      d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <span
+                class="studio-tree-checkbox studio-tree-checkbox-checked"
+              >
+                <span
+                  class="studio-tree-checkbox-inner"
+                />
+              </span>
+              <span
+                class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-open"
+                title="parent 1-1"
+              >
+                <span
+                  class="studio-tree-title"
+                >
+                  parent 1-1
+                </span>
+              </span>
+            </div>
+            <div
+              aria-grabbed="false"
+              class="studio-tree-treenode studio-tree-treenode-switcher-close studio-tree-treenode-checkbox-checked studio-tree-treenode-leaf-last"
+              draggable="false"
+            >
+              <span
+                aria-hidden="true"
+                class="studio-tree-indent"
+              >
+                <span
+                  class="studio-tree-indent-unit studio-tree-indent-unit-start studio-tree-indent-unit-end"
+                />
+                <span
+                  class="studio-tree-indent-unit studio-tree-indent-unit-end"
+                />
+              </span>
+              <span
+                class="studio-tree-switcher studio-tree-switcher-noop"
+              />
+              <span
+                class="studio-tree-checkbox studio-tree-checkbox-checked"
+              >
+                <span
+                  class="studio-tree-checkbox-inner"
+                />
+              </span>
+              <span
+                class="studio-tree-node-content-wrapper studio-tree-node-content-wrapper-normal"
+                title=""
+              >
+                <span
+                  class="studio-tree-title"
+                >
+                  <span
+                    style="color: rgb(24, 144, 255);"
+                  >
+                    sss
+                  </span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<antd /> > renders treeselect.tsx correctly 1`] = `
+<div>
+  <div
+    class="studio-select studio-tree-select studio-select-single studio-select-allow-clear studio-select-show-arrow studio-select-show-search"
+    style="width: 100%;"
+  >
+    <div
+      class="studio-select-selector"
+    >
+      <span
+        class="studio-select-selection-search"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label="Search"
+          aria-owns="rc_select_TEST_OR_SSR_list"
+          autocomplete="off"
+          class="studio-select-selection-search-input"
+          id="rc_select_TEST_OR_SSR"
+          role="combobox"
+          type="search"
+          value=""
+        />
+      </span>
+      <span
+        class="studio-select-selection-placeholder"
+      >
+        Please select
+      </span>
+    </div>
+    <span
+      aria-hidden="true"
+      class="studio-select-arrow"
+      style="user-select: none;"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down studio-select-suffix"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;