matter list sort.

src/pages/matter/List.tsx

@@ -22,16 +22,16 @@ import {
 } from "antd";
 import MessageBoxUtil from "../../common/util/MessageBoxUtil";
 import {
-  ExclamationCircleFilled,
   CloudUploadOutlined,
-  PlusSquareOutlined,
-  MinusSquareOutlined,
-  FolderOutlined,
-  SyncOutlined,
   DeleteOutlined,
   DownloadOutlined,
   DragOutlined,
+  ExclamationCircleFilled,
+  FolderOutlined,
+  MinusSquareOutlined,
+  PlusSquareOutlined,
   ShareAltOutlined,
+  SyncOutlined,
 } from "@ant-design/icons";
 import ImagePreviewer from "../widget/previewer/ImagePreviewer";
 import Sun from "../../common/model/global/Sun";
@@ -47,6 +47,7 @@ import BreadcrumbPanel from "../widget/BreadcrumbPanel";
 import Lang from "../../common/model/global/Lang";
 import FileUtil from "../../common/util/FileUtil";
 import SafeUtil from "../../common/util/SafeUtil";
+import MatterSortPanel from "./widget/MatterSortPanel";
 
 interface IProps extends RouteComponentProps {}
 
@@ -633,6 +634,10 @@ export default class List extends TankComponent<IProps, IState> {
           uploadMatters.map((m) => <UploadMatterPanel matter={m} />)
         )}
 
+        {pager.data.length ? (
+          <MatterSortPanel pager={pager} refresh={() => this.refresh()} />
+        ) : null}
+
         {director.createMode ? (
           <MatterPanel
             ref={this.newMatterRef}

src/pages/matter/widget/MatterPanel.less

@@ -102,6 +102,7 @@
 
     .matter-date {
       .basic-span;
+      width: 110px;
     }
   }
 

src/pages/matter/widget/MatterSortPanel.less

@@ -0,0 +1,33 @@
+.matter-sort-panel {
+  display: flex;
+  align-items: center;
+  background-color: white;
+  height: 48px;
+  margin: 0;
+  line-height: 48px;
+  color: #999;
+
+  .sort-part {
+    &:hover {
+      cursor: pointer;
+      background-color: aliceblue;
+    }
+    &-name {
+      flex-grow: 1;
+      padding-left: 10px;
+    }
+    &-size {
+      flex-shrink: 0;
+      flex-basis: 90px;
+      padding-left: 10px;
+      cursor: pointer;
+    }
+    &-date {
+      flex-shrink: 0;
+      flex-basis: 130px;
+      padding: 0 10px;
+      cursor: pointer;
+    }
+
+  }
+}

src/pages/matter/widget/MatterSortPanel.tsx

@@ -0,0 +1,83 @@
+import './MatterSortPanel.less'
+import React from "react";
+import Matter from "../../../common/model/matter/Matter";
+import TankComponent from "../../../common/component/TankComponent";
+import SortDirection from "../../../common/model/base/SortDirection";
+import {
+  ArrowDownOutlined,
+  ArrowUpOutlined,
+} from "@ant-design/icons";
+import Pager from "../../../common/model/base/Pager";
+
+interface IProps {
+  pager: Pager<Matter>,
+  refresh: () => any
+}
+
+interface IState {}
+
+export default class MatterSortPanel extends TankComponent<IProps, IState> {
+
+  static sortAutomaton = [SortDirection.ASC, SortDirection.DESC, null]; // 排序状态自动机：ASC -> DESC -> null -> ASC...
+
+  changeFilterOrder = (orderName: string) => {
+    const { pager } = this.props;
+    ["orderName", "orderSize", "orderUpdateTime"]
+      .filter((name) => name !== orderName)
+      .forEach((key) => {
+        pager.setFilterValue(key, null);
+      });
+    const filter = pager.getFilterValue(orderName);
+    const nextSortIndex = (MatterSortPanel.sortAutomaton.findIndex((key) => key === filter) + 1) % 3;
+    pager.setFilterValue(orderName, MatterSortPanel.sortAutomaton[nextSortIndex]);
+    this.props.refresh();
+  };
+
+  render() {
+    const { pager } = this.props;
+
+    return (
+      <div className="matter-sort-panel">
+        <div
+          className="sort-part sort-part-name"
+          onClick={() => this.changeFilterOrder("orderName")}
+        >
+          文件名
+          {pager.getFilterValue("orderName") ? (
+            pager.getFilterValue("orderName") === SortDirection.ASC ? (
+              <ArrowUpOutlined className="ml5 f10" />
+            ) : (
+              <ArrowDownOutlined className="ml5 f10" />
+            )
+          ) : null}
+        </div>
+        <div
+          className="sort-part sort-part-size"
+          onClick={() => this.changeFilterOrder("orderSize")}
+        >
+          大小
+          {pager.getFilterValue("orderSize") ? (
+            pager.getFilterValue("orderSize") === SortDirection.ASC ? (
+              <ArrowUpOutlined className="ml5 f10" />
+            ) : (
+              <ArrowDownOutlined className="ml5 f10" />
+            )
+          ) : null}
+        </div>
+        <div
+          className="sort-part sort-part-date"
+          onClick={() => this.changeFilterOrder("orderUpdateTime")}
+        >
+          修改日期
+          {pager.getFilterValue("orderUpdateTime") ? (
+            pager.getFilterValue("orderUpdateTime") === SortDirection.ASC ? (
+              <ArrowUpOutlined className="ml5 f10" />
+            ) : (
+              <ArrowDownOutlined className="ml5 f10" />
+            )
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+}