阿里重磅開源中后臺(tái) UI 解決方案 Fusion

018 年 12 月 16 號(hào)，F(xiàn)usion 在 OSC 深圳源創(chuàng)會(huì)年終盛典上正式開源，這個(gè)在阿里內(nèi)部跑了三年的產(chǎn)品，終于對(duì)外了。

可能一些業(yè)界的同學(xué)已經(jīng)在某些渠道聽說過阿里的 Fusion Design

比如這篇 16 年就傳得很火的《阿里最新神器－fusion design》
比如知乎上面 17 年討論得很熱烈的話題《阿里巴巴的 Fusion Design 是如何運(yùn)作的？》
也有可能來自 16 年 d2 論壇上周源同學(xué)的對(duì)外分享

距離上次對(duì)外發(fā)聲，F(xiàn)usion 在阿里內(nèi)部又走了兩年，這兩年內(nèi)我們技術(shù)領(lǐng)域又有了一些突破。這次重點(diǎn)介紹我們的突破吧。不過介紹前還是要說下 Fusion 是做什么的，畢竟還是有很多同學(xué)是第一次聽說的！

1. Fusion 是做什么的

1.1 解決設(shè)計(jì)師和前端工作協(xié)同的問題

一般一個(gè)項(xiàng)目的上線流程基本都要經(jīng)歷，評(píng)審、設(shè)計(jì)、開發(fā)、測試這幾個(gè)階段。

而各個(gè)階段又可以再深入進(jìn)去的拆分，大致如下：

評(píng)審：業(yè)務(wù)交互（產(chǎn)品功能交互），業(yè)務(wù)邏輯的評(píng)審；
設(shè)計(jì)：設(shè)計(jì)規(guī)范（設(shè)計(jì)師對(duì)整個(gè)產(chǎn)品在視覺規(guī)范上面的定義），視覺設(shè)計(jì)（繪制視覺稿），標(biāo)注稿（產(chǎn)出標(biāo)注搞給到前端）
開發(fā)：前端一般都會(huì)有一套組件庫；但是組件庫可能和自己業(yè)務(wù)線的品牌并不是對(duì)應(yīng)的（比如阿里橙、天空藍(lán)，基本沒類業(yè)務(wù)線都會(huì)有個(gè)自己的品牌），所以第一步需要在組件層面做 UI 的定制，然后是業(yè)務(wù)邏輯的開發(fā)。
測試：最常見的就是設(shè)計(jì)師和前端坐在一起兩天專門做 UI 還原度 review；業(yè)務(wù)邏輯測試是比做流程不多說。

這里重點(diǎn)說下流程中的兩個(gè)問題。

重復(fù)工作

這里面標(biāo)黃了的部分表示可能是各個(gè)業(yè)務(wù)線間的重復(fù)工作：

比如中后臺(tái) UI 的交互都是確定的
比如設(shè)計(jì)規(guī)范都可以在一個(gè)集成的規(guī)范上面做擴(kuò)展
比如標(biāo)注可以通過插件統(tǒng)一解決，而視覺還原、還原度 review 可以交給設(shè)計(jì)師去關(guān)心

協(xié)同問題

協(xié)同遇到的問題，上面知乎鏈接里面周源的回答已經(jīng)非常清楚了，我這里再大概總結(jié)下。

因?yàn)槭褂玫墓ぞ卟煌瑢?duì)概念的認(rèn)知不同

對(duì)陰影的理解不同

·設(shè)計(jì)師的理想和前端的現(xiàn)實(shí)問題之間的差別

同樣 margin-top:12px 但是得到的間距不一致

每隔一段時(shí)間品牌就會(huì)升級(jí)一次，基礎(chǔ) UI 翻新，會(huì)有較大的工作量
設(shè)計(jì)師間約定的規(guī)范沒有很好的落實(shí)，已經(jīng)設(shè)計(jì)好的設(shè)計(jì)稿大家共享不便
已經(jīng)開發(fā)好的組件沒有形成很好的復(fù)用

1.2 Fusion 工作流

去除重復(fù)流程，只關(guān)注業(yè)務(wù)

