Kitchen v3.1.0 🌟 新智能表格正式发布 ！

Kitchen 的上个大版本迭代已经是年前了。那这么一段沉寂的我们在干啥？当然是憋大招——智能表格啦~🤣 当然，智能表格这个功能在 3.0 中已经和大家见面啦，通过若干个小版本的快速迭代，我们很高兴地和大家宣布：新智能表格正式发布啦~🥳

:::info 温馨提示： 更新 Kitchen 后请重启一下 Sketch :::

🌟 新智能表格

在中后台场景的业务场景中，表格可以说是一个极其高频的组件。甚至很多业务中每个页面都是一个布局组件加一个表格组件， TechUI （蚂蚁内部业务设计系统）的更是针对中后台常见提出了「四表一局」的总结。

「四表一局」：表格、表单、列表、图表和布局

那么针对如此高频的组件，我们曾在 Kitchen3 正式发布时，推出过旧版的智能表格。
在这个版本中，我们收到了很多反馈意见，例如：

“配置项不够多，不能满足我需求” “表格生成以后，就不能再改了。体验不如自己做的 Symbol 库好“ “感觉配置项太很多，但是不一定能达到自己想要的样式。会花费很多的时间。”

在去年6月份，我们正式启动了智能表格优化的新项目，通过大半年的设计、开发工作，我们终于初步实现了第一个里程碑——正式发布！

那么接下来，就让我们一起来了解下新智能表格的功能吧~

📝 一键生成、二次编辑

我相信 Kitchen 智能表格非常让人喜爱的地方就是在 Sketch 中一键创建表格，像调整宽度、增加列数这样的功能使得我们能用极其高效地方式完成表格的设计，可以说是颠覆也不为过。

新版智能表格在此基础上带来了更加强大的能力：二次编辑。（快捷键 Ctrl + T）

在老版智能表格中，生成的表格是一次性工程，再也无法修改了。但是在新版的智能表格中，我们支持了表格的二次编辑，这样一来，你可以轻松地在原有设计基础上进行二次加工，妈妈再也不用担心需求的频繁变更了~🤣

🧩 数据导入、快捷填充

使用老版智能表格的用户，一个高频反馈就是配置表格的数据很麻烦。的确，在之前的设计中，我们重点考虑的并不是表格的数据录入，而是常用的表格样式配置。
但在新版本中，我们极大地增强了表格数据的录入能力，这体现在两个能力模块中：1）普通数据表格导入；2）行数据的快捷录入。

❶ 普通数据表格导入
一言以蔽之：支持导入 Excel 、语雀表格的数据，生成表格设计稿。

我们已经准备好了图中的示例，你可以拿下面这张表格进行尝试~

在 beta 版的测试过程中，有不少 PD 用户给这个功能大大地点了赞。我想这个功能一定是诸多中后台 PD们的福音~ 😄

❷ 智能填充
做表格时，我想无论是PD还是设计师，都不太喜欢一个单元格一个单元格地把表格铺满。那么为了提升大家的效率，我们也强化了表格数据的智能填充能力，可以很好地帮助大家填充假数据。

目前支持的文本、编号、数据、时间、地址等若干类型的智能数据，大家可以按需选用。如有未覆盖到的数据类型希望补充，也欢迎来找我们提需求~

💄 常用样式、高效配置

在新版的智能表格中，我们对原有的一些样式配置的能力做了一次升级，提供了更加丰富和强大的配置项。当然在设计上，我们将原有的在平铺模式，转变成了 Tabs 切换的方式。因为对于大部分表格设计的场景来说，只要配置项数据项即可。
而得益于这种新的形态，在需要配置具体样式的时候，属性面板能展示更加丰富的配置项，帮助大家更加灵活地完成设计。

智能表格本质上是一个编辑器，我们也相对应的做了很多编辑器层面的优化，尤其是针对数组类型的内容（例如列配置项）做了部分键盘操作上的优化，帮助大家更好地完成数据的调整。

💉 最后一剂预防针

对于智能表格，我们有一个基本的判断：我们不可能，或者说很难，用一个智能表格来满足所有的业务场景。因此在表格样式上我们做了一些取舍，尽量保留了常见的容易出现的配置，例如表头、筛选器、翻页器等，来满足 70-80% 常见的业务需求。那对于一些没法覆盖到的业务特征，我们仍然建议在生成的表格模子上，添加其他业务设计元素。
当然也欢迎大家跟我们提表格样式上的配置需求，我们会做相关评估，如果合理就会安排到迭代中。

