docs: locale demo update (#40930)

* docs: update local demo

* docs: update

components/config-provider/demo/locale.tsx

@@ -1,5 +1,11 @@
-import type { RadioChangeEvent } from 'antd';
+import { EllipsisOutlined } from '@ant-design/icons';
+import type { RadioChangeEvent, TourProps, UploadFile } from 'antd';
 import {
+  Upload,
+  Tour,
+  Input,
+  Form,
+  QRCode,
   Button,
   Calendar,
   ConfigProvider,
@@ -14,6 +20,9 @@ import {
   theme,
   TimePicker,
   Transfer,
+  Image,
+  InputNumber,
+  Divider,
 } from 'antd';
 import type { Locale } from 'antd/es/locale';
 import enUS from 'antd/locale/en_US';
@@ -43,6 +52,8 @@ const Page: React.FC = () => {
   const { token } = theme.useToken();
 
   const [open, setOpen] = useState(false);
+  const [tourOpen, setTourOpen] = useState(false);
+  const tourRefs = React.useRef<HTMLElement[]>([]);
 
   const showModal = () => {
     setOpen(true);
@@ -66,11 +77,50 @@ const Page: React.FC = () => {
     });
   };
 
+  const steps: TourProps['steps'] = [
+    {
+      title: 'Upload File',
+      description: 'Put your files here.',
+      target: () => tourRefs.current[0],
+    },
+    {
+      title: 'Save',
+      description: 'Save your changes.',
+      target: () => tourRefs.current[1],
+    },
+    {
+      title: 'Other Actions',
+      description: 'Click to see other actions.',
+      target: () => tourRefs.current[2],
+    },
+  ];
+
+  const fileList: UploadFile[] = [
+    {
+      uid: '-1',
+      name: 'image.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+    {
+      uid: '-2',
+      percent: 50,
+      name: 'image.png',
+      status: 'uploading',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+    {
+      uid: '-3',
+      name: 'image.png',
+      status: 'error',
+    },
+  ];
+
   return (
     <Space
       direction="vertical"
       size={[0, 16]}
-      style={{ width: '100%', paddingTop: 16, borderTop: `1px solid #d9d9d9` }}
+      style={{ width: '100%', paddingTop: 16, borderTop: `1px solid ${token.colorBorder}` }}
     >
       <Pagination defaultCurrent={1} total={50} showSizeChanger />
       <Space wrap>
@@ -96,10 +146,55 @@ const Page: React.FC = () => {
       <div style={{ width: 320, border: `1px solid ${token.colorBorder}`, borderRadius: 8 }}>
         <Calendar fullscreen={false} value={dayjs()} />
       </div>
+      <Form name="basic" autoComplete="off" labelCol={{ sm: { span: 4 } }} wrapperCol={{ span: 6 }}>
+        <Form.Item label="Username" name="username" rules={[{ required: true }]}>
+          <Input width={200} />
+        </Form.Item>
+        <Form.Item
+          label="Age"
+          name="age"
+          rules={[{ type: 'number', min: 0, max: 99 }]}
+          initialValue={100}
+        >
+          <InputNumber width={200} />
+        </Form.Item>
+        <Form.Item wrapperCol={{ offset: 2, span: 6 }}>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
+        </Form.Item>
+      </Form>
       <Table dataSource={[]} columns={columns} />
       <Modal title="Locale Modal" open={open} onCancel={hideModal}>
         <p>Locale Modal</p>
       </Modal>
+      <Space wrap size={80}>
+        <QRCode
+          value="https://ant.design/"
+          status="expired"
+          onRefresh={() => console.log('refresh')}
+        />
+        <Image
+          width={160}
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+      </Space>
+      <Upload listType="picture-card" fileList={fileList} />
+      <Divider orientation="left">Tour</Divider>
+      <Button type="primary" onClick={() => setTourOpen(true)}>
+        Begin Tour
+      </Button>
+      <Space>
+        <Button ref={(node) => node && tourRefs.current.splice(0, 0, node)}> Upload</Button>
+        <Button ref={(node) => node && tourRefs.current.splice(1, 0, node)} type="primary">
+          Save
+        </Button>
+        <Button
+          ref={(node) => node && tourRefs.current.splice(2, 0, node)}
+          icon={<EllipsisOutlined />}
+        />
+      </Space>
+      <Tour open={tourOpen} steps={steps} onClose={() => setTourOpen(false)} />
     </Space>
   );
 };