feat(client): tab icon

packages/core/client/src/schema-component/antd/tabs/Tabs.Designer.tsx

@@ -20,26 +20,37 @@ export const TabsDesigner = () => {
             properties: {
               title: {
                 title: t('Tab name'),
+                required: true,
                 'x-decorator': 'FormItem',
                 'x-component': 'Input',
                 'x-component-props': {},
               },
+              icon: {
+                title: t('Icon'),
+                'x-decorator': 'FormItem',
+                'x-component': 'IconPicker',
+                'x-component-props': {},
+              },
             },
           } as ISchema
         }
-        initialValues={{ title: field.title }}
-        onSubmit={({ title }) => {
-          if (title) {
+        initialValues={{ title: field.title, icon: field.componentProps.icon }}
+        onSubmit={({ title, icon }) => {
+          const props = fieldSchema['x-component-props'] || {};
           fieldSchema.title = title;
           field.title = title;
+          props.icon = icon;
+          field.componentProps.icon = icon;
+          fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
+          fieldSchema['x-component-props'].icon = icon;
           dn.emit('patch', {
             schema: {
               ['x-uid']: fieldSchema['x-uid'],
               title,
+              ['x-component-props']: props,
             },
           });
           dn.refresh();
-          }
         }}
       />
       <SchemaSettings.Divider />

packages/core/client/src/schema-component/antd/tabs/Tabs.tsx

@@ -3,6 +3,7 @@ import { observer, RecursionField, useField, useFieldSchema } from '@formily/rea
 import { TabPaneProps, Tabs as AntdTabs, TabsProps } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
+import { Icon } from '../../../icon';
 import { useSchemaInitializer } from '../../../schema-initializer';
 import { DndContext, SortableItem } from '../../common';
 import { useDesigner } from '../../hooks/useDesigner';
@@ -77,12 +78,12 @@ const designerCss = css`
   }
 `;
 
-Tabs.TabPane = observer((props: TabPaneProps) => {
+Tabs.TabPane = observer((props: TabPaneProps & { icon?: any }) => {
   const Designer = useDesigner();
   const field = useField();
   return (
     <SortableItem className={classNames('nb-action-link', designerCss, props.className)}>
-      {props.tab || field.title}
+      {props.icon && <Icon style={{ marginRight: 2 }} type={props.icon} />} {props.tab || field.title}
       <Designer />
     </SortableItem>
   );

packages/core/client/src/schema-initializer/buttons/TabPaneInitializers.tsx

@@ -13,13 +13,15 @@ export const TabPaneInitializers = () => {
     return {
       async run() {
         await form.submit();
-        const { title } = form.values;
+        const { title, icon } = form.values;
         insertBeforeEnd({
           type: 'void',
           title,
           'x-component': 'Tabs.TabPane',
           'x-designer': 'Tabs.Designer',
-          'x-component-props': {},
+          'x-component-props': {
+            icon,
+          },
           properties: {
             grid: {
               type: 'void',
@@ -67,6 +69,11 @@ export const TabPaneInitializers = () => {
                     'x-component': 'Input',
                     'x-decorator': 'FormItem',
                   },
+                  icon: {
+                    title: '{{t("Icon")}}',
+                    'x-component': 'IconPicker',
+                    'x-decorator': 'FormItem',
+                  },
                   footer: {
                     'x-component': 'Action.Modal.Footer',
                     type: 'void',