From fecf34d0d7655fb6469c1afab1a9b661ec814cd7 Mon Sep 17 00:00:00 2001
From: "wuyue.xht" <wuyue.xht@alibaba-inc.com>
Date: Wed, 10 Jun 2020 21:47:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=87=AA=E5=8A=A8=E5=9F=8B=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-skeleton/src/components/field/fields.tsx   | 11 ++++++++++-
 .../src/components/settings/settings-pane.tsx         |  2 ++
 packages/editor-skeleton/src/layouts/left-area.tsx    |  7 ++++---
 packages/editor-skeleton/src/layouts/top-area.tsx     |  2 +-
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/editor-skeleton/src/components/field/fields.tsx b/packages/editor-skeleton/src/components/field/fields.tsx
index dcd1c78bb..797fc361a 100644
--- a/packages/editor-skeleton/src/components/field/fields.tsx
+++ b/packages/editor-skeleton/src/components/field/fields.tsx
@@ -12,6 +12,7 @@ import InlineTip from './inlinetip';
 
 export interface FieldProps {
   className?: string;
+  meta?: { package: string; componentName: string } | string;
   title?: TitleContent | null;
   defaultDisplay?: 'accordion' | 'inline' | 'block';
   collapsed?: boolean;
@@ -115,15 +116,23 @@ export class Field extends Component<FieldProps> {
   }
 
   render() {
-    const { className, children, title, valueState, onClear, name: propName, tip } = this.props;
+    const { className, children, meta, title, valueState, onClear, name: propName, tip } = this.props;
     const { display, collapsed } = this.state;
     const isAccordion = display === 'accordion';
+    let hostName = '';
+    if (typeof meta === 'object') {
+      hostName = `${meta?.package || ''}-${meta.componentName || ''}`;
+    } else if (typeof meta === 'string') {
+      hostName = meta;
+    }
+    const id = `${hostName}-${propName || (title as any)['en-US'] || (title as any)['zh-CN']}`;
     const tipContent = this.getTipContent(propName!, tip);
     return (
       <div
         className={classNames(`lc-field lc-${display}-field`, className, {
           'lc-field-is-collapsed': isAccordion && collapsed,
         })}
+        id={id}
       >
         <div className="lc-field-head" onClick={isAccordion ? this.toggleExpand : undefined}>
           <div className="lc-field-title">
diff --git a/packages/editor-skeleton/src/components/settings/settings-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-pane.tsx
index 03db41889..5b75bddfa 100644
--- a/packages/editor-skeleton/src/components/settings/settings-pane.tsx
+++ b/packages/editor-skeleton/src/components/settings/settings-pane.tsx
@@ -63,6 +63,7 @@ class SettingFieldView extends Component<{ field: SettingField }> {
 
     return createField(
       {
+        meta: field?.componentMeta?.npm || field?.componentMeta?.componentName || '',
         title: field.title,
         collapsed: !field.expanded,
         valueState: field.isRequired ? 10 : field.valueState,
@@ -121,6 +122,7 @@ class SettingGroupView extends Component<{ field: SettingField }> {
     return (
       <Field
         defaultDisplay="accordion"
+        meta={field?.componentMeta?.npm || field?.componentMeta?.componentName || ''}
         title={field.title}
         collapsed={!field.expanded}
         onExpandChange={(expandState) => {
diff --git a/packages/editor-skeleton/src/layouts/left-area.tsx b/packages/editor-skeleton/src/layouts/left-area.tsx
index 00a83a328..53dd4805b 100644
--- a/packages/editor-skeleton/src/layouts/left-area.tsx
+++ b/packages/editor-skeleton/src/layouts/left-area.tsx
@@ -24,11 +24,12 @@ class Contents extends Component<{ area: Area }> {
     const { area } = this.props;
     const top: any[] = [];
     const bottom: any[] = [];
-    area.container.items.forEach(item => {
+    area.container.items.forEach((item) => {
+      const content = <div id={`left-area-${item.name}`}>{item.content}</div>;
       if (item.align === 'bottom') {
-        bottom.push(item.content);
+        bottom.push(content);
       } else {
-        top.push(item.content);
+        top.push(content);
       }
     });
     return (
diff --git a/packages/editor-skeleton/src/layouts/top-area.tsx b/packages/editor-skeleton/src/layouts/top-area.tsx
index b9dee5c38..4e4b05258 100644
--- a/packages/editor-skeleton/src/layouts/top-area.tsx
+++ b/packages/editor-skeleton/src/layouts/top-area.tsx
@@ -30,7 +30,7 @@ class Contents extends Component<{ area: Area, itemClassName?: string }> {
       return index1 === index2 ? 0 : (index1 > index2 ? 1 : -1);
     }).forEach(item => {
       const content = (
-        <div className={itemClassName || ''}>
+        <div className={itemClassName || ''} id={`top-area-${item.name}`}>
           {item.content}
         </div>
       );