1.ui设计稿—>切图策略

1.只要是整体不变的地方都要切图，如果不可复用且静态就可以整体都作为切图

比如这里可以这样切图：

2.可以复用的小部分一般都要单独切图，减少图片整体的体积和大小

这里的段位图标，多个地方都用到了，所以要单独切成小图，然后在多个地方复用就可以了，但是一般是切那个大的，不然切小的可能放大会模糊

一般要把段位图标单独切出来：后面如果要单独改图标不改背景也相对方便

这里还有一个好处就是，方便写css进行布局，因为相对于方框进行布局，比相对于透明不规则的地方进行布局要方便

3.如果是纯色的背景等内容，一般不要作为切图，直接用css实现即可，方便滚动之后的显示

比如这里，下半部分都不要作为切图：

4.切图导出的时候一般 1 倍就可以，因为设计默认会按照 2 倍图设计

如果大图导出模糊，那么就选择 2 倍图或者 3 倍图（大屏手机容易出现模糊的情况）

5.如果导出只有几十 kb，就不需要去单独进行压缩了，太大了就压缩一下

2.ui设计稿—>组件化的构思技巧

1.如果是页面整体布局一样，只不过颜色、背景以及一些数据在变化，那么就可以只作为一个组件，然后用数据驱动就可以了

比如这里：其实每个页面的结构都是一样的

但是如果是要用 swiper 支持的（比如支持页面整体左右滑动），那么就需要用.map遍历的方式渲染多个组件了

2.可以考虑用 children 的方式（插槽）——> 比如房主数据那里的图表，里面具体的图表可以是插槽传入的！这样就把数据获取和一些业务函数放在了具体的业务组件里面，而 ui 就是一个壳，套在业务上面就可以了，起到一个复用ui的作用即可！

代码：

return (
    <>
      <DataCard title="昨日歌房数据" date="2020-03-02">
        <PanelChartComponent />
      </DataCard>
      <DataCard title="昨日歌房数据" date="2020-03-02">
        <LineChartComponent headList={headList} xdata={xdata} dataSeries={dataSeries} />
      </DataCard>
    </>
  );

import { ArriveEnd } from "./components/ArriveEnd";
import { RevenueData } from "./RevenueData";
import { AvticeData } from "./AvticeData";
import { AudienceSource } from "./AudienceSource";

export const RoomData = () => {
  return (
    <div className="mod_room_data__container">
      <RevenueData />
      <AvticeData />
      <AudienceSource />
      <ArriveEnd />
    </div>
  );
};

这里用了插槽：

export const DataCard = ({ children, title, date }: { children: React.ReactNode, title: string, date: string }) => {
  return (
    <div className="mod_room_data__card_container">
      <div className="mod_room_data__card_head_container">
        <p className="mod_room_data__card_head_title">{title}</p>
        <p className="mod_room_data__card_head_date">{date}</p>
      </div>
      <div className="mod_room_data__card_chart_container">
        {children}
      </div>
    </div>
  );
};