2023-05-15 15:11:05 +08:00
|
|
|
import { ColorPicker, Form, Input, InputNumber, Slider, Space, Typography, Watermark } from 'antd';
|
|
|
|
import type { Color } from 'antd/es/color-picker';
|
2022-12-08 18:06:36 +08:00
|
|
|
import React, { useMemo, useState } from 'react';
|
|
|
|
|
|
|
|
const { Paragraph } = Typography;
|
|
|
|
|
2023-05-15 15:11:05 +08:00
|
|
|
interface WatermarkConfig {
|
|
|
|
content: string;
|
|
|
|
color: string | Color;
|
|
|
|
fontSize: number;
|
|
|
|
zIndex: number;
|
|
|
|
rotate: number;
|
|
|
|
gap: [number, number];
|
|
|
|
offset?: [number, number];
|
2022-12-08 18:06:36 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
const App: React.FC = () => {
|
|
|
|
const [form] = Form.useForm();
|
2023-05-15 15:11:05 +08:00
|
|
|
const [config, setConfig] = useState<WatermarkConfig>({
|
2022-12-08 18:06:36 +08:00
|
|
|
content: 'Ant Design',
|
2023-05-15 15:11:05 +08:00
|
|
|
color: 'rgba(0, 0, 0, 0.15)',
|
2022-12-08 18:06:36 +08:00
|
|
|
fontSize: 16,
|
|
|
|
zIndex: 11,
|
|
|
|
rotate: -22,
|
2023-05-15 15:11:05 +08:00
|
|
|
gap: [100, 100],
|
2022-12-08 18:06:36 +08:00
|
|
|
offset: undefined,
|
|
|
|
});
|
|
|
|
const { content, color, fontSize, zIndex, rotate, gap, offset } = config;
|
|
|
|
|
|
|
|
const watermarkProps = useMemo(
|
|
|
|
() => ({
|
|
|
|
content,
|
|
|
|
font: {
|
2023-05-15 15:11:05 +08:00
|
|
|
color: typeof color === 'string' ? color : color.toRgbString(),
|
2022-12-08 18:06:36 +08:00
|
|
|
fontSize,
|
|
|
|
},
|
|
|
|
zIndex,
|
|
|
|
rotate,
|
|
|
|
gap,
|
|
|
|
offset,
|
|
|
|
}),
|
|
|
|
[config],
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div style={{ display: 'flex' }}>
|
|
|
|
<Watermark {...watermarkProps}>
|
|
|
|
<Typography>
|
|
|
|
<Paragraph>
|
|
|
|
The light-speed iteration of the digital world makes products more complex. However,
|
|
|
|
human consciousness and attention resources are limited. Facing this design
|
|
|
|
contradiction, the pursuit of natural interaction will be the consistent direction of
|
|
|
|
Ant Design.
|
|
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
|
|
Natural user cognition: According to cognitive psychology, about 80% of external
|
|
|
|
information is obtained through visual channels. The most important visual elements in
|
|
|
|
the interface design, including layout, colors, illustrations, icons, etc., should fully
|
|
|
|
absorb the laws of nature, thereby reducing the user's cognitive cost and bringing
|
|
|
|
authentic and smooth feelings. In some scenarios, opportunely adding other sensory
|
|
|
|
channels such as hearing, touch can create a richer and more natural product experience.
|
|
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
|
|
Natural user behavior: In the interaction with the system, the designer should fully
|
|
|
|
understand the relationship between users, system roles, and task objectives, and also
|
|
|
|
contextually organize system functions and services. At the same time, a series of
|
|
|
|
methods such as behavior analysis, artificial intelligence and sensors could be applied
|
|
|
|
to assist users to make effective decisions and reduce extra operations of users, to
|
|
|
|
save users' mental and physical resources and make human-computer interaction more
|
|
|
|
natural.
|
|
|
|
</Paragraph>
|
|
|
|
</Typography>
|
|
|
|
<img
|
|
|
|
style={{
|
|
|
|
zIndex: 10,
|
|
|
|
width: '100%',
|
|
|
|
maxWidth: 800,
|
|
|
|
position: 'relative',
|
|
|
|
}}
|
|
|
|
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
|
|
|
|
alt="示例图片"
|
|
|
|
/>
|
|
|
|
</Watermark>
|
|
|
|
<Form
|
|
|
|
style={{
|
|
|
|
width: 280,
|
|
|
|
flexShrink: 0,
|
|
|
|
borderLeft: '1px solid #eee',
|
|
|
|
paddingLeft: 20,
|
|
|
|
marginLeft: 20,
|
|
|
|
}}
|
|
|
|
form={form}
|
|
|
|
layout="vertical"
|
|
|
|
initialValues={config}
|
|
|
|
onValuesChange={(_, values) => {
|
|
|
|
setConfig(values);
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Form.Item name="content" label="Content">
|
|
|
|
<Input placeholder="请输入" />
|
|
|
|
</Form.Item>
|
|
|
|
<Form.Item name="color" label="Color">
|
|
|
|
<ColorPicker />
|
|
|
|
</Form.Item>
|
|
|
|
<Form.Item name="fontSize" label="FontSize">
|
|
|
|
<Slider step={1} min={0} max={100} />
|
|
|
|
</Form.Item>
|
|
|
|
<Form.Item name="zIndex" label="zIndex">
|
|
|
|
<Slider step={1} min={0} max={100} />
|
|
|
|
</Form.Item>
|
|
|
|
<Form.Item name="rotate" label="Rotate">
|
|
|
|
<Slider step={1} min={-180} max={180} />
|
|
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Gap" style={{ marginBottom: 0 }}>
|
|
|
|
<Space style={{ display: 'flex' }} align="baseline">
|
|
|
|
<Form.Item name={['gap', 0]}>
|
|
|
|
<InputNumber placeholder="gapX" style={{ width: '100%' }} />
|
|
|
|
</Form.Item>
|
|
|
|
<Form.Item name={['gap', 1]}>
|
|
|
|
<InputNumber placeholder="gapY" style={{ width: '100%' }} />
|
|
|
|
</Form.Item>
|
|
|
|
</Space>
|
|
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Offset" style={{ marginBottom: 0 }}>
|
|
|
|
<Space style={{ display: 'flex' }} align="baseline">
|
|
|
|
<Form.Item name={['offset', 0]}>
|
|
|
|
<InputNumber placeholder="offsetLeft" style={{ width: '100%' }} />
|
|
|
|
</Form.Item>
|
|
|
|
<Form.Item name={['offset', 1]}>
|
|
|
|
<InputNumber placeholder="offsetTop" style={{ width: '100%' }} />
|
|
|
|
</Form.Item>
|
|
|
|
</Space>
|
|
|
|
</Form.Item>
|
|
|
|
</Form>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default App;
|