:construction: create

dashboard/src/assets/library/images/books.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0" id="books_bg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 610 947" style="enable-background:new 0 0 610 947;" xml:space="preserve">
+<g>
+	<defs>
+		<rect id="SVGID_3_" x="-135.3" y="-0.1" width="1141.1" height="947.4"/>
+	</defs>
+	<clipPath id="SVGID_2_">
+		<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+	</clipPath>
+	<g id="Mask_Group_2_1_" style="clip-path:url(#SVGID_2_);">
+		<g id="Group_57_1_" transform="translate(-2443.92 512.47)">
+			<path id="Path_106_1_" style="fill:#EAEAEA;" d="M3010.1,259.9h-514.5l178.3-1001.2h157.9L3010.1,259.9z"/>
+			<path id="Path_128_1_" style="fill:#F0F0F0;" d="M2752.9,168c142.1,0,257.3,43,257.3,96.1s-115.2,96.1-257.3,96.1
+				s-257.3-43-257.3-96.1S2610.8,168,2752.9,168z"/>
+			<g id="Group_56_1_" transform="translate(2703.386 -23.966)">
+				<path id="Path_107_1_" style="fill:#B03C2C;" d="M28.4,261.7l-100.3,23.9c-11.4-0.1-22.1-3-23.3-7.8V114.4L5.2,90.4V99l23.3-0.7
+					L28.4,261.7z"/>
+				<path id="Path_108_1_" style="fill:#782E29;" d="M-71.9,285.6L-71.9,285.6l0-171.2h-23.3v163.4C-94,282.6-83.3,285.5-71.9,285.6
+					z"/>
+				<path id="Path_109_1_" style="fill:#FFFFFF;" d="M-94.8,115.4L4.7,91.6c1.1,4.9,12.3,6.5,23.8,6.6l-100.3,23.9
+					C-82.5,122.1-92.5,119.6-94.8,115.4z"/>
+				<path id="Path_110_1_" style="fill:#B03C2C;" d="M55.2,270.8l-100.3,23.9c-11.4-0.1-22.1-3-23.3-7.8V123.5L32,99.6v8.6l23.3-0.7
+					L55.2,270.8z"/>
+				<path id="Path_111_1_" style="fill:#782E29;" d="M-45.1,294.7L-45.1,294.7l0-171.2h-23.3v163.4
+					C-67.2,291.8-56.5,294.6-45.1,294.7z"/>
+				<path id="Path_112_1_" style="fill:#FFFFFF;" d="M-68,124.5l99.5-23.7c1.1,4.9,12.3,6.5,23.8,6.6l-100.3,23.9
+					C-55.7,131.2-65.7,128.8-68,124.5z"/>
+				<path id="Path_113_1_" style="fill:#B03C2C;" d="M82,279.9l-100.3,23.9c-11.4-0.1-22.1-3-23.3-7.8V132.6l100.3-23.9v8.6
+					l23.3-0.7L82,279.9z"/>
+				<path id="Path_114_1_" style="fill:#782E29;" d="M-18.3,303.8L-18.3,303.8l0-171.2h-23.3V296C-40.4,300.9-29.7,303.7-18.3,303.8
+					z"/>
+				<path id="Path_115_1_" style="fill:#FFFFFF;" d="M-41.2,133.6l99.5-23.7c1.1,4.9,12.3,6.5,23.8,6.6l-100.3,23.9
+					C-28.9,140.4-38.9,137.9-41.2,133.6z"/>
+				<path id="Path_116_1_" style="fill:#B03C2C;" d="M108.8,289L8.5,313c-11.4-0.1-22.1-3-23.3-7.8V141.7l100.3-23.9v8.6l23.3-0.7
+					V289z"/>
+				<path id="Path_117_1_" style="fill:#782E29;" d="M8.5,313L8.5,313l0-171.2h-23.3v163.4C-13.6,310-2.9,312.8,8.5,313z"/>
+				<path id="Path_118_1_" style="fill:#FFFFFF;" d="M-14.4,142.7L85.1,119c1.1,4.9,12.3,6.5,23.8,6.6L8.5,149.6
+					C-2.1,149.5-12.1,147-14.4,142.7z"/>
+				<path id="Path_119_1_" style="fill:#B03C2C;" d="M135.6,298.1L35.3,322.1c-11.4-0.1-22.1-3-23.3-7.8V150.9l100.3-23.9v8.6
+					l23.3-0.7V298.1z"/>
+				<path id="Path_120_1_" style="fill:#782E29;" d="M35.3,322.1L35.3,322.1l0-171.2H12v163.4C13.2,319.1,23.9,322,35.3,322.1z"/>
+				<path id="Path_121_1_" style="fill:#FFFFFF;" d="M12.4,151.9l99.5-23.7c1.1,4.9,12.3,6.5,23.8,6.6L35.3,158.7
+					C24.7,158.6,14.7,156.1,12.4,151.9z"/>
+				<path id="Path_122_1_" style="fill:#B03C2C;" d="M162.4,307.3L62.1,331.2c-11.4-0.1-22.1-3-23.3-7.8V160L139.1,136v8.6l23.3-0.7
+					V307.3z"/>
+				<path id="Path_123_1_" style="fill:#782E29;" d="M62.1,331.2L62.1,331.2l0-171.2H38.8v163.4C39.9,328.2,50.6,331.1,62.1,331.2z"
+					/>
+				<path id="Path_124_1_" style="fill:#FFFFFF;" d="M39.2,161l99.5-23.7c1.1,4.9,12.3,6.5,23.8,6.6L62.1,167.8
+					C51.5,167.7,41.5,165.2,39.2,161z"/>
+				<path id="Path_125_1_" style="fill:#B03C2C;" d="M189.2,316.4L88.9,340.3c-11.4-0.1-22.1-3-23.3-7.8V169.1l100.3-23.9v8.6
+					l23.3-0.7V316.4z"/>
+				<path id="Path_126_1_" style="fill:#782E29;" d="M88.9,340.3L88.9,340.3l0-171.2H65.6v163.4C66.7,337.4,77.4,340.2,88.9,340.3z"
+					/>
+				<path id="Path_127_1_" style="fill:#FFFFFF;" d="M66,170.1l99.5-23.7c1.1,4.9,12.3,6.5,23.8,6.6L88.9,176.9
+					C78.2,176.8,68.2,174.4,66,170.1z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

