Skip to content

Commit 99de03f

Browse files
liyuan-mengliyuan-meng
committed
feat: 新增 LightText 组件
1 parent 55476fe commit 99de03f

11 files changed

Lines changed: 575 additions & 1 deletion

File tree

‎.umirc.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ export default defineConfig({
9292
.__dumi-default-layout-hero img { margin-top: -50px }
9393
.__dumi-default-layout-hero h1 { color: white !important }
9494
.__dumi-default-layout-hero .markdown { color: white !important }
95+
.markdown .icon.icon-link { display: none }
9596
`,
9697
],
9798
});

‎src/components/index.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ bodys.style.setProperty(`--shuyunBlue${i + 1}`,color)
1717
}
1818
}
1919

20-
export const version = '2.0.12-3';
20+
export const version = '2.0.14';
2121

2222
export { default as Avatar } from './avatar';
2323

@@ -57,8 +57,12 @@ export { default as Field } from './field';
5757

5858
export { default as Form } from './form';
5959

60+
export { default as Format } from './format';
61+
6062
export { default as Icon } from './icon';
6163

64+
export { default as ImageText } from './image-text';
65+
6266
export { default as Input } from './input';
6367

6468
export { default as InputNumber } from './input-number';
@@ -67,6 +71,8 @@ export { default as InputTag } from './input-tag';
6771

6872
export { default as Layout } from './layout';
6973

74+
export { default as LightText } from './light-text';
75+
7076
export { default as Loading } from './loading';
7177

7278
export { default as Menu } from './menu';

‎src/components/light-text/demos/basic.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
order: 1
3+
title: 基础使用
4+
desc: 最基本的文本高亮功能
5+
---
6+
7+
```jsx
8+
/**
9+
* title: 基础使用
10+
* desc: 最基本的文本高亮功能
11+
*/
12+
import React from 'react';
13+
import { LightText } from 'cloud-react';
14+
15+
class BasicDemo extends React.Component {
16+
render() {
17+
return (
18+
<div style={{ width: 400 }}>
19+
<div style={{ marginBottom: 20 }}>
20+
<h5>原始文本：</h5>
21+
<p>这是一个产品管理系统，用于管理产品的各种信息。</p>
22+
</div>
23+
24+
<div style={{ marginBottom: 20 }}>
25+
<h5>高亮关键词 "产品"：</h5>
26+
<p>
27+
<LightText
28+
originText="这是一个产品管理系统，用于管理产品的各种信息。"
29+
keyWords="产品"
30+
/>
31+
</p>
32+
</div>
33+
34+
<div style={{ marginBottom: 20 }}>
35+
<h5>高亮关键词 "管理"：</h5>
36+
<p>
37+
<LightText
38+
originText="这是一个产品管理系统，用于管理产品的各种信息。"
39+
keyWords="管理"
40+
/>
41+
</p>
42+
</div>
43+
44+
<div>
45+
<h5>高亮多个字符 "系统"：</h5>
46+
<p>
47+
<LightText
48+
originText="这是一个产品管理系统，用于管理产品的各种信息。"
49+
keyWords="系统"
50+
/>
51+
</p>
52+
</div>
53+
</div>
54+
);
55+
}
56+
}
57+
58+
export default BasicDemo;
59+
```

‎src/components/light-text/demos/custom-color.md‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
order: 4
3+
title: 自定义颜色
4+
desc: 自定义高亮文本的颜色
5+
---
6+
7+
```jsx
8+
/**
9+
* title: 自定义颜色
10+
* desc: 自定义高亮文本的颜色
11+
*/
12+
import React from 'react';
13+
import { LightText } from 'cloud-react';
14+
15+
class CustomColorDemo extends React.Component {
16+
render() {
17+
return (
18+
<div style={{ width: 400 }}>
19+
<div style={{ marginBottom: 20 }}>
20+
<h5>默认颜色（蓝色）：</h5>
21+
<p>
22+
<LightText
23+
originText="用户管理系统、产品管理系统、订单管理系统"
24+
keyWords="管理"
25+
/>
26+
</p>
27+
</div>
28+
29+
<div style={{ marginBottom: 20 }}>
30+
<h5>红色高亮：</h5>
31+
<p>
32+
<LightText
33+
originText="用户管理系统、产品管理系统、订单管理系统"
34+
keyWords="管理"
35+
color="#ff4d4f"
36+
/>
37+
</p>
38+
</div>
39+
40+
<div style={{ marginBottom: 20 }}>
41+
<h5>绿色高亮：</h5>
42+
<p>
43+
<LightText
44+
originText="用户管理系统、产品管理系统、订单管理系统"
45+
keyWords="管理"
46+
color="#52c41a"
47+
/>
48+
</p>
49+
</div>
50+
51+
<div style={{ marginBottom: 20 }}>
52+
<h5>橙色高亮：</h5>
53+
<p>
54+
<LightText
55+
originText="用户管理系统、产品管理系统、订单管理系统"
56+
keyWords="管理"
57+
color="#faad14"
58+
/>
59+
</p>
60+
</div>
61+
62+
<div>
63+
<h5>紫色高亮：</h5>
64+
<p>
65+
<LightText
66+
originText="用户管理系统、产品管理系统、订单管理系统"
67+
keyWords="管理"
68+
color="#722ed1"
69+
/>
70+
</p>
71+
</div>
72+
</div>
73+
);
74+
}
75+
}
76+
77+
export default CustomColorDemo;
78+
```

‎src/components/light-text/demos/full-match.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
order: 3
3+
title: 完全匹配
4+
desc: 完全匹配模式，只有文本完全等于关键词时才会高亮
5+
---
6+
7+
```jsx
8+
/**
9+
* title: 完全匹配
10+
* desc: 完全匹配模式，只有文本完全等于关键词时才会高亮
11+
*/
12+
import React from 'react';
13+
import { LightText } from 'cloud-react';
14+
15+
class FullMatchDemo extends React.Component {
16+
render() {
17+
return (
18+
<div style={{ width: 400 }}>
19+
<div style={{ marginBottom: 20 }}>
20+
<h5>完全匹配模式：</h5>
21+
<p>
22+
<LightText
23+
originText="用户管理系统、产品管理系统、订单管理系统"
24+
keyWords="用户管理系统"
25+
isFullMatch={true}
26+
/>
27+
</p>
28+
</div>
29+
30+
<div style={{ marginBottom: 20 }}>
31+
<h5>部分匹配（对比）：</h5>
32+
<p>
33+
<LightText
34+
originText="用户管理系统、产品管理系统、订单管理系统"
35+
keyWords="用户管理系统"
36+
isFullMatch={false}
37+
/>
38+
</p>
39+
</div>
40+
41+
<div style={{ marginBottom: 20 }}>
42+
<h5>完全匹配单个词：</h5>
43+
<p>
44+
<LightText
45+
originText="用户 管理 系统"
46+
keyWords="管理"
47+
isFullMatch={true}
48+
/>
49+
</p>
50+
</div>
51+
52+
<div>
53+
<h5>完全匹配不存在的词：</h5>
54+
<p>
55+
<LightText
56+
originText="用户管理系统、产品管理系统、订单管理系统"
57+
keyWords="完全不存在"
58+
isFullMatch={true}
59+
/>
60+
</p>
61+
</div>
62+
</div>
63+
);
64+
}
65+
}
66+
67+
export default FullMatchDemo;
68+
```

‎src/components/light-text/demos/in-list.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
order: 6
3+
title: 在列表中使用
4+
desc: 在列表项中高亮显示搜索关键词
5+
---
6+
7+
```jsx
8+
/**
9+
* title: 在列表中使用
10+
* desc: 在列表项中高亮显示搜索关键词
11+
*/
12+
import React from 'react';
13+
import { LightText, Input } from 'cloud-react';
14+
15+
class InListDemo extends React.Component {
16+
state = {
17+
searchValue: '管理'
18+
};
19+
20+
handleSearch = (e) => {
21+
this.setState({ searchValue: e.target.value });
22+
};
23+
24+
render() {
25+
const { searchValue } = this.state;
26+
const listData = [
27+
{ id: 1, name: '用户管理系统', desc: '管理用户信息和权限' },
28+
{ id: 2, name: '产品管理系统', desc: '管理产品信息和库存' },
29+
{ id: 3, name: '订单管理系统', desc: '管理订单和交易信息' },
30+
{ id: 4, name: '财务管理系统', desc: '管理财务数据和报表' },
31+
{ id: 5, name: '报表分析系统', desc: '生成各种分析报表' }
32+
];
33+
34+
return (
35+
<div style={{ width: 400 }}>
36+
<div style={{ marginBottom: 20 }}>
37+
<Input
38+
placeholder="输入搜索关键词"
39+
value={searchValue}
40+
onChange={this.handleSearch}
41+
/>
42+
</div>
43+
44+
<div>
45+
{listData.map(item => (
46+
<div key={item.id} style={{
47+
padding: '12px',
48+
border: '1px solid #d9d9d9',
49+
marginBottom: '8px',
50+
borderRadius: '4px'
51+
}}>
52+
<div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
53+
<LightText
54+
originText={item.name}
55+
keyWords={searchValue}
56+
color="#1890ff"
57+
/>
58+
</div>
59+
<div style={{ color: '#666', fontSize: '12px' }}>
60+
<LightText
61+
originText={item.desc}
62+
keyWords={searchValue}
63+
color="#1890ff"
64+
/>
65+
</div>
66+
</div>
67+
))}
68+
</div>
69+
</div>
70+
);
71+
}
72+
}
73+
74+
export default InListDemo;
75+
```

‎src/components/light-text/demos/partial-match.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
order: 2
3+
title: 部分匹配
4+
desc: 默认的部分匹配模式，会高亮所有匹配的字符
5+
---
6+
7+
```jsx
8+
/**
9+
* title: 部分匹配
10+
* desc: 默认的部分匹配模式，会高亮所有匹配的字符
11+
*/
12+
import React from 'react';
13+
import { LightText } from 'cloud-react';
14+
15+
class PartialMatchDemo extends React.Component {
16+
render() {
17+
return (
18+
<div style={{ width: 400 }}>
19+
<div style={{ marginBottom: 20 }}>
20+
<h5>部分匹配模式（默认）：</h5>
21+
<p>
22+
<LightText
23+
originText="用户管理系统、产品管理系统、订单管理系统"
24+
keyWords="管理"
25+
isFullMatch={false}
26+
/>
27+
</p>
28+
</div>
29+
30+
<div style={{ marginBottom: 20 }}>
31+
<h5>高亮单个字符 "系"：</h5>
32+
<p>
33+
<LightText
34+
originText="用户管理系统、产品管理系统、订单管理系统"
35+
keyWords="系"
36+
/>
37+
</p>
38+
</div>
39+
40+
<div style={{ marginBottom: 20 }}>
41+
<h5>高亮多个字符 "系统"：</h5>
42+
<p>
43+
<LightText
44+
originText="用户管理系统、产品管理系统、订单管理系统"
45+
keyWords="系统"
46+
/>
47+
</p>
48+
</div>
49+
50+
<div>
51+
<h5>高亮不存在的关键词：</h5>
52+
<p>
53+
<LightText
54+
originText="用户管理系统、产品管理系统、订单管理系统"
55+
keyWords="不存在"
56+
/>
57+
</p>
58+
</div>
59+
</div>
60+
);
61+
}
62+
}
63+
64+
export default PartialMatchDemo;
65+
```

0 commit comments

Comments
 (0)