feat(metadata): device metadata ui design

src/pages/device/Instance/Detail/Metadata/ItemDetail/index.tsx

@@ -60,7 +60,35 @@ const ItemDetail = observer(() => {
         title: '数据类型',
         required: true,
         'x-decorator': 'FormItem',
-        'x-component': 'Input',
+        'x-component': 'Select',
+        enum: [
+          { label: 'int(整数型)', value: 'int' },
+          { label: 'long(长整数型)', value: 'long' },
+          { label: 'double(双精度浮点数)', value: 'double' },
+          { label: 'float(单精度浮点数)', value: 'float' },
+          { label: 'text(字符串)', value: 'string' },
+          { label: 'bool(布尔型)', value: 'boolean' },
+          { label: 'date(时间型)', value: 'date' },
+          { label: 'enum(枚举)', value: 'enum' },
+          { label: 'array(数组)', value: 'array' },
+          { label: 'object(结构体)', value: 'object' },
+          { label: 'geoPoint(地理位置)', value: 'geoPoint' },
+        ],
+      },
+      json: {
+        type: 'object',
+        title: 'JSON对象',
+        'x-display': 'none',
+        'x-decorator': 'FormItem',
+        'x-component': 'JsonParamComponent',
+        'x-reactions': {
+          dependencies: ['dataType'],
+          fulfill: {
+            state: {
+              display: '{{($deps[0]==="object")?"visible":"none"}}',
+            },
+          },
+        },
       },
       readOnly: {
         type: 'string',
@@ -89,7 +117,7 @@ const ItemDetail = observer(() => {
   };
   return (
     <>
-      <Form form={form} labelCol={5} wrapperCol={16} onAutoSubmit={console.log} size="small">
+      <Form form={form} labelCol={8} wrapperCol={16} onAutoSubmit={console.log} size="small">
         <SchemaField schema={schema} />
       </Form>
     </>

src/pages/device/Instance/Detail/Metadata/ItemParam/index.tsx

@@ -1,6 +1,6 @@
 import { createSchemaField, observer } from '@formily/react';
 import type { IFieldState } from '@formily/core';
-import { createForm } from '@formily/core';
+import { createForm, onFieldValueChange } from '@formily/core';
 import {
   FormItem,
   Form,
@@ -13,20 +13,30 @@ import {
   ArrayItems,
   Editable,
   Radio,
+  PreviewText,
 } from '@formily/antd';
-import { service } from '@/pages/device/Instance';
+import { InstanceModel, service } from '@/pages/device/Instance';
 import type { Unit } from '@/pages/device/Instance/typings';
 import type { ISchema } from '@formily/json-schema';
 import ProCard from '@ant-design/pro-card';
 
-// interface Props {
-//   value: any;
-//   onChange: (data: any) => void;
-// }
-
 const ItemParam = observer(() => {
   const form = createForm({
     validateFirst: true,
+    readPretty: true,
+    effects() {
+      onFieldValueChange('type', (field) => {
+        const type = field.query('type').value();
+        const id = field.query('id').value();
+        const temp = Array.from(InstanceModel.params).map((item) => item.split('-$')[0]);
+        const includes = new Set(temp).has(id);
+        if (includes && type !== 'object') {
+          InstanceModel.params.delete(`${id}-$${InstanceModel.params.size - 1}`);
+        } else if (id && type === 'object') {
+          InstanceModel.params.add(`${id}-$${InstanceModel.params.size}`);
+        }
+      });
+    },
   });
 
   const SchemaField = createSchemaField({
@@ -41,7 +51,6 @@ const ItemParam = observer(() => {
       ArrayItems,
       Editable,
       Radio,
-      // ItemParamComponent
     },
     scope: {
       fetchUnits: async (field: IFieldState) => {
@@ -140,21 +149,6 @@ const ItemParam = observer(() => {
           },
         },
       },
-      // json: {
-      //   type: 'object',
-      //   title: 'JSON对象',
-      //   'x-display': 'none',
-      //   'x-decorator': 'FormItem',
-      //   'x-component': 'ItemParamComponent',
-      //   'x-reactions': {
-      //     dependencies: ['type'],
-      //     fulfill: {
-      //       state: {
-      //         display: '{{($deps[0]==="object")?"visible":"none"}}',
-      //       },
-      //     },
-      //   },
-      // },
       unit: {
         type: 'string',
         title: '单位',
@@ -179,24 +173,12 @@ const ItemParam = observer(() => {
       colSpan={500}
       style={{ height: '40vh', marginRight: 10 }}
     >
-      <Form form={form} labelCol={8} wrapperCol={13} size="small">
-        <SchemaField schema={schema} />
-      </Form>
+      <PreviewText.Placeholder value="-">
+        <Form form={form} labelCol={8} wrapperCol={13} size="small">
+          <SchemaField schema={schema} />
+        </Form>
+      </PreviewText.Placeholder>
     </ProCard>
   );
 });
 export default ItemParam;
-//
-// const ItemParamComponent = connect(
-//   ItemParam,
-//   mapProps({}, props => {
-//     const {onChange} = props;
-//     return {
-//       ...props,
-//       onChange(value: string) {
-//         onChange?.(value);
-//       }
-//     };
-//   })
-// );
-// export default ItemParamComponent;

src/pages/device/Instance/Detail/Metadata/index.tsx

@@ -6,9 +6,13 @@ import type { DeviceMetadata } from '@/pages/device/Product/typings';
 import ItemList from '@/pages/device/Instance/Detail/Metadata/ItemList';
 import ItemDetail from '@/pages/device/Instance/Detail/Metadata/ItemDetail';
 import ItemParam from '@/pages/device/Instance/Detail/Metadata/ItemParam';
+import { useEffect } from 'react';
 
 const Metadata = observer(() => {
   const metadata = JSON.parse(InstanceModel.detail.metadata as string) as DeviceMetadata;
+  useEffect(() => {
+    InstanceModel.params = new Set<string>(['test']);
+  }, []);
   return (
     <ProCard
       tabs={{
@@ -17,7 +21,7 @@ const Metadata = observer(() => {
     >
       <ProCard.TabPane tab="属性" key="property" style={{ overflowX: 'auto' }}>
         <Row gutter={[16, 16]} style={{ height: '50vh' }} wrap={false}>
-          <Col span={7}>
+          <Col span={6}>
             <ProCard
               bordered={true}
               extra={
@@ -36,26 +40,21 @@ const Metadata = observer(() => {
               <ItemList metadata={metadata} />
             </ProCard>
           </Col>
-          <Col span={7}>
+          <Col span={5}>
             <ProCard
               extra={<a>保存</a>}
               bordered={true}
-              colSpan={12}
               style={{ height: '40vh', marginRight: 10 }}
             >
               <ItemDetail />
             </ProCard>
           </Col>
 
-          <Col span={7}>
-            <ItemParam />
-          </Col>
-          <Col span={7}>
-            <ItemParam />
-          </Col>
-          <Col span={7}>
-            <ItemParam />
-          </Col>
+          {Array.from(InstanceModel.params).map((item, index) => (
+            <Col span={5} key={index}>
+              <ItemParam />
+            </Col>
+          ))}
         </Row>
       </ProCard.TabPane>
       <ProCard.TabPane tab="事件" key="events">

src/pages/device/Instance/index.tsx

@@ -31,11 +31,14 @@ export const InstanceModel = model<{
   detail: Partial<DeviceInstance>;
   config: any;
   metadataItem: MetadataItem;
+  params: Set<string>; // 处理无限循环Card
+  active?: string; // 当前编辑的Card
 }>({
   current: undefined,
   detail: {},
   config: {},
   metadataItem: {},
+  params: new Set<string>(['test']),
 });
 export const service = new Service('device/instance');
 const Instance = () => {