Skip to content

Commit 76356e7

Browse files
Rain120Rain120
committed
feat: semantic preview
1 parent 8fd95f7 commit 76356e7

File tree

19 files changed

+975
-28
lines changed

19 files changed

+975
-28
lines changed

‎.eslintignore‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎.eslintrc.cjs‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

packages/marquee/.eslintrc.cjs renamed to eslint.config.cjs

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const { defineConfig } = require('eslint-define-config');
22

33
module.exports = defineConfig({
4+
root: true,
45
extends: ['chaos'],
56
rules: {
67
'no-unused-vars': 'off',
@@ -9,4 +10,5 @@ module.exports = defineConfig({
910
'@typescript-eslint/no-invalid-this': 'off',
1011
'@typescript-eslint/ban-ts-comment': 'off',
1112
},
13+
ignorePatterns: ['**/dist/**', '**/temp/**'],
1214
});

‎packages.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
| Package Name | Description | Version |
44
|--------------|------------|------------|
55
| @chaos-design/marquee | react marquee | 0.0.1-beta.1 |
6+
| @chaos-design/semantic-preview | component semantic preview | 0.0.1-alpha.1 |

‎packages/marquee/.eslintignore‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎packages/robin/docs/components/demos/semantic-preview/index.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from 'react';
2+
import { Avatar, Card } from 'antd';
3+
4+
import { SemanticPreview } from '@chaos-design/semantic-preview';
5+
6+
import {
7+
EditOutlined,
8+
EllipsisOutlined,
9+
SettingOutlined,
10+
} from '@ant-design/icons';
11+
12+
const { Meta } = Card;
13+
14+
const BlockCard = (props) => {
15+
const divRef = React.useRef(null);
16+
17+
return (
18+
<div ref={divRef} style={{ position: 'absolute', inset: 0 }}>
19+
<Card
20+
{...props}
21+
title="Card title"
22+
extra="More"
23+
style={{ width: 300 }}
24+
cover={
25+
<img
26+
alt="example"
27+
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
28+
/>
29+
}
30+
actions={[
31+
<SettingOutlined key="setting" />,
32+
<EditOutlined key="edit" />,
33+
<EllipsisOutlined key="ellipsis" />,
34+
]}
35+
/>
36+
</div>
37+
);
38+
};
39+
40+
const locale = {
41+
header: '设置卡片头部区域',
42+
body: '设置卡片内容区域',
43+
extra: '设置卡片右上角的操作区域',
44+
title: '设置卡片标题',
45+
actions: '设置卡片底部操作组',
46+
cover: '设置标题封面',
47+
};
48+
49+
const App = () => {
50+
return (
51+
<SemanticPreview
52+
semantics={[
53+
{ name: 'header', desc: locale.header, version: '5.14.0' },
54+
{ name: 'title', desc: locale.title, version: '5.14.0' },
55+
{ name: 'extra', desc: locale.extra, version: '5.14.0' },
56+
{ name: 'cover', desc: locale.cover, version: '5.14.0' },
57+
{ name: 'body', desc: locale.body, version: '5.14.0' },
58+
{ name: 'actions', desc: locale.actions, version: '5.14.0' },
59+
]}
60+
>
61+
<BlockCard>
62+
<Meta
63+
avatar={
64+
<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />
65+
}
66+
title="Card Meta title"
67+
description="This is the description"
68+
/>
69+
</BlockCard>
70+
</SemanticPreview>
71+
);
72+
};
73+
74+
export default App;

‎packages/robin/docs/components/semantic-preview.zh-CN.md‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
---
2+
# category: Components
3+
group:
4+
title: 组件
5+
order: 2
6+
title: SemanticPreview
7+
description: 语义化DOM
8+
tag: 0.0.1
9+
---
10+
11+
## 用法
12+
13+
```js
14+
import { SemanticPreview } from '@chaos-design/semantic-preview';
15+
16+
const App = () => (
17+
<SemanticPreview
18+
semantics={[
19+
{ name: 'header', desc: locale.header, version: '5.14.0' },
20+
{ name: 'title', desc: locale.title, version: '5.14.0' },
21+
{ name: 'extra', desc: locale.extra, version: '5.14.0' },
22+
{ name: 'cover', desc: locale.cover, version: '5.14.0' },
23+
{ name: 'body', desc: locale.body, version: '5.14.0' },
24+
{ name: 'actions', desc: locale.actions, version: '5.14.0' },
25+
]}
26+
>
27+
<BlockCard>
28+
<Meta
29+
avatar={
30+
<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />
31+
}
32+
title="Card Meta title"
33+
description="This is the description"
34+
/>
35+
</BlockCard>
36+
</SemanticPreview>
37+
);
38+
39+
export default App;
40+
```
41+
42+
## 代码演示
43+
44+
<code src="./demos/semantic-preview/index.tsx"></code>
45+
46+
## API
47+
48+
| 属性 | 类型 | Default | 描述 |
49+
| :---------- | :---------- | :---------------- | :--------------------------- |
50+
| `prefix` | `string` | `"semantic-mark"` | 组件前缀 |
51+
| `height` | `number` | `""` | 容器最小高度 |
52+
| `semantics` | Semantics[] | | 高亮对应属性、描述、版本信息 |
53+
54+
### Semantics
55+
56+
```json
57+
{
58+
name: string;
59+
desc: string;
60+
version?: string;
61+
}
62+
```
63+
64+
## 关于语义化 DOM
65+
66+
:::info
67+
请务必遵循下面规范实现组件，否则无法生效, 了解设计思路即可。
68+
:::
69+
70+
### 设计思路
71+
72+
`SemanticsPreview` 通过属性`semantics` 配置对应的属性 `header`、`body`、`extra`、`title`、`actions`、`cover` 会被渲染到组件对应的位置。
73+
74+
即，组件需要接受通过 `SemanticsPreview` 配置的类名
75+
76+
:::code-group
77+
78+
```ts [SemanticsPreview.tsx]
79+
const Preview = () => {
80+
return (
81+
<SemanticPreview
82+
semantics={[
83+
{ name: 'header', desc: locale.header, version: '5.14.0' },
84+
{ name: 'title', desc: locale.title, version: '5.14.0' },
85+
{ name: 'extra', desc: locale.extra, version: '5.14.0' },
86+
{ name: 'cover', desc: locale.cover, version: '5.14.0' },
87+
{ name: 'body', desc: locale.body, version: '5.14.0' },
88+
{ name: 'actions', desc: locale.actions, version: '5.14.0' },
89+
]}
90+
>
91+
<Card
92+
{...props}
93+
title="Card title"
94+
extra="More"
95+
style={{ width: 300 }}
96+
cover={
97+
<img
98+
alt="example"
99+
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
100+
/>
101+
}
102+
actions={[
103+
<SettingOutlined key="setting" />,
104+
<EditOutlined key="edit" />,
105+
<EllipsisOutlined key="ellipsis" />,
106+
]}
107+
/>
108+
</SemanticPreview>
109+
);
110+
};
111+
```
112+
113+
```ts [CardComponent.tsx]
114+
const Card = ({
115+
classNames,
116+
}: {
117+
classNames?: {
118+
header?: string;
119+
body?: string;
120+
extra?: string;
121+
title?: string;
122+
actions?: string;
123+
cover?: string;
124+
};
125+
}) => {
126+
return (
127+
<div className={className}>
128+
<div className={c('header', classNames?.header)}>header</div>
129+
<div className={c('body')}>b, classNames?.body</div>
130+
<div className={c('extra', classNames?.extra)}>extra</div>
131+
<div className={c('title', classNames?.title)}>title</div>
132+
<div className={c('actions', classNames?.actions)}>actions</div>
133+
<div className={c('cover', classNames?.cover)}>cover</div>
134+
</div>
135+
);
136+
};
137+
```
138+
139+
:::

‎packages/robin/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"dependencies": {
2525
"@ant-design/icons": "^5.5.1",
2626
"@chaos-design/marquee": "workspace:*",
27+
"@chaos-design/semantic-preview": "workspace:*",
2728
"antd": "^5.23.2"
2829
},
2930
"devDependencies": {

‎packages/semantic-preview/.gitignore‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
lib
15+
16+
# Editor directories and files
17+
.vscode/*
18+
!.vscode/extensions.json
19+
.idea
20+
.DS_Store
21+
*.suo
22+
*.ntvs*
23+
*.njsproj
24+
*.sln
25+
*.sw?
26+
.rollup.cache

‎packages/semantic-preview/.npmrc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
registry=https://registry.npmjs.org
2+
3+
strict-peer-dependencies=false
4+
shell-emulator=true
5+
auto-install-peers=false

0 commit comments

Comments
 (0)