🔗 链接前端开发

我们在内部已经初步实现了上述表格组件一键转前端代码的功能，大致效果如下：

下面是默认案例生成的代码，我们目前能够达到 90% 的可用度和极好的可维护性。

/**
* 目前代码根据配置生成，要在生产环境中使用还需要二次加工整合到项目中。
*/
import React, { FC } from "react";
import { ProTable } from "@alipay/tech-ui";
import request from "umi-request";
const Page: FC = () => {
  const columns = [
    {
      title: "序号",
      dataIndex: "0-序号",
      valueType: "index",
    },
    {
      title: "标题",
      dataIndex: "1-标题",
      valueType: "text",
    },
    {
      title: "状态",
      dataIndex: "2-状态",
      valueEnum: {
        成功: {
          text: "成功",
          status: "Success",
        },
        处理中: {
          text: "处理中",
          status: "Processing",
        },
        失败: {
          text: "失败",
          status: "Error",
        },
      },
    },
    {
      title: "标签",
      dataIndex: "3-标签",
      render:
      '// 请去掉此处引号 // () => [<Tag color="success">绿色</Tag>,<Tag color="default">默认</Tag>,<Tag color="error">红色</Tag>]',
    },
    {
      title: "创建时间",
      dataIndex: "4-创建时间",
      valueType: "dateTime",
    },
    {
      title: "操作",
      dataIndex: "5-操作",
      valueType: "option",
      render:
      '// 请去掉此处引号 // ()=>[<a key="修改">修改</a>,<a key="删除">删除</a>]',
    },
  ];
  const dataSource = [
    {
      key: "mock-1",
      "1-标题": "《关雎》 - 诗经",
      "2-状态": "成功",
      "3-标签": "绿色",
      "4-创建时间": "2021-12-24",
    },
    {
      key: "mock-2",
      "1-标题": "关关雎鸠",
      "2-状态": "处理中",
      "3-标签": "默认",
      "4-创建时间": "2021-12-20",
    },
    {
      key: "mock-3",
      "1-标题": "在河之洲",
      "2-状态": "失败",
      "3-标签": "红色",
      "4-创建时间": "2021-12-20",
    },
    {
      key: "mock-4",
      "1-标题": "窈窕淑女",
      "2-状态": "成功",
      "3-标签": "绿色",
      "4-创建时间": "2021-12-08",
    },
    {
      key: "mock-5",
      "1-标题": "君子好逑",
      "2-状态": "成功",
      "3-标签": "绿色",
      "4-创建时间": "2021-12-08",
    },
  ];
  const dataConfig = { dataSource };
  return (
    <ProTable
      showHeader
      size="middle"
      bordered={false}
      headerTitle="高级标题"
      columns={columns}
      {...dataConfig}
      />
  );
};
export default Page;

那这一趴的工具，可能在未来的某个时刻向大家开放。

🚀 基础面板布局升级

为了响应诸多用户对于面板布局优化的呼声，同时为了“憋下一个大招”，我们在这个版本中，对设计系统相关的面板做了一次统一的重构与升级。

此次升级可能会对大家的使用习惯带来一定挑战，大家可以及时向我们反馈使用体验，我们会在大家的反馈基础上做进一步的优化升级。

:::info 温馨提示：由于本次升级存在底层数据结构的破坏性变更，如在升级版本后出现报错页面，请及时联系 @倏昱 进行排查。 :::

🐛 问题修复

3.1.0 问题修复

• 「C2D」修正 Ant Design 部分 C2D 组件无法正常生成的问题；

  3.0.x 问题

• 「流程连线」修正连线功能失效的问题；

• 「智能图表」修正智能图表无法正常生成的问题；
• 「智能图表」修正智能图表配置面板的样式问题
• 「填充」修复填充文本与填充图片失效的问题；
• 「素材中心」修复素材中心无法正常打开的问题；
• 「C2D」修正部分C2D组件无法正常生成的问题；
• 「上传」修正部分场景下无法正常上传到语雀的问题；
• 「通用」修正某些情况下工具条会重复出现图标的问题；