dashboard/src/components/home/ChapterNew.tsx

@@ -0,0 +1,37 @@
+import { Col, Row } from "antd";
+import img_book from "../../assets/library/images/books.svg";
+import ChapterNewList from "./ChapterNewList";
+
+const Widget = () => {
+  return (
+    <Row
+      style={{
+        backgroundColor: "#e0e0e0",
+        minHeight: 200,
+      }}
+    >
+      <Col flex="auto"></Col>
+      <Col
+        flex="960px"
+        style={{
+          display: "flex",
+          backgroundImage: `url(${img_book})`,
+          backgroundRepeat: "no-repeat",
+        }}
+      >
+        <div style={{ flex: 4 }}>
+          <h3 style={{ fontSize: "250%" }}>圣典</h3>
+          <span style={{ position: "absolute", right: 30, bottom: 0 }}>
+            <a href="../collect">更多</a>
+          </span>
+        </div>
+        <div style={{ flex: 9 }}>
+          <ChapterNewList />
+        </div>
+      </Col>
+      <Col flex="auto"></Col>
+    </Row>
+  );
+};
+
+export default Widget;

dashboard/src/components/home/ChapterNewList.tsx

@@ -0,0 +1,92 @@
+import { Badge, Card, List, Typography } from "antd";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { get } from "../../request";
+import { IChapterData, IChapterListResponse } from "../api/Corpus";
+import StudioName from "../auth/StudioName";
+import { ChapterData } from "../corpus/ChapterCard";
+const { Title, Text, Paragraph } = Typography;
+
+const Widget = () => {
+  const [listData, setListData] = useState<ChapterData[]>([]);
+  useEffect(() => {
+    get<IChapterListResponse>(`/v2/progress?view=chapter&limit=4&lang=zh`).then(
+      (json) => {
+        console.log("chapter list ajax", json);
+        if (json.ok) {
+          let newTree: ChapterData[] = json.data.rows.map(
+            (item: IChapterData) => {
+              return {
+                title: item.title,
+                paliTitle: item.toc,
+                path: item.path,
+                book: item.book,
+                paragraph: item.para,
+                summary: item.summary,
+                tag: item.tags.map((item) => {
+                  return { title: item.name, key: item.name };
+                }),
+                channel: {
+                  name: item.channel.name,
+                  id: item.channel_id,
+                  type: "translation",
+                },
+                studio: item.studio,
+                progress: Math.round(item.progress * 100),
+                createdAt: item.created_at,
+                updatedAt: item.updated_at,
+                hit: item.view,
+                like: item.like,
+                channelInfo: "string",
+              };
+            }
+          );
+          setListData(newTree);
+        }
+      }
+    );
+  }, []);
+  return (
+    <List
+      itemLayout="vertical"
+      size="small"
+      split={false}
+      dataSource={listData}
+      renderItem={(item) => (
+        <List.Item>
+          <Badge.Ribbon text="首发" color="darkred" style={{ display: "none" }}>
+            <Card
+              hoverable
+              bordered={false}
+              style={{ width: "100%", borderRadius: 20 }}
+            >
+              <Title level={5}>
+                <Link
+                  to={`/article/chapter/${item.book}-${item.paragraph}_${item.channel.id}`}
+                  target="_blank"
+                >
+                  {item.title ? item.title : item.paliTitle}
+                </Link>
+              </Title>
+              <div>
+                <Text type="secondary">{item.paliTitle}</Text>
+              </div>
+              <Paragraph
+                ellipsis={{
+                  rows: 2,
+                  expandable: false,
+                  symbol: "more",
+                }}
+              >
+                <Text>{item.summary}</Text>
+              </Paragraph>
+              <StudioName data={item.studio} />
+            </Card>
+          </Badge.Ribbon>
+        </List.Item>
+      )}
+    />
+  );
+};
+
+export default Widget;

dashboard/src/pages/library/index.tsx

@@ -0,0 +1,15 @@
+import ChapterNew from "../../components/home/ChapterNew";
+import FooterBar from "../../components/library/FooterBar";
+import HeadBar from "../../components/library/HeadBar";
+
+const Widget = () => {
+  return (
+    <div>
+      <HeadBar />
+      <ChapterNew />
+      <FooterBar />
+    </div>
+  );
+};
+
+export default Widget;