diff --git a/packages/app/src/components/form.fields/form-description/index.tsx b/packages/app/src/components/form.fields/form-description/index.tsx
new file mode 100644
index 000000000..ab17adae6
--- /dev/null
+++ b/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 (
+
+
+
+ )
+ })`
+ 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
diff --git a/packages/app/src/components/form.fields/index.tsx b/packages/app/src/components/form.fields/index.tsx
index 9de234e12..07309e7fd 100644
--- a/packages/app/src/components/form.fields/index.tsx
+++ b/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'
diff --git a/packages/app/src/components/views/Details.tsx b/packages/app/src/components/views/Details.tsx
index 7d037d00e..03eaac2e3 100644
--- a/packages/app/src/components/views/Details.tsx
+++ b/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 (
- {loading ? : (
+ {loading ? : groups.map(group => (
{group.title} {group.tooltip && }}
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) {
)
})}
- )}
+ ))}
);
}
diff --git a/packages/app/src/components/views/style.less b/packages/app/src/components/views/style.less
index 268f30626..e368963eb 100644
--- a/packages/app/src/components/views/style.less
+++ b/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;
+ }
}
\ No newline at end of file
diff --git a/packages/plugin-collections/src/collections/fields.ts b/packages/plugin-collections/src/collections/fields.ts
index 597716938..e5910289f 100644
--- a/packages/plugin-collections/src/collections/fields.ts
+++ b/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",
diff --git a/packages/plugin-collections/src/interfaces/index.ts b/packages/plugin-collections/src/interfaces/index.ts
index 27d886bac..e5d02ce3b 100644
--- a/packages/plugin-collections/src/interfaces/index.ts
+++ b/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,
diff --git a/packages/plugin-collections/src/interfaces/types.ts b/packages/plugin-collections/src/interfaces/types.ts
index 60d08ea55..138a2019f 100644
--- a/packages/plugin-collections/src/interfaces/types.ts
+++ b/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',
+ },
+ },
+}
+
/**
* 主键(暂缓)
*/
diff --git a/packages/plugin-pages/src/actions/getView.ts b/packages/plugin-pages/src/actions/getView.ts
index 7a70fb8d2..6232326b0 100644
--- a/packages/plugin-pages/src/actions/getView.ts
+++ b/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);