feat: add description field

packages/app/src/components/form.fields/form-description/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { createVirtualBox } from '@formily/react-schema-renderer'
+import { Card } from 'antd'
+import styled from 'styled-components'
+import { markdown } from '@/components/views/Field'
+
+export const FormDescription = createVirtualBox(
+  'description',
+  styled(({ children, className, ...props }) => {
+    return (
+      <Card size={'small'} headStyle={{padding: 0}} bodyStyle={{
+        padding: 0,
+      }} className={className} {...props}>
+        <div dangerouslySetInnerHTML={{__html: children && markdown(children)}}></div>
+      </Card>
+    )
+  })`
+    margin-bottom: 24px !important;
+    &.ant-card {
+      border: none;
+      box-shadow: none;
+      p:first-child {
+        margin-top: 14px;
+      }
+      p:last-child {
+        margin-bottom: 0;
+      }
+    }
+  `
+)
+
+export default FormDescription

packages/app/src/components/form.fields/index.tsx

@@ -15,6 +15,7 @@ export * from './form-grid-row'
 export * from './form-item-grid'
 export * from './form-layout'
 export * from './form-mega-layout'
+export * from './form-description'
 export * from './form-step'
 export * from './form-text-box'
 export * from './form-slot'

packages/app/src/components/views/Details.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Descriptions, Button } from 'antd';
+import { Card, Descriptions, Button, Tooltip } from 'antd';
 import { Actions } from '@/components/actions';
 import api from '@/api-client';
 import { useRequest } from 'umi';
@@ -8,11 +8,37 @@ import Field from './Field';
 import get from 'lodash/get';
 import { useSize } from 'ahooks';
 import { configResponsive, useResponsive } from 'ahooks';
+import { InfoCircleOutlined } from '@ant-design/icons';
+
 configResponsive({
   small: 0,
   middle: 800,
   large: 1200,
 });
+function toGroups(fields: any[]) {
+  const groups = [];
+  let group = {
+    title: undefined,
+    tooltip: undefined,
+    children: [],
+  };
+  fields.forEach(field => {
+    if (field.interface === 'description' && group.children.length) {
+      groups.push(group);
+      group = {
+        title: field.title,
+        tooltip: get(field, 'component.tooltip'),
+        children: [],
+      };
+    } else {
+      group.children.push(field);
+    }
+  });
+  if (group.children.length) {
+    groups.push(group);
+  }
+  return groups;
+}
 export function Details(props: any) {
   const dom = document.querySelector('body');
   const responsive = useResponsive();
@@ -45,8 +71,9 @@ export function Details(props: any) {
       layout: 'vertical'
     }
   }
-  console.log(props);
   const { displayFields = [] } = activeTab;
+  const groups = toGroups(fields);
+  console.log({groups});
   return (
     <Card bordered={false}>
       <Actions
@@ -57,14 +84,15 @@ export function Details(props: any) {
         style={{ marginBottom: 14 }}
         actions={actions}
       />
-      {loading ? <Spin/> : (
+      {loading ? <Spin/> : groups.map(group => (
         <Descriptions 
           // layout={'vertical'}
           // size={'middle'}
           // bordered 
           {...descriptionsProps}
+          title={group.title && <span>{group.title} {group.tooltip && <Tooltip title={group.tooltip}><InfoCircleOutlined /></Tooltip>}</span>}
           column={1}>
-          {fields.map((field: any) => {
+          {group.children.map((field: any) => {
             if (Array.isArray(displayFields) && displayFields.length && displayFields.indexOf(field.id) === -1) {
               return null;
             }
@@ -75,7 +103,7 @@ export function Details(props: any) {
             )
           })}
         </Descriptions>
-      )}
+      ))}
     </Card>
   );
 }

packages/app/src/components/views/style.less

@@ -31,4 +31,11 @@
 .ant-table-tbody > tr.row-clickable:hover > td {
   background: #e6f7ff;
   border-color: rgba(0, 0, 0, 0.03);
+}
+
+.ant-descriptions-header {
+  margin-top: 20px;
+  .ant-descriptions-title {
+    font-weight: 500;
+  }
 }

packages/plugin-collections/src/collections/fields.ts

@@ -118,7 +118,7 @@ export default {
           {
             "type": "value:visible",
             "target": "component.showInTable",
-            "condition": "{{ ['subTable'].indexOf($self.value) === -1 }}"
+            "condition": "{{ ['subTable', 'description'].indexOf($self.value) === -1 }}"
           },
           {
             "type": "value:visible",

packages/plugin-collections/src/interfaces/index.ts

@@ -72,6 +72,13 @@ export const options = [
       types.json,
       types.icon,
     ],
+  },
+  {
+    key: 'others',
+    title: '其他',
+    children: [
+      types.description,
+    ],
   }
 ].map(({key, title, children}: any) => ({
   key,

packages/plugin-collections/src/interfaces/types.ts

@@ -436,6 +436,18 @@ export const group = {
   },
 };
 
+export const description = {
+  title: '说明文字',
+  options: {
+    interface: 'description',
+    // name: 'id',
+    type: 'virtual',
+    component: {
+      type: 'description',
+    },
+  },
+}
+
 /**
  * 主键（暂缓）
  */

packages/plugin-pages/src/actions/getView.ts

@@ -37,6 +37,10 @@ const transforms = {
         title: field.title||field.name,
         ...(field.component||{}),
       }
+      if (field.interface === 'description') {
+        field.title && set(prop, 'x-component-props.title', field.title);
+        field.get('component.tooltip') && set(prop, 'x-component-props.children', field.get('component.tooltip'));
+      }
       if (ctx.formMode === 'update') {
         if (!ctx.updateFields.includes(field.id)) {
           set(prop, 'x-component-props.disabled', true);