diff --git a/package.json b/package.json
index 3b0f82b11..e2942b7f8 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,6 @@
         "clean-webpack-plugin": "^3.0.0",
         "css-loader": "^5.0.1",
         "file-loader": "^6.1.0",
-        "fork-ts-checker-webpack-plugin": "^6.0.8",
         "fs-extra-plus": "^0.5.20",
         "git-revision-webpack-plugin": "^3.0.6",
         "gitlog": "^4.0.0",
@@ -58,8 +57,8 @@
         "html-webpack-plugin": "^4.4.1",
         "jest": "^26.4.2",
         "jest-snapshot": "^26.4.2",
-        "less": "^3.12.2",
-        "less-loader": "^7.1.0",
+        "less": "^4.1.1",
+        "less-loader": "7.3.0",
         "react-hot-loader": "^4.12.21",
         "request": "^2.88.2",
         "request-promise-native": "^1.0.9",
@@ -92,12 +91,12 @@
     },
     "dependencies": {
         "@blueprintjs/core": "^3.36.0",
+        "@blueprintjs/table": "^3.8.27",
         "@types/react-virtualized-auto-sizer": "^1.0.0",
         "@types/react-window": "^1.8.2",
         "detect-browser": "^5.1.1",
         "dxf-parser-2": "^1.0.0-alpha.4",
         "flatbush": "^3.3.0",
-        "golden-layout": "^1.5.9",
         "js-angusj-clipper": "^1.1.0",
         "mobx": "^5.15.6",
         "mobx-react": "^6.3.0",
diff --git a/src/UI/Components/Board/BoardProcessModal.tsx b/src/UI/Components/Board/BoardProcessModal.tsx
index 87a67e679..81dc3710c 100644
--- a/src/UI/Components/Board/BoardProcessModal.tsx
+++ b/src/UI/Components/Board/BoardProcessModal.tsx
@@ -216,6 +216,7 @@ export class BoardProcessModal extends React.Component<BoardProcessProps, {}>{
                     />
                     <button
                         className="bp3-button bp3-intent-success"
+                        style={{ width: "2rem" }}
                         onClick={() => this.showShops.set(true)}
                     >选择</button>
                     {
diff --git a/src/UI/Components/Modal/ModalStyle/BoardModal.less b/src/UI/Components/Modal/ModalStyle/BoardModal.less
index 102a94cd0..fba0251a7 100644
--- a/src/UI/Components/Modal/ModalStyle/BoardModal.less
+++ b/src/UI/Components/Modal/ModalStyle/BoardModal.less
@@ -4,7 +4,7 @@
     }
 
     .long-select>.bp3-select>select {
-        width: @infoSelectWidth
+        width: @infoSelectWidth;
     }
 
     .board-info>.bp3-label input {
@@ -151,11 +151,6 @@
         position     : relative;
         margin-bottom: 0.5rem;
 
-        // justify-content: space-between;
-        button {
-            width: 2rem;
-        }
-
         input {
             width: 6.5rem;
         }
diff --git a/src/UI/Components/SourceManage/Pagination.tsx b/src/UI/Components/SourceManage/Pagination.tsx
index bff86ac59..c094f74aa 100644
--- a/src/UI/Components/SourceManage/Pagination.tsx
+++ b/src/UI/Components/SourceManage/Pagination.tsx
@@ -1,7 +1,7 @@
+import { Button, ButtonGroup, Classes, Icon, Label, NumericInput } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Label, Classes, Icon } from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
 import { safeEval } from '../../../Common/eval';
 
 interface IPaginationProps
@@ -131,3 +131,134 @@ export class Pagination extends React.Component<IPaginationProps, { startPage: n
         );
     }
 }