設(shè)計(jì)師更加方便的做設(shè)計(jì)
而前端只需關(guān)注業(yè)務(wù)邏輯

通過抽象骨架 DPL -> 通過平臺(tái)定制產(chǎn)出定制好 UI 的組件、模板 -> 流入設(shè)計(jì)師的工具里面直接拖拽使用 -> 前端直接使用定制好的組件（不需關(guān)注組件 UI）

設(shè)計(jì)師使用的同一套規(guī)范的組件，產(chǎn)出的設(shè)計(jì)稿都是同一套規(guī)范。（這里使用 sketch 插件名字叫 FusionCool)
前端不需要關(guān)注組件 UI 還原度。（還原度有問題 = 設(shè)計(jì)配置的問題）

1.3 不需要再做從 0~1 的事情

設(shè)計(jì)端使用 sketch 插件（FusionCool）在 sketch 既能設(shè)計(jì)頁面，又能沉淀已經(jīng)設(shè)計(jì)完成的模板
開發(fā)端使用開發(fā)工具（Iceworks）在項(xiàng)目中既能使用現(xiàn)成的模塊，又能沉淀已經(jīng)開發(fā)完成的模塊

那未來在 Fusion 模塊模板達(dá)到極度豐富后，使用可以方便的找到各個(gè)領(lǐng)域的模塊模板來使用，不需要從 0 開始搭建。

2. Fusion 能力點(diǎn)

一個(gè)平臺(tái)，兩個(gè)端

一個(gè)平臺(tái)：fusion.design

兩個(gè)工具：

開發(fā)者工具 Iceworks
設(shè)計(jì)師工具 FusionCool

2.1 一個(gè)平臺(tái)

https://fusion.design 可以定制自己的 Design System（以下簡稱 DS）

創(chuàng)建自己的 Design System

每個(gè)人或者團(tuán)隊(duì)都可以通過 https://fusion.design/sites/new 可以創(chuàng)建自己的站點(diǎn)

站點(diǎn)提供三種能力：文檔編輯、主題管理、物料托管。

文檔編輯

存儲(chǔ)設(shè)計(jì)師文檔和開發(fā)文檔。

主題配置管理

集成了可以管理、定制、發(fā)布組件的主題的能力（下文會(huì)簡稱為配置平臺(tái)）。

物料托管

可以使用開發(fā)好的區(qū)塊、模板。

區(qū)塊 - 代碼片段

模板 - 腳手架

2.2 兩個(gè)工具端

設(shè)計(jì)師工具 - FusionCool

主題發(fā)布完成后就到了 Sketch 的插件端 FusionCool，設(shè)計(jì)師可以在 FusionCool 里面搜索 iconfont 所有素材、使用配置好的組件、使用站點(diǎn)的模塊模板。

開發(fā)者工具 - Iceworks

Iceworks 是淘寶飛冰團(tuán)隊(duì)開發(fā)的面向前端開發(fā)者的 GUI 工具，開發(fā)者無須關(guān)注環(huán)境的問題，并且有海量物料可用。目前已經(jīng)和 Fusion 的物料體系打通，可以輕松使用 Fusion 站點(diǎn)的物料。

每個(gè)站點(diǎn)有自己的物料源

可直接在 Iceworks 配置物料源地址

項(xiàng)目開發(fā)

3. Fusion 的技術(shù)實(shí)現(xiàn)

Next 組件

Fusion Next 是基于 React 實(shí)現(xiàn)的一套 PC 端的組件庫，這套組件庫已經(jīng)在阿里內(nèi)部服務(wù)了三年。

github 地址：https://github.com/alibaba-fusion/next

這次開源出來的版本是最近一年基于之前兩年的使用經(jīng)驗(yàn)、問題反饋進(jìn)行重新整理和優(yōu)化過。具備以下特性。

易用性

對(duì)比上一個(gè)版本 80 + 功能，進(jìn)行 300+ 優(yōu)化，組件整體代碼體積卻減小 30%

next.min.js 910KB -> 702KB
next.min.css 428KB -> 337KB

