Browse Source

feat: 优化 侧边栏 节点样式

master
qilei0529 4 years ago
parent
commit
237a07c0ed
  1. 6
      packages/core/src/common/previewCell/behavior.tsx
  2. 15
      packages/core/src/common/previewCell/branch.tsx
  3. 57
      packages/core/src/common/previewCell/index.module.less
  4. 6
      packages/core/src/common/previewCell/start.tsx

6
packages/core/src/common/previewCell/behavior.tsx

@ -9,8 +9,10 @@ interface IProps {
const Cell: React.FC<IProps> = (props) => {
const { title = '处理', ...rest } = props;
return (
<div className={styles.rect} {...rest}>
{title}
<div className={styles.box} {...rest}>
<div className={styles.rect}>
<span className={styles.text}>{title}</span>
</div>
</div>
);
};

15
packages/core/src/common/previewCell/branch.tsx

@ -8,18 +8,15 @@ interface IProps {
const Cell: React.FC<IProps> = (props) => {
const { title = '判断', ...rest } = props;
const z = (n: any) => n * 1.2;
return (
<div className={styles.diamond} {...rest}>
<svg
width={'100%'}
height={'100%'}
xmlns={'http://www.w3.org/1999/xlink'}
>
<div className={styles.box} {...rest}>
<svg width={z(40)} height={z(30)} xmlns={'http://www.w3.org/1999/xlink'}>
<polygon
points={'2,15 28,2 58,15 30,28'}
points={`0,${z(15)} ${z(20)},0 ${z(40)},${z(15)} ${z(20)},${z(30)}`}
style={{
fill: '#FFFC7C',
stroke: '#333',
fill: '#FFF6D1',
stroke: '#FFB96B',
strokeWidth: 2,
}}
/>

57
packages/core/src/common/previewCell/index.module.less

@ -1,41 +1,48 @@
.circle {
.box {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 30px;
font-size: 11px;
color: #FFF;
background-color: #333;
}
.rect {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 30px;
font-size: 11px;
color: #333;
background-color: #AACCF7;
border: 2px solid #5E9CEE;
}
.diamond {
background-color: #f2f2f2;
position: relative;
width: 60px;
height: 30px;
font-size: 11px;
cursor: pointer;
.text {
z-index: 1;
position: absolute;
top: 0;
top: 15px;
left: 0;
width: 100%;
height: 100%;
font-size: 11px;
height: 30px;
line-height: 30px;
text-align: center;
font-weight: 500;
}
}
.circle {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 30px;
color: #FFF;
background-color: #6B8CD7;
border: 2px solid #4E68A3;
}
.rect {
display: flex;
justify-content: center;
align-items: center;
width: 52px;
height: 30px;
font-size: 12px;
color: #333;
border-radius: 4px;
background-color: #BCD0FF;
border: 2px solid #6B8CD7;
}

6
packages/core/src/common/previewCell/start.tsx

@ -9,8 +9,10 @@ interface IProps extends React.HTMLProps<HTMLDivElement> {
const Cell: React.FC<IProps> = (props) => {
const { title = '开始', ...rest } = props;
return (
<div className={styles.circle} {...rest}>
{title}
<div className={styles.box} {...rest}>
<div className={styles.circle}>
<span className={styles.text}>{title}</span>
</div>
</div>
);
};

Loading…
Cancel
Save