+
+
+const CELL_COUNT = 8;
+
+function pagingCells(n, pos, maxCells = CELL_COUNT)
+{
+    // Consider an array of pages with length `n`. Let `p` be cursor position.
+    //  [1, 2, 3, ..., n-1, n]
+    //
+    // Requirements:
+    // - In all cases we want to keep `1` and `n` visible.
+    // - We cant render more than CELL_COUNT items.
+    // - If the cells exceed CELL_COUNT, insert `...` wherever appropriate.
+    const offset = n - pos;
+    const pivot = ~~(maxCells / 2);
+
+    let cells = [];
+
+    if (n > CELL_COUNT)
+    {
+        // Fill in first and last positions
+        cells[0] = { nr: 1 };
+        cells[1] = { nr: 2 };
+        cells[CELL_COUNT - 2] = { nr: n - 1 };
+        cells[CELL_COUNT - 1] = { nr: n };
+
+        if (pos <= pivot)
+        {
+            // last ellipse is enabled and the rest of the array is filled
+            cells[CELL_COUNT - 2].ellipsis = true;
+            for (let i = 2; i < CELL_COUNT - 2; i++)
+            {
+                cells[i] = { nr: i + 1 };
+            }
+        } else if (offset < pivot)
+        {
+            // a ellipsis is enabled and the later part of array is filled
+            cells[1].ellipsis = true;
+            for (let i = 2; i < CELL_COUNT - 2; i++)
+            {
+                cells[i] = { nr: n - CELL_COUNT + i + 1 };
+            }
+        } else
+        {
+            // both a and b ellipsis are enabled
+            cells[1].ellipsis = true;
+            cells[CELL_COUNT - 2].ellipsis = true;
+
+            // Current selected is put in centre
+            cells[pivot] = { nr: pos };
+            // Fill next and prev to mid point
+            // CELL_COUNT - 5 := n{MID, FIRST, SECOND, LAST, SECONDLAST}
+            for (let i = 1; i < CELL_COUNT - 5; i++)
+            {
+                cells[pivot + i] = { nr: pos + i };
+                cells[pivot - i] = { nr: pos - i };
+            }
+        }
+    } else
+    {
+        for (let i = 0; i < n; i++)
+        {
+            cells[i] = { nr: i + 1, ellipsis: false };
+        }
+    }
+    return cells;
+}
+
+function name({ a, b })
+{
+
+}
+
+interface PaginationProps
+{
+    count: number;
+    cursor: number,
+    onPaginate: (number) => void;
+    maxCells?: number;
+}
+
+export const Pagination2 = ({ count, cursor, onPaginate, maxCells = CELL_COUNT }: PaginationProps) =>
+{
+    // Renders a Pagination Button Group, inserting ellipsis based on cursor.
+    // ┌───┬───┬───┬───┬───┐
+    // │ < │ 1 │ 2 │ 3 │ > │
+    // └───┴───┴───┴───┴───┘
+    // ┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
+    // │ < │ 1 │ 2 │ 3 │ 4 │...│ 9 │10 │ > │
+    // └───┴───┴───┴───┴───┴───┴───┴───┴───┘
+    // ┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
+    // │ < │ 1 │...│ 4 │ 5 │ 6 │...│10 │ > │
+    // └───┴───┴───┴───┴───┴───┴───┴───┴───┘
+
+    const PrevPage = <Button
+        icon='arrow-left'
+        disabled={cursor <= 1}
+        onClick={() => onPaginate(cursor - 1)}
+        text='' />;
+
+    const NextPage = <Button
+        rightIcon='arrow-right'
+        disabled={cursor >= count}
+        onClick={() => onPaginate(cursor + 1)}
+        text='' />;
+
+    return (
+        <ButtonGroup className='pagination'>
+            {PrevPage}
+            {pagingCells(count, cursor, maxCells).map(({ nr, ellipsis }) =>
+                <Button
+                    text={!ellipsis && nr}
+                    icon={ellipsis ? 'more' : undefined}
+                    disabled={ellipsis}
+                    key={nr}
+                    active={nr === cursor}
+                    onClick={() => onPaginate(nr)} />
+            )}
+            {NextPage}
+            <NumericInput
+                width={"20px"}
+                min={1}
+                max={count}
+                value={cursor}
+                defaultValue={cursor} onValueChange={v =>
+                {
+                    onPaginate(v);
+                }}></NumericInput >
+        </ButtonGroup>
+    );
+};
diff --git a/src/UI/Layout/LayoutUtils.ts b/src/UI/Layout/LayoutUtils.ts
deleted file mode 100644
index 6efaa44a5..000000000
--- a/src/UI/Layout/LayoutUtils.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as GoldenLayout from 'golden-layout';
-import { layoutOnsizeEvent } from './LayoutOnSizeEventManage';
-
-export const ContainerComponenName = "container";
-
-/**
- * 注册容器组件.
- *
- * @export
- * @param {GoldenLayout} layout
- */
-export function LayoutRegisterContainerComponent(layout: GoldenLayout)
-{
-    layout.registerComponent(ContainerComponenName, function (container: GoldenLayout.Container, state)
-    {
-        container.on("resize", () =>
-        {
-            layoutOnsizeEvent.dispatchonSize(state.id);
-        });
-        container.getElement().html(`<div id=${state.id} style="width: 100%;height: 100%;"></div>`);
-    });
-}
diff --git a/src/UI/MaterialEditor/GoodsList.tsx b/src/UI/MaterialEditor/GoodsList.tsx
index 240598fca..aa97a5ffa 100644
--- a/src/UI/MaterialEditor/GoodsList.tsx
+++ b/src/UI/MaterialEditor/GoodsList.tsx
@@ -1,13 +1,11 @@
+import { Card, HTMLTable, Icon, InputGroup, Tooltip } from '@blueprintjs/core';
+import { IObservableValue, observable } from 'mobx';
+import { observer } from 'mobx-react';
 import * as React from 'react';
