fix(*): fix misplaced style in mobile

- Fix misplaced style in mobile - Change Table to ProTable(support table header hidden or not) - Add dir: constants(move constants from intf/ to constants/)
Senkita · Dec 15, 2022 · 174ae83 · 174ae83
1 parent 179a99b
commit 174ae83
Show file tree

Hide file tree

Showing 16 changed files with 690 additions and 154 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,31 +1,32 @@
 {
-  "name": "zlib-web",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@ant-design/colors": "^6.0.0",
-    "@ant-design/icons": "^4.8.0",
-    "@tanstack/react-query": "^4.19.1",
-    "antd": "^5.0.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.4.5"
-  },
-  "devDependencies": {
-    "@types/node": "^18.11.13",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react": "^3.0.0",
-    "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.20",
-    "tailwindcss": "^3.2.4",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.0"
-  }
+    "name": "zlib-web",
+    "private": true,
+    "version": "0.0.2",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons": "^4.8.0",
+        "@ant-design/pro-components": "^2.3.47",
+        "@tanstack/react-query": "^4.20.4",
+        "antd": "^5.0.7",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.4.5"
+    },
+    "devDependencies": {
+        "@types/node": "^18.11.15",
+        "@types/react": "^18.0.26",
+        "@types/react-dom": "^18.0.9",
+        "@vitejs/plugin-react": "^3.0.0",
+        "autoprefixer": "^10.4.13",
+        "postcss": "^8.4.20",
+        "tailwindcss": "^3.2.4",
+        "typescript": "^4.9.4",
+        "vite": "^4.0.1"
+    }
 }
diff --git a/src/components/AdvSearchBox.tsx b/src/components/AdvSearchBox.tsx
@@ -6,8 +6,9 @@ import {
     UserOutlined,
 } from "@ant-design/icons";
 import ExtSelect from "@components/ExtSelect";
+import { MIN_WIDTH } from "@consts";
 import { advSearchCtx, bookCtx } from "@ctx";
-import { IBookState, IEvent, MIN_WIDTH } from "@intf";
+import { IBookState, IEvent } from "@intf";
 import { Col, Input, Modal, Row, Tooltip } from "antd";
 import { useContext, useState } from "react";
 import { NavigateFunction, useNavigate } from "react-router-dom";
