28 |
段落布局
35 |Fusion 简介
39 |41 | Fusion 42 | 是一套企业级中后台UI的解决方案，致力于解决设计师与前端在产品体验一致性、工作协同、开发效率方面的问题。通过协助业务线构建设计系统，提供系统化工具协助设计师前端使用设计系统，下游提供一站式设计项目协作平台；打通互联网产品从设计到开发的工作流。 43 |
44 |
46 |
58 | 水平对齐方式：
59 |
60 |
89 | 内容间隙(spacing)：
90 |
111 | 启用元素垂直间距：
112 |
117 |
128 |
131 |
134 |
137 |
140 |
151 |
26 |
字体
33 |段落中的纯文本
38 |
42 |
53 |
62 |
34 |
40 | 
44 |
46 | 
50 |
55 | 
59 |
61 | 
65 |
70 | 
74 |
76 | 
80 |
88 |
32 | 35 | 38 |
39 | ); 40 | }; 41 | 42 | const columns = new Array(4).fill({ 43 | dataIndex: 'data', 44 | title: 'Data', 45 | width: 200, 46 | }); 47 | columns.unshift({ 48 | dataIndex: 'id', 49 | title: 'Id', 50 | width: 100, 51 | lock: 'left', 52 | }); 53 | columns.push({ 54 | dataIndex: 'state', 55 | title: 'State', 56 | width: 200, 57 | }); 58 | columns.push({ 59 | title: 'Action', 60 | width: 100, 61 | align: 'center', 62 | cell: () => , 63 | lock: 'right', 64 | }); 65 | 66 | const dataSource = [ 67 | { 68 | id: 30000, 69 | data: '$13.02', 70 | state: 'normal', 71 | }, 72 | { 73 | id: 30001, 74 | data: '$16.02', 75 | state: 'normal', 76 | }, 77 | { 78 | id: 30002, 79 | data: '$63.0002', 80 | state: 'error', 81 | }, 82 | ]; 83 | 84 | const orderList = [ 85 | { 86 | id: 1, 87 | name: '蓝瓶咖啡线下体验店室内设计1', 88 | state: '进行中', 89 | level: 'high', 90 | }, 91 | { 92 | id: 2, 93 | name: '双12投放 Banner', 94 | state: '进行中', 95 | level: 'high', 96 | }, 97 | { 98 | id: 3, 99 | name: 'Global 大促活动', 100 | state: '进行中', 101 | level: 'high', 102 | }, 103 | { 104 | id: 4, 105 | name: 'Banner 拓展', 106 | state: '进行中', 107 | level: 'middle', 108 | }, 109 | { 110 | id: 5, 111 | name: '类目市场宣传设计', 112 | state: '待处理', 113 | level: 'low', 114 | }, 115 | { 116 | id: 6, 117 | name: '类目市场宣传设计', 118 | state: '待处理', 119 | level: 'low', 120 | }, 121 | { 122 | id: 7, 123 | name: '类目市场宣传设计', 124 | state: '待处理', 125 | level: 'low', 126 | }, 127 | ]; 128 | const timeLineList = [ 129 | { 130 | planName: '财经周会', 131 | planAddress: '深圳 T4-4-1；杭州 7-4-9-N', 132 | planTime: '09:00', 133 | planDuaring: '2小时', 134 | }, 135 | { 136 | planName: '财经周会', 137 | planAddress: '深圳 T4-4-1；杭州 7-4-9-N', 138 | planTime: '11:00', 139 | planDuaring: '2小时', 140 | }, 141 | ]; 142 | const colorMap = { 143 | high: 'red', 144 | middle: 'yellow', 145 | low: 'green', 146 | }; 147 | const renderLevel = (text, index) => ( 148 | 149 |
165 |
描述组件之间的间距关系
169 |
176 |
177 |
178 |
179 |
185 |
早上好, 潕量 !
134 |135 | 美好的一天，从智能、创意、无缝的协作开始。我们将专注处理你专注的事情! 136 |
137 |项目数
141 |56
142 |团队内排名
145 |146 | 8/24 147 |
148 |项目数
151 |56
152 |
161 |
170 | 阮小五 在 设计中台 新建项目 Fusion Design
171 | （「在」的间距丢了）
172 | 4小时前
179 |
188 | 阮小五 将 新版本迭代 更新为已发布（lastchild 间距问题）
189 | 4小时前
199 | 共 2 个日程 200 |
201 |断点：
72 |
73 | 调整窗口尺寸，查看不同断点下的显示效果。 窗口宽度:
74 |
{props.children || '100% x 60'}
31 |
41 |
区块
47 |Simple Card
54 |SubTitle
55 | 56 | } 57 | extra={link} 58 | > 59 |60 | Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum 61 | nec, eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat 62 | pertinacia an, cu verterem praesent quo. 63 |
64 |Simple Card
71 |SubTitle
72 | 73 | } 74 | extra={link} 75 | divider 76 | > 77 |78 | Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum 79 | nec, eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat 80 | pertinacia an, cu verterem praesent quo. 81 |
82 |
89 | Simple Card
93 |SubTitle
94 |100 | Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium 101 | quaerendum nec, eos ex recteque mediocritatem, ex usu assum legendos temporibus. 102 | Ius feugiat pertinacia an, cu verterem praesent quo. 103 |
104 |
132 |
85 |
96 |
{title}
: title} 211 |216 | {extra} 217 |
218 | ) : ( 219 | extra 220 | )} 221 |{_children};
69 | }
70 |
71 | if (mark) {
72 | _children = {_children};
73 | }
74 | return _children;
75 | }, [children, mark, code, deleteProp, underline, strong]);
76 |
77 | const newStyle = useMemo(
78 | () => ({
79 | ...(color ? { color } : null),
80 | ...(backgroundColor ? { backgroundColor } : null),
81 | textAlign: align,
82 | ...style,
83 | }),
84 | [color, backgroundColor, align, style],
85 | );
86 |
87 | return createElement(
88 | component,
89 | {
90 | ...others,
91 | style: newStyle,
92 | className: cls,
93 | },
94 | memorizedChildren,
95 | );
96 | };
97 |
98 | Text.displayName = 'Text';
99 | Text.typeMark = 'Text';
100 | Text.defaultProps = {
101 | align: 'left',
102 | type: 'body2',
103 | component: 'span',
104 | };
105 |
106 | export default Text;
107 |
--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | import { isNumber, isString } from 'lodash-es';
2 | import { DEFAULT_BREAK_POINTS } from '@/common/constant';
3 | import { BreakPoint, BreakPoints } from '@/types';
4 |
5 | /**
6 | * 获取当前屏幕断点
7 | * @param breakPoints
8 | */
9 | export function getCurBreakPoint(breakPoints: BreakPoints): BreakPoint {
10 | let screenWidths: number[] = [];
11 | const tmpMap: any = {};
12 | const availWidth = document.body.clientWidth;
13 |
14 | breakPoints.forEach((bp) => {
15 | const { width } = bp;
16 | screenWidths.push(width);
17 | tmpMap[width] = bp;
18 | });
19 |
20 | screenWidths = screenWidths.sort((a, b) => a - b);
21 |
22 | const len = screenWidths.length;
23 |
24 | let ret = tmpMap[screenWidths[0]];
25 |
26 | if (availWidth > screenWidths[len - 1]) {
27 | ret = tmpMap[screenWidths[len - 1]];
28 | } else {
29 | for (let i = 1; i < len; i++) {
30 | const breakPoint = tmpMap[screenWidths[i]];
31 |
32 | if (screenWidths[i - 1] <= availWidth && availWidth < screenWidths[i]) {
33 | ret = breakPoint;
34 | }
35 | }
36 | }
37 |
38 | return ret;
39 | }
40 |
41 | /**
42 | * 获取最大断点列数
43 | */
44 | export function getMaxNumberOfColumns(breakPoints: BreakPoints = DEFAULT_BREAK_POINTS): number {
45 | const screenWidths = breakPoints.map((bp) => bp.width);
46 | const maxWidth = Math.max(...screenWidths);
47 | const bp = breakPoints.find((breakPoint) => breakPoint?.width === maxWidth);
48 |
49 | return bp?.numberOfColumns || 12;
50 | }
51 |
52 | /**
53 | * 是否为标准的预设尺寸
54 | * @param val
55 | */
56 | export function isPresetSize(val: any): boolean {
57 | return ['small', 'medium', 'large'].includes(val);
58 | }
59 |
60 | /**
61 | * 为数值包裹自动单位
62 | * eg:
63 | * wrapUnit(2) -> 2px
64 | * wrapUnit('2em') -> 2em
65 | * @param value
66 | * @param unit
67 | */
68 | export function wrapUnit(value: number | string | undefined, unit = 'px') {
69 | return isNumber(value) ? `${value}${unit}` : value;
70 | }
71 |
72 | /**
73 | * 是否为一个有效的 gap 值:
74 | * eg: 0.9 / -9px / auto
75 | * @param val
76 | */
77 | export function isValidGap(val: any): boolean {
78 | const gapValReg = /^-?[0-9]*\.?[0-9]+([a-z|A-z]*)$/;
79 | return isNumber(val) || (isString(val) && (gapValReg.test(val) || val === 'auto'));
80 | }
81 |
82 | /**
83 | * 获取最终的 gap 值
84 | * @param contextGap 上下文中的 gap 值
85 | * @param propGap 属性中定义的 gap 值
86 | */
87 | export function getGapVal(contextGap: any, propGap: any) {
88 | if (isValidGap(propGap)) {
89 | return wrapUnit(propGap);
90 | } else if (isValidGap(contextGap)) {
91 | return wrapUnit(contextGap);
92 | }
93 | return undefined;
94 | }
95 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "buildOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": ".",
6 | "outDir": "build",
7 | "module": "esnext",
8 | "target": "es6",
9 | "jsx": "react",
10 | "moduleResolution": "node",
11 | "lib": ["es6", "dom"],
12 | "sourceMap": true,
13 | "allowJs": true,
14 | "noUnusedLocals": true,
15 | "allowSyntheticDefaultImports": true,
16 | "noImplicitReturns": true,
17 | "noImplicitThis": true,
18 | "noImplicitAny": true,
19 | "skipLibCheck": true,
20 | "strict": true,
21 | "paths": {
22 | "@/*": ["./src/*"]
23 | }
24 | },
25 | "include": ["src/**/*.ts", "src/**/*.tsx", "global.d.ts", "lowcode/**/*.ts", "lowcode/**/*.tsx"],
26 | "exclude": ["node_modules", "build", "public"]
27 | }
28 |
--------------------------------------------------------------------------------