feat(metadata): device metadata ui design

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

@@ -17,6 +17,12 @@ import {
 import { 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({
@@ -35,6 +41,7 @@ const ItemParam = observer(() => {
       ArrayItems,
       Editable,
       Radio,
+      // ItemParamComponent
     },
     scope: {
       fetchUnits: async (field: IFieldState) => {
@@ -95,11 +102,59 @@ const ItemParam = observer(() => {
           dependencies: ['type'],
           fulfill: {
             state: {
-              display: '{{$deps[0]==="int"?"visible"∑:"none"}}',
+              display: '{{($deps[0]==="float"||$deps[0]==="double")?"visible":"none"}}',
+            },
+          },
+        },
+      },
+      maxLength: {
+        type: 'number',
+        title: '最大长度',
+        'x-display': 'none',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input',
+        'x-reactions': {
+          dependencies: ['type'],
+          fulfill: {
+            state: {
+              display: '{{($deps[0]==="string")?"visible":"none"}}',
+            },
+          },
+        },
+      },
+      format: {
+        type: 'string',
+        title: '时间格式',
+        'x-display': 'none',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input',
+        'x-component-props': {
+          placeholder: '默认格式：String类型的UTC时间戳 (毫秒)',
+        },
+        'x-reactions': {
+          dependencies: ['type'],
+          fulfill: {
+            state: {
+              display: '{{($deps[0]==="date")?"visible":"none"}}',
             },
           },
         },
       },
+      // 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: '单位',
@@ -118,9 +173,30 @@ const ItemParam = observer(() => {
     },
   };
   return (
-    <Form form={form} labelCol={8} wrapperCol={13} size="small">
-      <SchemaField schema={schema} />
-    </Form>
+    <ProCard
+      extra={<a>保存</a>}
+      bordered={true}
+      colSpan={500}
+      style={{ height: '40vh', marginRight: 10 }}
+    >
+      <Form form={form} labelCol={8} wrapperCol={13} size="small">
+        <SchemaField schema={schema} />
+      </Form>
+    </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

@@ -16,66 +16,47 @@ const Metadata = observer(() => {
       }}
     >
       <ProCard.TabPane tab="属性" key="property" style={{ overflowX: 'auto' }}>
-        <ProCard gutter={[16, 16]} style={{ height: '50vh' }}>
-          <ProCard
-            bordered={true}
-            colSpan={5}
-            extra={
-              <Row>
-                <Col span={18}>
-                  <Input.Search size="small" />
-                </Col>
-                <Col span={2} />
-                <Col span={4} style={{ alignItems: 'center' }}>
-                  <a>新增</a>
-                </Col>
-              </Row>
-            }
-            style={{ height: '40vh', marginRight: 10 }}
-          >
-            <ItemList metadata={metadata} />
-          </ProCard>
-          <ProCard
-            extra={<a>保存</a>}
-            bordered={true}
-            colSpan={7}
-            style={{ height: '40vh', marginRight: 10 }}
-          >
-            <ItemDetail />
-          </ProCard>
-          <ProCard
-            extra={<a>保存</a>}
-            bordered={true}
-            colSpan={7}
-            style={{ height: '40vh', marginRight: 10 }}
-          >
-            <ItemParam />
-          </ProCard>
-          <ProCard
-            extra={<a>保存</a>}
-            bordered={true}
-            colSpan={7}
-            style={{ height: '40vh', marginRight: 10 }}
-          >
+        <Row gutter={[16, 16]} style={{ height: '50vh' }} wrap={false}>
+          <Col span={7}>
+            <ProCard
+              bordered={true}
+              extra={
+                <Row>
+                  <Col span={18}>
+                    <Input.Search size="small" />
+                  </Col>
+                  <Col span={2} />
+                  <Col span={4} style={{ alignItems: 'center' }}>
+                    <a>新增</a>
+                  </Col>
+                </Row>
+              }
+              style={{ height: '40vh', marginRight: 10 }}
+            >
+              <ItemList metadata={metadata} />
+            </ProCard>
+          </Col>
+          <Col span={7}>
+            <ProCard
+              extra={<a>保存</a>}
+              bordered={true}
+              colSpan={12}
+              style={{ height: '40vh', marginRight: 10 }}
+            >
+              <ItemDetail />
+            </ProCard>
+          </Col>
+
+          <Col span={7}>
             <ItemParam />
-          </ProCard>
-          <ProCard
-            extra={<a>保存</a>}
-            bordered={true}
-            colSpan={7}
-            style={{ height: '40vh', marginRight: 10 }}
-          >
+          </Col>
+          <Col span={7}>
             <ItemParam />
-          </ProCard>
-          <ProCard
-            extra={<a>保存</a>}
-            bordered={true}
-            colSpan={7}
-            style={{ height: '40vh', marginRight: 10, display: '' }}
-          >
+          </Col>
+          <Col span={7}>
             <ItemParam />
-          </ProCard>
-        </ProCard>
+          </Col>
+        </Row>
       </ProCard.TabPane>
       <ProCard.TabPane tab="事件" key="events">
         事件