docs(client): add variable docs (#1556)

packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx

@@ -0,0 +1,42 @@
+/**
+ * title: Variable.Input
+ */
+import { FormItem } from '@formily/antd';
+import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
+import React from 'react';
+
+const scope = [
+  { label: 'v1', value: 'v1' },
+  { label: 'nested', value: 'nested', children: [{ label: 'v2', value: 'v2'}] },
+];
+
+const schema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'string',
+      title: `替换模式`,
+      'x-decorator': 'FormItem',
+      'x-component': 'Variable.Input',
+      'x-component-props': {
+        scope,
+      },
+      // 'x-reactions': {
+      //   target: 'read',
+      //   fulfill: {
+      //     state: {
+      //       value: '{{$self.value}}',
+      //     },
+      //   },
+      // },
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ Variable, FormItem }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};

packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx

@@ -0,0 +1,42 @@
+/**
+ * title: Variable.Input
+ */
+ import { FormItem } from '@formily/antd';
+ import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
+ import React from 'react';
+
+ const scope = [
+   { label: 'v1', value: 'v1' },
+   { label: 'nested', value: 'nested', children: [{ label: 'v2', value: 'v2'}] },
+ ];
+
+ const schema = {
+   type: 'object',
+   properties: {
+     input: {
+       type: 'string',
+       title: `表达式模式`,
+       'x-decorator': 'FormItem',
+       'x-component': 'Variable.TextArea',
+       'x-component-props': {
+         scope,
+       },
+       // 'x-reactions': {
+       //   target: 'read',
+       //   fulfill: {
+       //     state: {
+       //       value: '{{$self.value}}',
+       //     },
+       //   },
+       // },
+     },
+   },
+ };
+
+ export default () => {
+   return (
+     <SchemaComponentProvider components={{ Variable, FormItem }}>
+       <SchemaComponent schema={schema} />
+     </SchemaComponentProvider>
+   );
+ };

packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx

@@ -0,0 +1,42 @@
+/**
+ * title: Variable.Input
+ */
+ import { FormItem } from '@formily/antd';
+ import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client';
+ import React from 'react';
+
+ const scope = [
+   { label: 'v1', value: 'v1' },
+   { label: 'nested', value: 'nested', children: [{ label: 'v2', value: 'v2'}] },
+ ];
+
+ const schema = {
+   type: 'object',
+   properties: {
+     input: {
+       type: 'string',
+       title: `JSON 模式`,
+       'x-decorator': 'FormItem',
+       'x-component': 'Variable.JSON',
+       'x-component-props': {
+         scope,
+       },
+       // 'x-reactions': {
+       //   target: 'read',
+       //   fulfill: {
+       //     state: {
+       //       value: '{{$self.value}}',
+       //     },
+       //   },
+       // },
+     },
+   },
+ };
+
+ export default () => {
+   return (
+     <SchemaComponentProvider components={{ Variable, FormItem }}>
+       <SchemaComponent schema={schema} />
+     </SchemaComponentProvider>
+   );
+ };

packages/core/client/src/schema-component/antd/variable/index.md

@@ -0,0 +1,22 @@
+---
+nav:
+  path: /client
+group:
+  path: /schema-components
+---
+
+# Variable
+
+## Examples
+
+### `Variable.Input`
+
+<code src="./demos/demo1.tsx" />
+
+### `Variable.TextArea`
+
+<code src="./demos/demo2.tsx" />
+
+### `Variable.JSON`
+
+<code src="./demos/demo3.tsx" />