组件开发手册

1. 安装和编译方法

# 安装依赖包
$ npm i

# 启动开发服务器
$ npm start

# 编译生成文档
$ npm run docs:build

#编译生成组件
$ npm run build

2. JS 编码规范

2.1 图片引用方式

图片必须使用外部链接方式，不要内嵌 base64 或者 svg 代码。

# 正确
import newIcon from '@/Img/icon-new.svg';

<div>
  <img src={newIcon} />
</div>


# 错误
<div>
  <svg>
    <path d="M299.776 997.568a90.592 ...." />
  </svg>
</div>

2.2 条件样式

尽量不要将 css 代码写到 react 里面

// 错误
const dataStateColor = [
  ['#F4E8DF', '#EF8839'],
  ['#DFEFE5', '#33C669'],
  ['#EAEAEA', '#999999'],
  ['#F6DBDB', '#FF1515'],
];

<Tag className="text-color"
  style={{
    backgroundColor:
      item?.dataStatus < 4
        ? dataStateColor[item?.dataStatus][0]
        : dataStateColor[0][0],
    color:
      item?.dataStatus < 4
        ? dataStateColor[item?.dataStatus][1]
        : dataStateColor[0][1],
  }}
>
  {desc}
</Tag>


// 正确
.state-color-0 { backgroundColor: #F4E8DF; color: #EF8839; }
.state-color-1 { backgroundColor: #DFEFE5; color: #33C669; }
.state-color-2 { backgroundColor: #EAEAEA; color: #999999; }
.state-color-3 { backgroundColor: #F6DBDB; color: #FF1515; }

<Tag className={`state-color-${(item?.dataStatus<4)?item?.dataStatus:0}`} >
  {desc}
</Tag>

2.3 图片命名规则

对于图标使用 icon- 头，对于图片使用 img- 头。

• 图标：小于 128px 的图像
• 图片：大于 128px 的图像

2.4 SVG 条件色彩

对于不同条件选择不同的 svg 图标颜色，不要使用内嵌的 svg 代码，可以使用条件选择图片对象。

# 错误
<svg
  t="1636686053617"
  className="icon"
  viewBox="0 0 1024 1024"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  p-id="1648"
  width="16"
  height="16"
>
  <path
    d="M299.776 997.568a90.592 90.592 0 0 1-125.632-30.656 92.8 92.8 0 0 1-10.752-68.928l55.776-237.888a15.776 15.776 0 0 0-4.832-15.424L31.744 485.568a92.8 92.8 0 0 1-9.888-129.28 90.816 90.816 0 0 1 62.08-32l239.616-19.52a14.4 14.4 0 0 0 12.032-9.12l92.192-225.952a90.784 90.784 0 0 1 168.416 0l92.32 225.792a14.368 14.368 0 0 0 12.032 9.12l239.648 19.52a92.288 92.288 0 0 1 52.192 161.408l-182.592 159.104a15.744 15.744 0 0 0-4.832 15.424l55.776 237.888a92.032 92.032 0 0 1-67.36 110.656 90.336 90.336 0 0 1-69.024-11.072l-205.184-127.488a13.568 13.568 0 0 0-14.4 0l-205.184 127.488z"
    fill="#BDC1C9"
    p-id="1649"
    fill={collecting ? '#EF8839' : '' + '#BDC1C9'}
  />
</svg>


# 正确
import icon_color_a from 'img/icon_color_a'
import icon_color_b from 'img/icon_color_b'


{collecting ? <img src={icon_color_a}/> : <img src={icon_color_b}/>  }

2.5 事件处理

• 页面的事件处理尽量使用纯函数，不要使用匿名函数，建议使用箭头函数。
• 页面的事件函数传递参数时，可以用 bind 函数传递内部变量。

# 错误
<div
  onClick={(e) => {
    e.stopPropagation();
    onActivitySkip(item);
  }}
  className={classnames('activity-size', {
    show: !item?.busiTitle,
  })}
>

# 正确
const doActSkip = (item,e) =>{
  e.stopPropagation();
  onActivitySkip(item);
}

<div
  onClick=doActSkip.bind(this,item)
  className={classnames('activity-size', { show: !item?.busiTitle })}
>

2.6 触发区域多次定义

对于 dom 对象的父子元素不要重复定义 处理事件的函数 ，用合适的 CSS 处理触发的范围。

# 错误
<div className="comment" onClick={doCommon.bind(this)} >
  <img src={icon_comment_c} />
  &nbsp;{commentCount < 1 ? '' : commentCount}
  <div className="hotspot-comment" onClick={doCommon.bind(this)} />
</div>

.comment {
  position: relative;
}
.hotspot-comment {
  width: 34px;
  height: 34px;
  position: absolute;
  top: -7px;
  right: 0px;
}


# 正确
<div className="comment" onClick={doCommon.bind(this)} >
  <img src={icon_comment_c} />
  {commentCount < 1 ? '' : commentCount}
</div>

.comment {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

3. CSS 编码规范

3.1 组件和对象命名

• 组件命令使用 ss 开头, PC 端组件用 ssp，移动端组件使用 ssm
• 组件内部的一类子元素用 g 命名，表示全局对象
• 全局对象内部的组件使用 m 命名，表示模块
• 模块内部的小部件使用 u 命名，表示单元
• 对于函数以 fn 命名

.ssm-circles-item {

  .g-msg {
    ...

    .m-lt { ... }

    .m-rt { ... }

    .u-color {
      color: #2c7ef8;
    }

  }

  .g-title { ... }

  .g-circle { ... }

  .g-operate { ... }

  .g-comments { ... }

  .fn-hide {
    display: none!important;
  }
}


return (
    <div className="ssm-circles-item">
      {item && (
        <>
          <div className="g-msg">
            <div className="m-lt">...</div>
            <div className="m-rt">...</div>
          </div>

          <div className="g-title" >...</div>

          {item?.images.length ? (
            <div className="g-circle">...</div>
          ) : null}

          <div className="g-operate">...</div>
          <div className="g-comments" >...</div>
        </>
      )}
    </div>
  )

3.2 classnames

使用 classnames 库连接的类尽量写到一起，并且用 & 符号。

<div className={classnames('m-lt', {
    'u-color': !item?.busiTitle,
  })} >


.m-lt {
  ....

  &.u-color {
    ....
  }
}

3.3 多行代码层级

书写多行 dom 结构代码时，不要将对象结束符 > 写到与开始符 < 相同的层级，否则会影响代码的可读性，即无法折叠。

# 错误
<div className={classnames('g-comments', {
        hide: !likeFriend.length && !commentNews.length,
      })}
>

# 正确
<div className={classnames('g-comments', {
        hide: !likeFriend.length && !commentNews.length,
      })} >

# 正确
<div className={classnames('g-comments', {
        hide: !likeFriend.length && !commentNews.length,
      })}
  >

3.4 对象属性书写顺序

在书写对象的属性时，先写类名，再写其他属性，最后写函数方法。保证在折叠代码后，可以看到类名。

# 错误
<Image onClick={giveALike.bind(this)}
    className="m-icon-head"
    src={critic?.fromUserAvatar || avatarPng}
    fit="cover"
  />


# 正确
<Image className="m-icon-head"
    src={critic?.fromUserAvatar || avatarPng}
    fit="cover"
    onClick={giveALike.bind(this)}
  />