@@ -65,6 +66,16 @@ const AdvSearchBox: () => JSX.Element = (): JSX.Element => {
      */
     const clickCancel: () => void = (): void => {
         setTipState(false);
+
+        setBookState({
+            title: "",
+            extension: "",
+            author: "",
+            publisher: "",
+            language: "",
+            isbn: "",
+        });
+
         setAdvSearchState({ visible: false });
     };
 

diff --git a/src/components/ExtSelect.tsx b/src/components/ExtSelect.tsx
@@ -1,6 +1,7 @@
 import { FileTextOutlined } from "@ant-design/icons";
+import { EXT_OPT } from "@consts";
 import { bookCtx } from "@ctx";
-import { EXT_OPT, IExtSelectProps } from "@intf";
+import { IExtSelectProps } from "@intf";
 import { Select } from "antd";
 import { useContext } from "react";
 

diff --git a/src/components/ExtraInfo.tsx b/src/components/ExtraInfo.tsx
@@ -1,4 +1,5 @@
-import { DomainName, IExtraInfoProps } from "@intf";
+import { DomainName } from "@consts";
+import { IExtraInfoProps } from "@intf";
 import { downloadBook } from "@utils";
 import { Button, Descriptions } from "antd";
 

diff --git a/src/components/ResultTable.tsx b/src/components/ResultTable.tsx
@@ -1,10 +1,11 @@
-import ExtraInfo from "@components/ExtraInfo";
+import { ProTable } from "@ant-design/pro-components";
+import { RESULT_COLS } from "@consts";
 import { advSearchCtx } from "@ctx";
-import { IBook, RESULT_COLS } from "@intf";
+import { IBook } from "@intf";
 import { useQuery } from "@tanstack/react-query";
 import { getBooks } from "@utils";
-import { Table } from "antd";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
+import ExtraInfo from "./ExtraInfo";
 
 /**
  * 结果表格
@@ -18,13 +19,27 @@ const ResultTable: () => JSX.Element = (): JSX.Element => {
         getBooks
     );
 
+    let dataSrc: Array<IBook> = [];
+
+    useMemo((): void => {
+        const result: Array<IBook> | undefined = data?.books;
+        if (result) {
+            dataSrc = result;
+        }
+    }, [dataSrc]);
+
     return (
-        <Table
+        <ProTable<IBook>
             expandRowByClick
-            rowKey={(record: IBook): number => record.id}
+            rowKey="id"
             columns={RESULT_COLS}
             loading={isFetching}
-            dataSource={data?.books}
+            search={false}
+            dataSource={dataSrc}
+            pagination={{
+                showQuickJumper: true,
+            }}
+            options={{ reload: false }}
             expandable={{
                 showExpandColumn: false,
                 expandedRowRender: (record: IBook): JSX.Element => (

diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx
@@ -3,8 +3,9 @@ import AdvSearchBtn from "@components/AdvSearchBtn";
 import Logo from "@components/Logo";
 import ProjTitle from "@components/ProjTitle";
 import ThemeSwitch from "@components/ThemeSwitch";
+import { MIN_WIDTH } from "@consts";
 import { advSearchCtx } from "@ctx";
-import { IEvent, ITopbarProps, MIN_WIDTH } from "@intf";
+import { IEvent, ITopbarProps } from "@intf";
 import { QueryClient, useQueryClient } from "@tanstack/react-query";
 import { getBooks } from "@utils";
 import { Input, Layout, Space } from "antd";
@@ -60,6 +61,8 @@ const Topbar: (props: ITopbarProps) => JSX.Element = (
         setKeyword(event.target.value);
     };
 
+    const SearchBoxMinWidth: number = parseInt(MIN_WIDTH) / 2;
+
     return (
         <>
             <Header
@@ -71,20 +74,24 @@ const Topbar: (props: ITopbarProps) => JSX.Element = (
             >
                 <Space
                     className={
-                        page === "NotFound" ? "" : "flex justify-between"
+                        page === "NotFound"
+                            ? ""
+                            : "flex justify-between items-center h-full max-sm:justify-center"
                     }
                 >
                     <Space
                         className={
-                            page === "NotFound" ? "flex justify-between" : ""
+                            page === "NotFound"
+                                ? "flex justify-between"
+                                : "align-bottom"
                         }
                     >
                         <Logo width="2.15em" color="#fff" />
                         {page === "Result" ? (
                             <Search
                                 className="block"
                                 style={{
-                                    minWidth: MIN_WIDTH,
+                                    minWidth: SearchBoxMinWidth,
                                 }}
                                 allowClear
                                 size="large"

diff --git a/src/constants/extension.ts b/src/constants/extension.ts
@@ -0,0 +1,55 @@
+import { ProSchemaValueEnumObj } from "@ant-design/pro-components";
+import { IExtOpt } from "@intf";
+
+/**
+ * 高级检索弹出框扩展名选项列表
+ *
+ *  @type {*}
+ */
+const EXT_OPT: Array<IExtOpt> = [
+    {
+        value: "azw3",
+        label: ".azw3",
+    },
+    {
+        value: "epub",
+        label: ".epub",
+    },
+    {
+        value: "mobi",
+        label: ".mobi",
+    },
+    {
+        value: "pdf",
+        label: ".pdf",
+    },
+    {
+        value: "txt",
+        label: ".txt",
+    },
+];
+
+/**
+ * 表格扩展名选项列表
+ *
+ *  @type {*}
+ */
+const EXT_FILTERS: ProSchemaValueEnumObj = {
+    azw3: {
+        text: ".azw3",
+    },
+    epub: {
+        text: ".epub",
+    },
+    mobi: {
+        text: ".mobi",
+    },
+    pdf: {
+        text: ".pdf",
+    },
+    txt: {
+        text: ".txt",
+    },
+};
+
+export { EXT_FILTERS, EXT_OPT };
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -0,0 +1,23 @@
+import { EXT_FILTERS, EXT_OPT } from "./extension";
+import { RESULT_COLS } from "./results";
+
+/**
+ * 最小宽度
+ *
+ *  @type {*}
+ */
+const MIN_WIDTH: string = "480px";
+
+/**
+ * IPFS服务器域名枚举
+ *
+ * @enum {number}
+ */
+enum DomainName {
+    Cloudflare = "cloudflare-ipfs.com",
+    Dweb = "dweb.link",
+    Ipfs = "ipfs.io",
+    Pinata = "gateway.pinata.cloud",
+}
+
+export { RESULT_COLS, DomainName, EXT_OPT, MIN_WIDTH, EXT_FILTERS };
diff --git a/src/intf/results.ts → src/constants/results.ts b/src/intf/results.ts → src/constants/results.ts
@@ -1,92 +1,66 @@
+import { ProColumns } from "@ant-design/pro-components";
+import { EXT_FILTERS } from "@consts";
 import { IBook } from "@intf";
 import { sorterFn } from "@utils";
-import { ColumnsType } from "antd/es/table";
-
-/**
- * 扩展名过滤器类型
- *
- * @interface IExtFilters
- */
-interface IExtFilters {
-    text: string;
-    value: string;
-}
-
-/**
- * 扩展名过滤器列表
- *
- *  @type {*}
- */
-const EXT_FILTERS: Array<IExtFilters> = [
-    { text: ".awz3", value: "azw3" },
-    { text: ".epub", value: "epub" },
-    { text: ".mobi", value: "mobi" },
-    { text: ".pdf", value: "pdf" },
-    { text: ".txt", value: "txt" },
-];
 
 /**
  * 表头设置
  *
  * @type {*}
  */
-const RESULT_COLS: ColumnsType<IBook> = [
+const RESULT_COLS: ProColumns<IBook, "text">[] = [
     {
         title: "书名",
         dataIndex: "title",
         key: "title",
-        width: 160,
         ellipsis: true,
         sorter: (a: IBook, b: IBook): number => sorterFn("title", { a, b }),
+        disable: true,
     },
     {
         title: "作者",
         dataIndex: "author",
         key: "author",
-        width: 80,
         ellipsis: true,
         sorter: (a: IBook, b: IBook): number => sorterFn("author", { a, b }),
+        disable: true,
     },
     {
         title: "出版社",
         dataIndex: "publisher",
         key: "publisher",
-        width: 80,
         ellipsis: true,
         sorter: (a: IBook, b: IBook): number => sorterFn("publisher", { a, b }),
     },
     {
         title: "扩展名",
         dataIndex: "extension",
         key: "extension",
-        width: 80,
         ellipsis: true,
-        filters: EXT_FILTERS,
-        onFilter: (value: any, record: IBook): boolean =>
-            record.extension.includes(value),
+        filters: true,
+        onFilter: true,
         sorter: (a: IBook, b: IBook): number => sorterFn("extension", { a, b }),
+        disable: true,
+        valueEnum: EXT_FILTERS,
     },
     {
         title: "语言",
         dataIndex: "language",
         key: "language",
-        width: 80,
         ellipsis: true,
         sorter: (a: IBook, b: IBook): number => sorterFn("language", { a, b }),
     },
     {
         title: "年份",
         dataIndex: "year",
         key: "year",
-        width: 80,
         ellipsis: true,
         sorter: (a: IBook, b: IBook): number => sorterFn("year", { a, b }),
     },
     {
         title: "页数",
         dataIndex: "pages",
         key: "pages",
-        width: 80,
         ellipsis: true,
         sorter: (a: IBook, b: IBook): number => sorterFn("pages", { a, b }),
     },