fix: website首页增加案例

antdpro · Jun 6, 2023 · 0f83a36 · 0f83a36
1 parent 2d5c253
commit 0f83a36
Show file tree

Hide file tree

Showing 11 changed files with 371 additions and 57 deletions.
diff --git a/examples/antdp-base/config/router.json b/examples/antdp-base/config/router.json
@@ -49,6 +49,12 @@
             "name": "编辑表格",
             "locale": "edittable",
             "component": "@/pages/Components/EditTable"
+          },
+          {
+            "path": "/components/proform",
+            "name": "ProForm",
+            "locale": "proform",
+            "component": "@/pages/Components/ProForm"
           }
         ]
       },

diff --git a/examples/antdp-base/mock/login.js b/examples/antdp-base/mock/login.js
@@ -7,6 +7,7 @@ const menus = [
   '/components/quickform',
   '/components/formdetail',
   '/components/edittable',
+  '/components/proform',
   '/list',
   '/list/basiclist',
   '/list/cardlist',

diff --git a/examples/antdp-base/src/layouts/BasicLayout.jsx b/examples/antdp-base/src/layouts/BasicLayout.jsx
@@ -12,13 +12,13 @@ import { SelectLang, useIntl, useModel } from '@umijs/max';
 import 'antd/dist/reset.css';
 import logo from './logo.svg';
 
-const Layout = (props) => {
+const Layout = () => {
   const { token, logout } = useModel('user', (model) => ({ ...model }));
   const [dark, setDark] = useState(false);
   return (
     <Authorized authority={!!token} redirectPath="/login">
       <FloatButton.Group
-        trigger="hover"
+        trigger="click"
         type="primary"
         style={{ right: 94 }}
         icon={<UnorderedListOutlined />}
@@ -29,8 +29,7 @@ const Layout = (props) => {
         />
       </FloatButton.Group>
       <BasicLayout
-        {...props}
-        dark={dark}
+        theme={dark ? 'dark' : 'light'}
         className="antdp-basic-layouts"
         projectName="Ant Design"
         profile={{

diff --git a/examples/antdp-base/src/locales/en-US/menu.js b/examples/antdp-base/src/locales/en-US/menu.js
@@ -6,6 +6,7 @@ export default {
   'menu.components.quickform': 'quickform',
   'menu.components.formdetail': 'formdetail',
   'menu.components.edittable': 'edittable',
+  'menu.components.proform': 'proform',
   'menu.list': 'list pages',
   'menu.list.basiclist': 'basiclist',
   'menu.list.cardlist': 'cardlist',

diff --git a/examples/antdp-base/src/locales/zh-CN/menu.js b/examples/antdp-base/src/locales/zh-CN/menu.js
@@ -6,6 +6,7 @@ export default {
   'menu.components.quickform': '快速表单',
   'menu.components.formdetail': '详情表单',
   'menu.components.edittable': '编辑表格',
+  'menu.components.proform': 'ProForm',
   'menu.list': '列表页',
   'menu.list.basiclist': '基础列表',
   'menu.list.cardlist': '卡片列表',

diff --git a/examples/antdp-base/src/pages/Components/FormDetail/index.jsx b/examples/antdp-base/src/pages/Components/FormDetail/index.jsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { FormDetail } from '@antdp/antdp-ui';
 import { Card, Space, Table, Steps } from 'antd';
 import CardDes from '@/components/CardDes';

diff --git a/examples/antdp-base/src/pages/Components/ProForm/index.jsx b/examples/antdp-base/src/pages/Components/ProForm/index.jsx
@@ -0,0 +1,126 @@
+import { BetaSchemaForm } from '@ant-design/pro-components';
+import { Input, Card, Space } from 'antd';
+import CardDes from '@/components/CardDes';
+
+const valueEnum = {
+  all: { text: '全部', status: 'Default' },
+  open: {
+    text: '未解决',
+    status: 'Error',
+  },
+  closed: {
+    text: '已解决',
+    status: 'Success',
+    disabled: true,
+  },
+  processing: {
+    text: '解决中',
+    status: 'Processing',
+  },
+};
+
+const columns = [
+  {
+    title: '标题',
+    dataIndex: 'title',
+    initialValue: '必填',
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '此项为必填项',
+        },
+      ],
+    },
+    width: 'm',
+  },
+  {
+    title: '状态',
+    dataIndex: 'state',
+    valueType: 'select',
+    valueEnum,
+    width: 'm',
+    tooltip: '当title为disabled时状态无法选择',
+    dependencies: ['title'],
+    fieldProps: (form) => {
+      if (form.getFieldValue('title') === 'disabled') {
+        return {
+          disabled: true,
+          placeholder: 'disabled',
+        };
+      } else {
+        return {
+          placeholder: 'normal',
+        };
+      }
+    },
+  },
+  {
+    title: '标签',
+    dataIndex: 'labels',
+    width: 'm',
+    tooltip: '当title为必填时此项将为必填',
+    dependencies: ['title'],
+    formItemProps(form) {
+      if (form.getFieldValue('title') === '必填') {
+        return {
+          rules: [
+            {
+              required: true,
+            },
+          ],
+        };
+      } else {
+        return {};
+      }
+    },
+  },
+  {
+    valueType: 'dependency',
+    name: ['title'],
+    columns: ({ title }) => {
+      return title !== 'hidden'
+        ? [
+            {
+              title: 'title为hidden时隐藏',
+              dataIndex: 'hidden',
+              valueType: 'date',
+              renderFormItem: () => {
+                return <Input />;
+              },
+            },
+          ]
+        : [];
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'showTime',
+    dataIndex: 'createName',
+    valueType: 'date',
+  },
+  {
+    valueType: 'divider',
+  },
+];
+
+export default () => {
+  return (
+    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
+      <CardDes
+        title="Schema Form - JSON 表单"
+        description="@ant-design/pro-components SchemaForm 是根据 JSON Schema 来生成表单的工具。SchemaForm 会根据 valueType 来映射成不同的表单项。"
+      />
+      <Card>
+        <BetaSchemaForm
+          shouldUpdate={false}
+          layoutType="Form"
+          onFinish={async (values) => {
+            console.log(values);
+          }}
+          columns={columns}
+        />
+      </Card>
+    </Space>
+  );
+};