feat: 加入 table 组件

src/components/Message/message.stories.tsx

@@ -13,7 +13,7 @@ const BaseMessage = () => {
   return (
     <div className="container">
       <div className="item">
-        <Card title="基本使用" style={cardCss} shadow>
+        <Card title="基础使用" style={cardCss} shadow>
           <div style={textCss}>用作页面信息反馈</div>
           <Button
             onClick={() => Message.info({ content: "这是一条普通的提示" })}

src/components/Pagination/pagination.stories.tsx

@@ -15,7 +15,7 @@ const BaseProgress = () => {
 
   return (
     <div style={{ display: "flex", flexWrap: "wrap" }}>
-      <Card title="基本使用" style={cardCss} shadow>
+      <Card title="基础使用" style={cardCss} shadow>
         <div>pageSize：{pageSize}</div>
         <div>pageNo：{pageNo}</div>
         <Pagination

src/components/Progress/progress.stories.tsx

@@ -15,7 +15,7 @@ const BaseProgress = () => {
   return (
     <div className="container">
       <div className="item">
-        <Card title="基本使用" style={cardCss} shadow>
+        <Card title="基础使用" style={cardCss} shadow>
           <Progress
             percent={60}
             theme="primary"

src/components/Table/index.tsx

@@ -0,0 +1,3 @@
+import Table from "./table";
+
+export default Table;

src/components/Table/style.scss

@@ -0,0 +1,47 @@
+@import "../../styles/mixin";
+@import "../../styles/variables";
+@import "../../styles/reboot";
+
+.chocolate-table {
+  &-origin-table {
+    width: 100%;
+    border-collapse: collapse;
+    border-radius: $table-border-radius;
+  }
+
+  &-bordered {
+    .chocolate-table-origin-table {
+
+      th,
+      td {
+        border: 1px solid $table-border-color;
+      }
+    }
+  }
+
+  .chocolate-table-origin-table {
+    border: 1px solid $table-border-color;
+  }
+
+  &-thead {
+    tr>th {
+      background-color: $table-bg-color;
+      color: $table-font-color;
+      font-size: $font-size-base;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &-thead>tr>th,
+  &-tbody>tr>td {
+    padding: 9px;
+    text-align: left;
+    border-bottom: 1px solid $table-border-color;
+    transition: all $table-default-transition;
+  }
+
+  &-stripe>td {
+    background-color: $g09;
+  }
+}

src/components/Table/style.ts

@@ -0,0 +1,2 @@
+import "./style.scss";
+import "../../styles"

src/components/Table/table-doc.mdx

@@ -0,0 +1,30 @@
+<!-- Table Doc -->
+
+## Table 表格
+
+表格组件 `Table`
+
+import { Story, Meta, ArgsTable, Source } from "@storybook/addon-docs/blocks";
+import { Table } from "./table";
+import dedent from "ts-dedent";
+<Meta title="Components/Table" component={Table} />;
+
+### 使用
+
+<Source
+  language="jsx"
+  code={dedent` 
+    <Table
+      columns={columns}
+      dataSource={dataSource}
+      showHeader
+      bordered
+    />
+  `}
+/>
+
+### 具体参数
+
+<ArgsTable of={Table} />
+
+export const Template = (args) => <Table {...args} />

src/components/Table/table.stories.tsx

@@ -0,0 +1,210 @@
+import React, { useState } from "react";
+import { Meta, Story } from "@storybook/react";
+import Card from "../Card/card";
+import Table, { TableProps } from "./table";
+import "../../styles/common.stories";
+import Button from "../Button";
+import {
+  DescriptionBrave,
+  DescriptionEle,
+  DescriptionMoon,
+} from "../../utils/constants";
+import TableDoc from "./table-doc.mdx";
+
+const BaseTabs = () => {
+  const [stripe, setStripe] = useState(false);
+  const [bordered, setBordered] = useState(false);
+  const cardCss = { margin: "20px 20px 0 0" };
+  const columns = [
+    {
+      title: "书名",
+      dataIndex: "name",
+      key: "name",
+      hStyle: { width: 150 },
+      cStyle: {},
+    },
+    {
+      title: "简介",
+      dataIndex: "intro",
+      key: "intro",
+      hStyle: {},
+      cStyle: {},
+    },
+    {
+      title: "豆瓣评分",
+      dataIndex: "score",
+      key: "score",
+      hStyle: { width: 140 },
+      cStyle: {},
+    },
+    {
+      title: "操作",
+      dataIndex: "opt",
+      key: "opt",
+      hStyle: {},
+      cStyle: {},
+    },
+  ];
+  const dataSource = [
+    {
+      name: (
+        <a
+          href="https://book.douban.com/subject/20260640/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          《象与骑象人》
+        </a>
+      ),
+      intro: <div>{DescriptionEle}</div>,
+      score: (
+        <div style={{ textAlign: "center" }}>
+          <div>
+            8.1 分
+            <span
+              style={{
+                color: "#999999",
+                fontSize: 12,
+              }}
+            >
+              {" "}
+              2521人评价
+            </span>
+          </div>
+        </div>
+      ),
+      opt: (
+        <div style={{ display: "flex" }}>
+          <Button btnType="primary" style={{ flex: 1, marginRight: 7 }}>
+            添加
+          </Button>
+          <Button btnType="danger" style={{ flex: 1 }}>
+            删除
+          </Button>
+        </div>
+      ),
+    },
+    {
+      name: (
+        <a
+          href="https://book.douban.com/subject/26369699/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          《被讨厌的勇气》
+        </a>
+      ),
+      intro: <div>{DescriptionBrave}</div>,
+      score: (
+        <div style={{ textAlign: "center" }}>
+          <div>
+            8.6 分
+            <span
+              style={{
+                color: "#999999",
+                fontSize: 12,
+              }}
+            >
+              {" "}
+              71596人评价
+            </span>
+          </div>
+        </div>
+      ),
+      opt: (
+        <div style={{ display: "flex" }}>
+          <Button btnType="primary" style={{ flex: 1, marginRight: 7 }}>
+            添加
+          </Button>
+          <Button btnType="danger" style={{ flex: 1 }}>
+            删除
+          </Button>
+        </div>
+      ),
+    },
+    {
+      name: (
+        <a
+          href="https://book.douban.com/subject/1858513/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          《月亮和六便士》
+        </a>
+      ),
+      intro: <div>{DescriptionMoon}</div>,
+      score: (
+        <div style={{ textAlign: "center" }}>
+          <div>
+            9.0 分
+            <span
+              style={{
+                color: "#999999",
+                fontSize: 12,
+              }}
+            >
+              {" "}
+              170874人评价
+            </span>
+          </div>
+        </div>
+      ),
+      opt: (
+        <div style={{ display: "flex" }}>
+          <Button btnType="primary" style={{ flex: 1, marginRight: 7 }}>
+            添加
+          </Button>
+          <Button btnType="danger" style={{ flex: 1 }}>
+            删除
+          </Button>
+        </div>
+      ),
+    },
+  ];
+  return (
+    <div className="container">
+      <div className="item">
+        <Card title="基础使用" style={cardCss} shadow>
+          <Table
+            columns={columns}
+            dataSource={dataSource}
+            showHeader
+            bordered={bordered}
+            stripe={stripe}
+          />
+          <Button onClick={() => setStripe(!stripe)} style={{ marginTop: 20 }}>
+            {stripe ? "取消隔行条纹" : "展示隔行条纹"}
+          </Button>
+          <Button
+            onClick={() => setBordered(!bordered)}
+            style={{ marginTop: 20, marginLeft: 20 }}
+            btnType="primary"
+          >
+            {bordered ? "取消表格边框" : "展示表格边框"}
+          </Button>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  component: Table,
+  title: "Table 表格",
+  parameters: {
+    docs: {
+      page: TableDoc,
+      source: {
+        type: "code",
+      },
+    },
+    controls: {
+      include: [],
+      hideNoControlsWarning: true,
+    },
+  },
+} as Meta;
+
+const _default: Story<TableProps> = () => <BaseTabs />;
+
+export const Primary = _default.bind({});