refactor: can configure the color of the option label for option type fields

packages/app/src/components/form.fields/array-table/index.tsx

@@ -10,7 +10,7 @@ import { toArr, isFn, isArr, FormPath } from '@formily/shared'
 import { ArrayList, DragListView } from '@formily/react-shared-components'
 import { CircleButton } from '../circle-button'
 import { TextButton } from '../text-button'
-import { Table, Form } from 'antd'
+import { Table, Form, Button } from 'antd'
 import { FormItemShallowProvider } from '@formily/antd'
 import {
   PlusOutlined,
@@ -23,7 +23,7 @@ import styled from 'styled-components'
 const ArrayComponents = {
   CircleButton,
   TextButton,
-  AdditionIcon: () => <PlusOutlined style={{ fontSize: 20 }} />,
+  AdditionIcon: () => <><PlusOutlined/> 新增</>,
   RemoveIcon: () => <DeleteOutlined />,
   MoveDownIcon: () => <DownOutlined />,
   MoveUpIcon: () => <UpOutlined />

packages/app/src/components/form.fields/color-select/index.tsx

@@ -0,0 +1,40 @@
+import { connect } from '@formily/react-schema-renderer'
+import React from 'react';
+import { Select, Tag } from 'antd';
+import {
+  Select as AntdSelect,
+  mapStyledProps,
+  mapTextComponent
+} from '../shared'
+
+export const ColorSelect = connect({
+  getProps: mapStyledProps,
+  getComponent: mapTextComponent,
+})((props) => {
+
+  const colors = {
+    'red': '薄暮',
+    'magenta': '法式洋红',
+    'volcano': '火山',
+    'orange': '日暮',
+    'gold': '金盏花',
+    'lime': '青柠',
+    'green': '极光绿',
+    'cyan': '明青',
+    'blue': '拂晓蓝',
+    'geekblue': '极客蓝',
+    'purple': '酱紫',
+  };
+
+  return (
+    <Select {...props}>
+      {Object.keys(colors).map(color => (
+        <Select.Option value={color}>
+          <Tag color={color}>{colors[color]}</Tag>
+        </Select.Option>
+      ))}
+    </Select>
+  )
+})
+
+export default ColorSelect

packages/app/src/components/form.fields/registry.ts

@@ -18,6 +18,7 @@ import { RemoteSelect } from './remote-select'
 import { DrawerSelect } from './drawer-select'
 import { SubTable } from './sub-table'
 import { Icon } from './icons'
+import { ColorSelect } from './color-select'
 
 export const setup = () => {
   registerFormFields({
@@ -49,6 +50,7 @@ export const setup = () => {
     filter: Filter,
     remoteSelect: RemoteSelect,
     drawerSelect: DrawerSelect,
+    colorSelect: ColorSelect,
     subTable: SubTable,
   })
 }

packages/app/src/components/views/Field/index.tsx

@@ -151,7 +151,7 @@ export function DataSourceField(props: any) {
     return value.map(val => {
       const item = items.find(item => item.value === val);
       return (
-        <Tag>
+        <Tag color={item.color}>
           {item ? item.label : val}
         </Tag>
       )
@@ -159,7 +159,7 @@ export function DataSourceField(props: any) {
   }
   const item = items.find(item => item.value === value);
   return (
-    <Tag>
+    <Tag color={item.color}>
       {item ? item.label : value}
     </Tag>
   )

packages/app/src/global.less

@@ -55,4 +55,36 @@
       width: 100% !important;
     }
   }
+}
+
+.data-source-table {
+  .ant-table-thead .ant-table-cell {
+    padding: 11px;
+  }
+  .ant-table-tbody .ant-table-cell {
+    padding: 0;
+  }
+  .ant-form-item {
+    margin-bottom: 0;
+    .ant-btn {
+      border: 0;
+      box-shadow: none;
+      background: none;
+      margin-right: 0;
+    }
+    .ant-form-item-explain.ant-form-item-explain-error {
+      position: absolute;
+      pointer-events: none;
+      padding: 5px 11px;
+    }
+  }
+  + .array-table-addition {
+    border: 1px dashed #d9d9d9;
+    text-align: center;
+    border-radius: 2px !important;
+    .ant-btn {
+      display: block;
+      width: 100%;
+    }
+  }
 }

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

@@ -226,6 +226,7 @@ export default {
       title: '每页显示几行数据',
       defaultValue: 50,
       dataSource: [
+        {label: '10', value: 10},
         {label: '20', value: 20},
         {label: '50', value: 50},
         {label: '100', value: 100},

packages/plugin-collections/src/hooks/fields-before-validate.ts

@@ -1,4 +1,4 @@
-import FieldModel from '../models/field';
+import FieldModel, { generateValueName } from '../models/field';
 import _ from 'lodash';
 
 export default async function (model: FieldModel, options) {
@@ -14,4 +14,14 @@ export default async function (model: FieldModel, options) {
       model.set('collection_name', target);
     }
   }
+
+  const dataSource = model.get('dataSource');
+  if (Array.isArray(dataSource)) {
+    model.set('dataSource', dataSource.map(item => {
+      if (!item.value) {
+        item.value = generateValueName();
+      }
+      return {...item};
+    }));
+  }
 }

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

@@ -113,7 +113,7 @@ export const attachment = {
   options: {
     interface: 'attachment',
     type: 'belongsToMany',
-    filterable: true,
+    filterable: false,
     target: 'attachments',
     // storage: {
     //   name: 'local',

packages/plugin-collections/src/models/field.ts

@@ -13,6 +13,10 @@ interface FieldImportOptions extends SaveOptions {
   collectionName?: string;
 }
 
+export function generateValueName(title?: string): string {
+  return `${Math.random().toString(36).replace('0.', '').slice(-4).padStart(4, '0')}`;
+}
+
 export function generateFieldName(title?: string): string {
   return `f_${Math.random().toString(36).replace('0.', '').slice(-4).padStart(4, '0')}`;
 }

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

@@ -54,9 +54,43 @@ const transforms = {
       if (field.get('component.tooltip')) {
         prop.description = field.get('component.tooltip');
       }
-      // if (field.get('name') === 'dataSource') {
-      //   set(prop, 'items.properties.value.visible', false);
-      // }
+      if (field.get('name') === 'dataSource') {
+        
+        set(prop, 'x-component-props.operationsWidth', 'auto');
+        set(prop, 'x-component-props.bordered', true);
+        set(prop, 'x-component-props.className', 'data-source-table');
+        const properties = {};
+        if (ctx.state.developerMode) {
+          Object.assign(properties, {
+            value: {
+              type: "string",
+              title: "值",
+              // required: true,
+              'x-component-props': {
+                bordered: false,
+              },
+            },
+          });
+        }
+        Object.assign(properties, {
+          label: {
+            type: "string",
+            title: "选项",
+            required: true,
+            'x-component-props': {
+              bordered: false,
+            },
+          },
+          color: {
+            type: "colorSelect",
+            title: "颜色",
+            'x-component-props': {
+              bordered: false,
+            },
+          },
+        });
+        set(prop, 'items.properties', properties);
+      }
       if (['number', 'percent'].includes(interfaceType) && field.get('precision')) {
         set(prop, 'x-component-props.step', field.get('precision'));
       }