一共 50+ 組件，打包下來卻只有 700 多 K，這個(gè)目前在業(yè)界比較少組件有能力做到這點(diǎn)。組件之間依賴關(guān)系清晰，復(fù)用度高也是體積小的原因。

穩(wěn)定性

組件單測覆蓋率近 90%，提供服務(wù)以來沒有產(chǎn)生過起線上事故。

能力增強(qiáng)

國際化、RTL、無障礙能力全面支持。另外針對(duì)中后臺(tái)表單大數(shù)據(jù)量場景做了大量性能優(yōu)化，比如普通 table 隨著數(shù)據(jù)不斷增長 render 會(huì)越來越慢，大致如下：

Next 引入了 virtual-list ，目前用在了 table 和 select 這兩個(gè)使用頻率較高的組件。因?yàn)樵诖髷?shù)據(jù)量 (測試過 1w 節(jié)點(diǎn)）下只渲染需要展示的節(jié)點(diǎn)（比如 20 個(gè)），所以可以將渲染時(shí)長永遠(yuǎn)的控制在 0.3s 之內(nèi)。

FusionCool

代碼到視覺稿的無損還原

突破 html2svg 的弊端，做到無損還原

早在一年前我們是把設(shè)計(jì)師在主題配置平臺(tái)（直接在 web 頁面配置組件的主題）的組件直接通過 html2svg 技術(shù)直接把組件直接轉(zhuǎn)換為 svg 文件，從而讓設(shè)計(jì)師可以直接在 sketch 里面使用。但是這種方案存在的弊端就是還原度不夠（大概 95% 還原度）。

html2svg 的還原度問題

主要原因是 html 采用盒模型和 svg 的轉(zhuǎn)換并不是一一對(duì)應(yīng)的，所以這里永遠(yuǎn)有修不完的 bug。雖然 95% 是好的，但是對(duì)于設(shè)計(jì)端來說是完全不能忍受的。

所以 Fusion 項(xiàng)目小組經(jīng)過近半年的努力終于突破了還原度的問題，流程圖如下：

從配置平臺(tái)導(dǎo)出的不再是 html，而是 DesignToken （設(shè)計(jì)變量），F(xiàn)usionCool 底層使用 Airbnb 提供的 react-sketch 能力寫成的一份 Next 組件，直接通過 DesignToken 覆蓋默認(rèn)變量，最終在 Sketch 端實(shí)時(shí)渲染。

組件的類型、大小、內(nèi)容都可以直接在面板配置

圖表配置可以直接喚起配置面板

sketch 端的任何點(diǎn)擊都可以通過 Event 的方式在 FusionCool 產(chǎn)生配置面板。

4. Fusion 未來

我們會(huì)在這半年內(nèi)讓 Fusion 的物料倉庫能夠極度豐富，可以覆蓋到各行業(yè)領(lǐng)域。讓設(shè)計(jì)師和開發(fā)者都不需要再做 0-1 的事情。
我們期望能夠突破視覺稿轉(zhuǎn)代碼的技術(shù)難題，讓視覺稿到可用代碼成為可能。

場景介紹

公司存量項(xiàng)目使用的 antd 版本為 3.x，此版本的 antd 并沒有支持統(tǒng)計(jì)行功能，只有一個(gè) footer 屬性可以在表格底部增加一行內(nèi)容，但是這個(gè)并不能滿足統(tǒng)計(jì)行的要求（無論是單元格對(duì)齊還是橫向滾動(dòng)），所以需要想個(gè)其他方法去實(shí)現(xiàn)統(tǒng)計(jì)行。

同時(shí)對(duì)于公司內(nèi)新項(xiàng)目來說，用的是 antd 5.x 的版本，此版本支持統(tǒng)計(jì)行功能，但是需要使用 Summary 組件去構(gòu)造統(tǒng)計(jì)行，功能靈活但是使用上會(huì)麻煩些。

所以就思考有沒有能在不同 antd 版本下都實(shí)現(xiàn)統(tǒng)計(jì)行的技術(shù)方案，同時(shí)使用上又比較簡單。

實(shí)現(xiàn)方案

首先來分析下統(tǒng)計(jì)行的特點(diǎn)：

統(tǒng)計(jì)行是獨(dú)立的一行數(shù)據(jù)，會(huì)使當(dāng)前頁的數(shù)據(jù)量 +1，如一頁 10 條數(shù)據(jù)的話，加上統(tǒng)計(jì)行則為 11 條。
通常表格豎向滾動(dòng)時(shí)，統(tǒng)計(jì)行會(huì)固定在表格尾部。
樣式和交互需要和表格為一個(gè)整體，包括單元格、橫向滾動(dòng)等等。

對(duì)于第一點(diǎn)，如果 antd 的 Table 組件設(shè)置了分頁功能，比如 pagination: { pageSize: 10 }，此時(shí)就無法展示額外的統(tǒng)計(jì)行，所以我們不使用 Table 的分頁功能，自己通過組合 Pagination 組件來實(shí)現(xiàn)分頁，數(shù)據(jù)傳參方面， Table 的 dataSource 除了當(dāng)前頁數(shù)據(jù)，在拼上統(tǒng)計(jì)行數(shù)據(jù)即可。

第二點(diǎn)，固定在尾部，對(duì)于現(xiàn)代 css 來說，直接使用 position: sticky 實(shí)現(xiàn)即可。

第三點(diǎn)的話，在第一點(diǎn)提到的方案中已經(jīng)實(shí)現(xiàn)。

整體來說，就是實(shí)現(xiàn)以下兩個(gè)功能點(diǎn)：

不使用 Table 內(nèi)置的分頁，使用 Table 和 Pagination 組合來完成。
使用 position: sticky 完成固定行能力。

具體實(shí)現(xiàn)

在 antd Table API 基礎(chǔ)上，新增一個(gè) summaryFixed API，代表統(tǒng)計(jì)行（即最后一行）固定在表格底部，默認(rèn)為 false，不影響沒有統(tǒng)計(jì)行的列表展示。

首先我們實(shí)現(xiàn)下統(tǒng)計(jì)行固定功能。

import React from "react";
import classNames from "classnames";
import { Table as AntdTable } from "antd";
import "./table.css";

export default function Table({
  summaryFixed,
  ...restProp
}) {
  return (
    <div
      className={classNames("my-enhance-table", {
        "my-enhance-table-summary-fixed": summaryFixed,
      })}
    >
      <AntdTable {...restProp} />
    </div>
  );
}

代碼中使用到了 classnames 庫，在 summaryFixed 為 true 的時(shí)候，就會(huì)加上對(duì)應(yīng)類名，接著就根據(jù) my-enhance-table-summary-fixed 類名設(shè)置對(duì)應(yīng) css。

.my-enhance-table.my-enhance-table-summary-fixed {
  tr.ant-table-row:last-child {
    background: #fff;
    position: sticky; /* 設(shè)置為 sticky 布局 */
    bottom: 0;        /* 固定在底部 */
    z-index: 2;
    &:not(:first-child) > td {
      border-top: 1px solid #f0f0f0;
    }
  }
  tr.ant-table-row:nth-last-child(2) {
    > td {
      border-bottom: 0;
    }
  }
}

上述 css 中通過 tr.ant-table-row:last-child 選擇器選中最后一行并設(shè)置為 sticky 布局，其他 css 代碼是處理邊框問題的。

固定統(tǒng)計(jì)行功能實(shí)現(xiàn)完成后，接著通過組合 Table 和 Pagination 組件的方式實(shí)現(xiàn)統(tǒng)計(jì)行的展示。

import React, { useRef, useEffect } from "react";
import isEmpty from "lodash/isEmpty";
import classNames from "classnames";
import { Table as AntdTable, Pagination } from "antd";
import "./table.css";

export default function Table({
  dataSource,
  columns,
  pagination,
  onChange,
  summaryFixed,
  ...restProp
}) {
  const onTableChange = (pagination, filters, sorter, extra) => {
    // 處理排序和篩選之類功能
  };

  const onPaginationChange = (current, pageSize) => {
    // 處理翻頁功能
  };

  return (
    <div
      className={classNames("my-enhance-table", {
        "my-enhance-table-summary-fixed": summaryFixed,
      })}
    >
      <AntdTable
        {...restProp}
        pagination={false}
        dataSource={dataSource}
        columns={columns}
        onChange={onTableChange}
      />
      {pagination !== false && (
        <Pagination {...pagination} onChange={onPaginationChange} />
      )}
    </div>
  );
}

將 Table 的 pagination 設(shè)置為 false，并將外部的 pagination 參數(shù)傳給傳入到 Pagination 組件，我們就可以在 pageSize 為 10 的情況下，讓 dataSource 內(nèi)容全部展示（即使 dataSource 的數(shù)據(jù)量超過 10）。

最后我們需要處理下翻頁和排序等相關(guān)操作：

...

const initPagination = { current: 1, pageSize: 10, total: 0 };

// 獲取 columns 中排序參數(shù)，區(qū)分首次和后續(xù)更新
const getSorterParam = (columns, isInit = false) => {
  const sorterParam = {};
  for (let index = 0; index < columns.length; index++) {
    const { sorter, defaultSortOrder, sortOrder, dataIndex, key } =
      columns[index] || {};
    const order = isInit
      ? sortOrder != null
        ? sortOrder
        : defaultSortOrder
      : sortOrder;
    if (sorter && order) {
      sorterParam.field = dataIndex || key;
      sorterParam.columnKey = dataIndex || key;
      sorterParam.order = order;
      sorterParam.column = columns[index];
      return sorterParam;
    }
  }
  return sorterParam;
};

export default function Table({
  dataSource,
  columns,
  pagination,
  onChange,
  summaryFixed,
  ...restProp
}) {
  const sorterParam = useRef(getSorterParam(columns, true));
  const filtersParam = useRef({});
  const paginationParam = useRef(pagination || initPagination);

  useEffect(() => {
    paginationParam.current = pagination || initPagination;
  }, [pagination]);

  useEffect(() => {
    // 排序可控模式下更新排序
    if (columns.some((col) => !!col.sortOrder)) {
      sorterParam.current = getSorterParam(columns);
    }
  }, [columns]);

  const onTableChange = (pagination, filters, sorter, extra) => {
    if (!isEmpty(sorter)) {
      sorterParam.current = sorter;
    }
    if (!isEmpty(filters)) {
      filtersParam.current = filters;
    }
    if (onChange) {
      onChange(
        isEmpty(pagination) ? paginationParam.current : pagination,
        filtersParam.current,
        sorterParam.current,
        extra
      );
    }
  };

  const onPaginationChange = (current, pageSize) => {
    paginationParam.current = { ...paginationParam.current, current, pageSize };
    pagination?.onChange?.(current, pageSize);
    onTableChange(paginationParam.current, undefined, undefined, {
      currentDataSource: dataSource,
      action: "paginate",
    });
  };
  
  return (
    ...
  )
}

無論是翻頁還是排序或篩選，我們都需要記錄下對(duì)應(yīng)的值。因?yàn)榉摴δ苁菃为?dú)的 Pagination 組件提供的，所以觸發(fā)翻頁時(shí)，我們需要用到之前的排序或篩選參數(shù)，通過 onChange 一起給到外部；觸發(fā)排序或篩選的情況同理，需要用到最近一次的翻頁參數(shù)。

最終完整代碼可查看：https://codesandbox.io/p/sandbox/antd-table-tong-ji-xing-gu-ding-grlz88?file=%2FTable.js%3A19%2C27

總結(jié)

通過組合 Pagination 組件來實(shí)現(xiàn)超過當(dāng)前每頁條數(shù)的數(shù)據(jù)量展示，同時(shí)配合現(xiàn)代 css 的 position: sticky 能力，我們實(shí)現(xiàn)了讓 Table 表格支持統(tǒng)計(jì)行功能。當(dāng)然，上述代碼有需要優(yōu)化的地方，比如翻頁后回到表格頂部等等。

在線咨詢

上一篇：白嫖在線制作翻頁電子宣傳冊網(wǎng)站
下一篇：MistCSS 火了！JS-from-CSS 才是前端未來？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商