-import { observable, IObservableValue } from 'mobx';
-import { InputGroup, Icon, Classes, Card } from '@blueprintjs/core';
-import { RequestStatus, PostJson } from '../../Common/Request';
 import { ShopUrls } from '../../Common/HostUrl';
-import { appCache } from '../../Common/AppCache';
-import { StoreageKeys } from '../../Common/StoreageKeys';
-import { Pagination } from '../Components/SourceManage/Pagination';
-import { observer } from 'mobx-react';
 import { KeyBoard } from '../../Common/KeyEnum';
+import { PostJson, RequestStatus } from '../../Common/Request';
+import { Pagination2 } from '../Components/SourceManage/Pagination';
 
 export interface IGoodInfo
 {
@@ -28,9 +26,9 @@ export class GoodsList extends React.Component<IGoodsListProps> {
     @observable searchStr = "";
     @observable goods = [];
     @observable info = {
-        count: 0,
+        count: 0,//一共有n个
         currentPage: 1,
-        pageCount: 20
+        pageCount: 22//每页20个
     };
     private isDesc: boolean;
     UNSAFE_componentWillMount()
@@ -42,7 +40,6 @@ export class GoodsList extends React.Component<IGoodsListProps> {
         return (
             this.props.open.get() &&
             <>
-
                 <Card className="search-shop"
                     tabIndex={-1}
                     onKeyUp={this.handleKeyDown}
@@ -53,58 +50,58 @@ export class GoodsList extends React.Component<IGoodsListProps> {
                         onChange={this.handleChange}
                         autoFocus
                         rightElement={<Icon icon="double-caret-vertical" />} />
-                    <div className="title">
-                        <span>编码</span>
-                        <span>名称</span>
-                        <span className="flex-between">厚度
-                            <Icon
-                                icon="double-caret-vertical"
-                                style={{ padding: 0, cursor: "pointer" }}
-                                onClick={this.handleOrderGoods}
-                            />
-                        </span>
-                        <span>材料</span>
-                        <span>颜色</span>
-                        <span>库存</span>
-                    </div>
-                    <ul className={Classes.LIST_UNSTYLED}>
-                        {
-                            this.goods.map(v =>
+                    <HTMLTable bordered={true} interactive={true} condensed={true} striped={false}
+                        style={{ lineHeight: 0.7 }}
+                    >
+                        <thead>
+                            <tr>
+                                <th>编码</th>
+                                <th>名称</th>
+                                <th onClick={this.handleOrderGoods}
+                                    style={{ cursor: "pointer", minWidth: 80 }
+                                    }>厚度<Icon icon={this.isDesc === undefined ? "double-caret-vertical" : (this.isDesc ? "chevron-up" : "chevron-down")} />
+                                </th>
+                                <th>材料</th>
+                                <th>颜色</th>
+                                <th>库存</th>
+                            </tr>
+                        </thead>
+                        <tbody>
                             {
-                                let mat = v.goods_param.find(p => p.name === "材料");
-                                let color = v.goods_param.find(p => p.name === "颜色");
-                                let thick = v.goods_param.find(p => p.name === "厚");
+                                this.goods.map(v =>
+                                {
+                                    let mat = v.goods_param.find(p => p.name === "材料");
+                                    let color = v.goods_param.find(p => p.name === "颜色");
+                                    let thick = v.goods_param.find(p => p.name === "厚");
 
-                                let matName = mat ? mat.value : "";
-                                let colorName = color ? color.value : "";
-                                let info = {
-                                    goods_id: v.goods_id,
-                                    name: v.goods_name,
-                                    color: colorName,
-                                    material: matName,
-                                };
-                                appCache.set(StoreageKeys.Goods + v.goods_id, info);
+                                    let matName = mat ? mat.value : "";
+                                    let colorName = color ? color.value : "";
+                                    let info = {
+                                        goods_id: v.goods_id,
+                                        name: v.goods_name,
+                                        color: colorName,
+                                        material: matName,
+                                    };
 
-                                return <li
-                                    value={v.goods_id}
-                                    onClick={() => this.props.select(info)}
-                                >
-                                    <span>{v.goods_sn}</span>
-                                    <span>{v.goods_name}</span>
-                                    <span>{thick ? thick.value : ""}</span>
-                                    <span>{matName}</span>
-                                    <span>{colorName}</span>
-                                    <span>{v.goods_stock}</span>
-                                </li>;
-                            })
-                        }
-                    </ul>
+                                    return <tr
+                                        key={v.goods_id}
+                                        onClick={() => this.props.select(info)}
+                                        style={{ lineHeight: "normal" }}
+                                    >
+                                        <td>{v.goods_sn}</td>
+                                        <td><OneLineText text={v.goods_name} /></td>
+                                        <td>{thick ? thick.value : ""}</td>
+                                        <td><OneLineText text={matName} /></td>
+                                        <td><OneLineText text={colorName} /></td>
+                                        <td>{v.goods_stock}</td>
+                                    </tr>;
+                                })
+                            }
+                        </tbody>
+                    </HTMLTable>
                     {
-                        this.info.count > 20 &&
-                        <Pagination
-                            pageData={this.info}
-                            getImgListFun={this.handleSearch}
-                        />
+                        this.info.count > this.info.pageCount &&
+                        <Pagination2 count={Math.ceil(this.info.count / this.info.pageCount)} cursor={this.info.currentPage} onPaginate={this.handleSearch} />
                     }
                 </Card>
                 <div className="masking" onClick={this.handleHideSelect}></div>
@@ -122,18 +119,19 @@ export class GoodsList extends React.Component<IGoodsListProps> {
             await this.handleSearch();
         }, 500);
     };
-    handleSearch = async (opt: { curr_page: number; } = { curr_page: 1 }) =>
+    handleSearch = async (page = 1) =>
     {
-        this.info.currentPage = opt.curr_page;
+        this.info.currentPage = page;
 
         let order: string;
         if (this.isDesc !== undefined)
             order = this.isDesc ? "2" : "2 DESC";
         const query: any = {
-            ...opt,
+            curr_page: page,
             goods_name: this.searchStr,
             bind_type: 1,
             goods_type: 1,
+            page_count: this.info.pageCount,
         };
         if (order)
             query.order = order;
@@ -164,7 +162,20 @@ export class GoodsList extends React.Component<IGoodsListProps> {
             clearTimeout(this.timeId);
         this.timeId = setTimeout(async () =>
         {
-            await this.handleSearch({ curr_page: 1 });
+            await this.handleSearch(1);
         }, 200);
     };
 }
+
+const InLineStyle: React.CSSProperties = {
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: 1,
+    overflow: "hidden",
+    alignSelf: "center",
+};
+
+function OneLineText({ text }: { text: string; })
+{
+    return <span style={InLineStyle}>{text}</span>;
+}
diff --git a/src/UI/MaterialEditor/Material.less b/src/UI/MaterialEditor/Material.less
index 7b60d25e6..02245052d 100644
--- a/src/UI/MaterialEditor/Material.less
+++ b/src/UI/MaterialEditor/Material.less
@@ -145,29 +145,17 @@
     z-index  : 35;
     padding  : 10px;
     font-size: 16px;
-    width    : 740px;
+    width    : 1000px;
     outline  : 1px solid #ccc;
 
-    .title {
-        display: flex;
-
-        span {
-            width  : 25%;
-            outline: 1px solid #ccc;
-            padding: 5px 5px;
-        }
+    .bp3-html-table.bp3-html-table-condensed td {
+        padding-top   : 1.5px;
+        padding-bottom: 1.5px;
+        padding-right : 1.5px;
     }
 
-    ul>li {
-        display: flex;
-
-        span {
-            width        : 25%;
-            overflow     : hidden;
-            text-overflow: ellipsis;
-            outline      : 1px solid #ccc;
-            white-space  : nowrap;
-        }
+    table {
+        width: 100%;
     }
 
     input {
@@ -178,10 +166,6 @@
         top: 5px !important;
     }
 
-    li:hover {
-        background: rgb(26, 128, 191)
-    }
-
     .pagination li {
         padding-left: 11px;
     }
diff --git a/src/UI/MaterialEditor/MaterialLinkShop.tsx b/src/UI/MaterialEditor/MaterialLinkShop.tsx
index fba0ad065..de05ba730 100644
--- a/src/UI/MaterialEditor/MaterialLinkShop.tsx
+++ b/src/UI/MaterialEditor/MaterialLinkShop.tsx
@@ -58,6 +58,7 @@ export class MaterialLinkShopId extends React.Component<{ store?: MaterialStore;
                     />
                     <Button
                         text="选择"
+                        style={{ width: "2rem" }}
                         intent={Intent.SUCCESS}
                         onClick={this.handleOpenShopList}
                     />