点击channel名称打开阅读器

dashboard/src/components/channel/ChannelList.tsx

@@ -6,57 +6,56 @@ import { IApiResponseChannelList } from "../api/Corpus";
 import { get } from "../../request";
 
 export interface ChannelFilterProps {
-	chapterProgress: number;
-	lang: string;
-	channelType: string;
+  chapterProgress: number;
+  lang: string;
+  channelType: string;
 }
 interface IWidgetChannelList {
-	filter?: ChannelFilterProps;
+  filter?: ChannelFilterProps;
 }
 const defaultChannelFilterProps: ChannelFilterProps = {
-	chapterProgress: 0.9,
-	lang: "zh",
-	channelType: "translation",
+  chapterProgress: 0.9,
+  lang: "zh",
+  channelType: "translation",
 };
 
 const Widget = ({ filter = defaultChannelFilterProps }: IWidgetChannelList) => {
-	const defualt: ChannelInfoProps[] = [];
-	const [tableData, setTableData] = useState(defualt);
+  const [tableData, setTableData] = useState<ChannelInfoProps[]>([]);
 
-	useEffect(() => {
-		console.log("palichapterlist useEffect");
-		let url = `/v2/progress?view=channel&channel_type=${filter.channelType}&lang=${filter.lang}&progress=${filter.chapterProgress}`;
-		get(url).then(function (myJson) {
-			console.log("ajex", myJson);
-			const data = myJson as unknown as IApiResponseChannelList;
-			const newData: ChannelInfoProps[] = data.data.rows.map((item) => {
-				return {
-					ChannelName: item.channel.name,
-					ChannelId: item.channel.uid,
-					ChannelType: item.channel.type,
-					StudioName: "V",
-					StudioId: "123",
-					StudioType: "p",
-				};
-			});
-			setTableData(newData);
-		});
-	}, [filter]);
-	return (
-		<>
-			<h3>Channel</h3>
-			<List
-				itemLayout="vertical"
-				size="large"
-				dataSource={tableData}
-				renderItem={(item) => (
-					<List.Item>
-						<ChannelListItem data={item} />
-					</List.Item>
-				)}
-			/>
-		</>
-	);
+  useEffect(() => {
+    console.log("palichapterlist useEffect");
+    let url = `/v2/progress?view=channel&channel_type=${filter.channelType}&lang=${filter.lang}&progress=${filter.chapterProgress}`;
+    get(url).then(function (myJson) {
+      console.log("ajex", myJson);
+      const data = myJson as unknown as IApiResponseChannelList;
+      const newData: ChannelInfoProps[] = data.data.rows.map((item) => {
+        return {
+          channelName: item.channel.name,
+          channelId: item.channel.uid,
+          channelType: item.channel.type,
+          studioName: "V",
+          studioId: "123",
+          studioType: "p",
+        };
+      });
+      setTableData(newData);
+    });
+  }, [filter]);
+  return (
+    <>
+      <h3>Channel</h3>
+      <List
+        itemLayout="vertical"
+        size="large"
+        dataSource={tableData}
+        renderItem={(item) => (
+          <List.Item>
+            <ChannelListItem data={item} />
+          </List.Item>
+        )}
+      />
+    </>
+  );
 };
 
 export default Widget;

dashboard/src/components/channel/ChannelListItem.tsx

@@ -3,23 +3,21 @@ import { Avatar } from "antd";
 import type { ChannelInfoProps } from "../api/Channel";
 
 type IWidgetChannelListItem = {
-	data: ChannelInfoProps;
-	showProgress?: boolean;
-	showLike?: boolean;
+  data: ChannelInfoProps;
+  showProgress?: boolean;
+  showLike?: boolean;
 };
 
-const Widget = (props: IWidgetChannelListItem) => {
-	const studioName = props.data.StudioName.slice(0, 2);
-	return (
-		<>
-			<Space>
-				<Avatar size="small">{studioName}</Avatar>
-				<span>
-					{props.data.ChannelName}@{props.data.StudioName}
-				</span>
-			</Space>
-		</>
-	);
+const Widget = ({ data, showProgress, showLike }: IWidgetChannelListItem) => {
+  const studioName = data.studioName.slice(0, 2);
+  return (
+    <>
+      <Space>
+        <Avatar size="small">{studioName}</Avatar>
+        {data.channelName}@{data.studioName}
+      </Space>
+    </>
+  );
 };
 
 export default Widget;

dashboard/src/components/corpus/ChapterCard.tsx

@@ -10,72 +10,69 @@ import ChannelListItem from "../channel/ChannelListItem";
 const { Title, Paragraph, Link, Text } = Typography;
 
 export interface ChapterData {
-	Title: string;
-	PaliTitle: string;
-	Path: string;
-	Book: number;
-	Paragraph: number;
-	Summary: string;
-	Tag: TagNode[];
-	Channel: ChannelInfoProps;
-	CreatedAt: string;
-	UpdatedAt: string;
-	Hit: number;
-	Like: number;
+  Title: string;
+  PaliTitle: string;
+  Path: string;
+  Book: number;
+  Paragraph: number;
+  Summary: string;
+  Tag: TagNode[];
+  Channel: ChannelInfoProps;
+  CreatedAt: string;
+  UpdatedAt: string;
+  Hit: number;
+  Like: number;
 }
 
 interface IWidgetChapterCard {
-	data: ChapterData;
+  data: ChapterData;
 }
 
-const Widget = (prop: IWidgetChapterCard) => {
-	const path = JSON.parse(prop.data.Path);
-	const tags = prop.data.Tag;
-	return (
-		<>
-			<Row>
-				<Col>
-					<Row>
-						<Col span={16}>
-							<Title level={5}>
-								<Link>{prop.data.Title}</Link>
-							</Title>
-							<Text type="secondary">{prop.data.PaliTitle}</Text>
-							<TocPath data={path} />
-						</Col>
-						<Col span={8}>进度条</Col>
-					</Row>
-					<Row>
-						<Col>
-							<Paragraph
-								ellipsis={{
-									rows: 2,
-									expandable: false,
-									symbol: "more",
-								}}
-							>
-								{prop.data.Summary}
-							</Paragraph>
-						</Col>
-					</Row>
-					<Row>
-						<Col span={16}>
-							<TagArea data={tags} />
-						</Col>
-						<Col span={5}>
-							<ChannelListItem data={prop.data.Channel} />
-						</Col>
-						<Col span={3}>
-							<TimeShow
-								time={prop.data.UpdatedAt}
-								title="UpdatedAt"
-							/>
-						</Col>
-					</Row>
-				</Col>
-			</Row>
-		</>
-	);
+const Widget = ({ data }: IWidgetChapterCard) => {
+  const path = JSON.parse(data.Path);
+  const tags = data.Tag;
+  return (
+    <>
+      <Row>
+        <Col>
+          <Row>
+            <Col span={16}>
+              <Title level={5}>
+                <Link>{data.Title}</Link>
+              </Title>
+              <Text type="secondary">{data.PaliTitle}</Text>
+              <TocPath data={path} />
+            </Col>
+            <Col span={8}>进度条</Col>
+          </Row>
+          <Row>
+            <Col>
+              <Paragraph
+                ellipsis={{
+                  rows: 2,
+                  expandable: false,
+                  symbol: "more",
+                }}
+              >
+                {data.Summary}
+              </Paragraph>
+            </Col>
+          </Row>
+          <Row>
+            <Col span={16}>
+              <TagArea data={tags} />
+            </Col>
+            <Col span={5}>
+              <ChannelListItem data={data.Channel} />
+            </Col>
+            <Col span={3}>
+              <TimeShow time={data.UpdatedAt} title="UpdatedAt" />
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    </>
+  );
 };
 
 export default Widget;

dashboard/src/components/corpus/ChapterHead.tsx

@@ -1,25 +1,34 @@
 import { Typography } from "antd";
+import { Link } from "react-router-dom";
 
 const { Title, Text } = Typography;
 
 export interface IChapterInfo {
-	title: string;
-	subTitle?: string;
-	summary?: string;
-	cover?: string;
+  title: string;
+  subTitle?: string;
+  summary?: string;
+  cover?: string;
+  book?: number;
+  para?: number;
 }
 interface IWidgetPaliChapterHeading {
-	data: IChapterInfo;
+  data: IChapterInfo;
 }
 const Widget = (prop: IWidgetPaliChapterHeading) => {
-	return (
-		<>
-			<Title level={4}>{prop.data.title}</Title>
-			<div>
-				<Text type="secondary">{prop.data.subTitle ? prop.data.subTitle : ""}</Text>
-			</div>
-		</>
-	);
+  return (
+    <>
+      <Title level={4}>
+        <Link to={`/article/chapter/${prop.data.book}-${prop.data.para}`}>
+          {prop.data.title}
+        </Link>
+      </Title>
+      <div>
+        <Text type="secondary">
+          {prop.data.subTitle ? prop.data.subTitle : ""}
+        </Text>
+      </div>
+    </>
+  );
 };
 
 export default Widget;

dashboard/src/components/corpus/ChapterInChannel.tsx

@@ -1,48 +1,89 @@
-import { Col, Layout, Progress, Row, Space } from "antd";
+import { Col, Layout, Progress, Row, Space, Tabs } from "antd";
 import { Typography } from "antd";
 import { LikeOutlined, EyeOutlined } from "@ant-design/icons";
 import { ChannelInfoProps } from "../api/Channel";
 import ChannelListItem from "../channel/ChannelListItem";
 import TimeShow from "../utilities/TimeShow";
+import { useIntl } from "react-intl";
+import { Link } from "react-router-dom";
 
 const { Text } = Typography;
 
 export interface IChapterChannelData {
-	channel: ChannelInfoProps;
-	progress: number;
-	hit: number;
-	like: number;
-	updatedAt: string;
+  channel: ChannelInfoProps;
+
+  progress: number;
+  hit: number;
+  like: number;
+  updatedAt: string;
 }
 interface IWidgetChapterInChannel {
-	data: IChapterChannelData[];
+  data: IChapterChannelData[];
+  book: number;
+  para: number;
 }
-const Widget = (prop: IWidgetChapterInChannel) => {
-	const view = prop.data.map((item, id) => {
-		return (
-			<Layout key={id}>
-				<Row>
-					<Col span={5}>
-						<ChannelListItem data={item.channel} />
-					</Col>
-					<Col span={5}>
-						<Progress percent={item.progress} size="small" />
-					</Col>
-					<Col span={8}></Col>
-				</Row>
+const Widget = ({ data, book, para }: IWidgetChapterInChannel) => {
+  const intl = useIntl(); //i18n
+  function getTab(type: string): JSX.Element[] {
+    const output = data.map((item, id) => {
+      if (item.channel.channelType === type) {
+        return (
+          <div key={id}>
+            <Row>
+              <Col span={5}>
+                <Link
+                  to={`/article/chapter/${book}-${para}_${item.channel.channelId}`}
+                  target="_blank"
+                >
+                  <ChannelListItem data={item.channel} />
+                </Link>
+              </Col>
+              <Col span={5}>
+                <Progress percent={item.progress} size="small" />
+              </Col>
+              <Col span={8}></Col>
+            </Row>
+
+            <Text type="secondary">
+              <Space style={{ paddingLeft: "2em" }}>
+                <EyeOutlined />
+                {item.hit} | <LikeOutlined />
+                {item.like} |
+                <TimeShow time={item.updatedAt} title={item.updatedAt} />
+              </Space>
+            </Text>
+          </div>
+        );
+      } else {
+        return <></>;
+      }
+    });
+    return output;
+  }
 
-				<Text type="secondary">
-					<Space style={{ paddingLeft: "2em" }}>
-						<EyeOutlined />
-						{item.hit} | <LikeOutlined />
-						{item.like} |
-						<TimeShow time={item.updatedAt} title={item.updatedAt} />
-					</Space>
-				</Text>
-			</Layout>
-		);
-	});
-	return <>{view}</>;
+  const items = [
+    {
+      label: intl.formatMessage({ id: "channel.type.translation.label" }),
+      key: "translation",
+      children: getTab("translation"),
+    },
+    {
+      label: intl.formatMessage({ id: "channel.type.nissaya.label" }),
+      key: "nissaya",
+      children: getTab("nissaya"),
+    },
+    {
+      label: intl.formatMessage({ id: "channel.type.commentary.label" }),
+      key: "commentary",
+      children: getTab("commentary"),
+    },
+    {
+      label: intl.formatMessage({ id: "channel.type.original.label" }),
+      key: "original",
+      children: getTab("original"),
+    },
+  ];
+  return <Tabs items={items} />;
 };
 
 export default Widget;

dashboard/src/components/corpus/PaliChapterChannelList.tsx

@@ -5,45 +5,43 @@ import { IParagraph } from "./BookViewer";
 import ChapterInChannel, { IChapterChannelData } from "./ChapterInChannel";
 
 interface IWidgetPaliChapterChannelList {
-	para: IParagraph;
+  para: IParagraph;
 }
 const defaultData: IChapterChannelData[] = [];
-const Widget = (prop: IWidgetPaliChapterChannelList) => {
-	const [tableData, setTableData] = useState(defaultData);
+const Widget = ({ para }: IWidgetPaliChapterChannelList) => {
+  const [tableData, setTableData] = useState(defaultData);
 
-	useEffect(() => {
-		console.log("palichapterlist useEffect");
-		let url = `/v2/progress?view=chapter_channels&book=${prop.para.book}&par=${prop.para.para}`;
-		get(url).then(function (myJson) {
-			console.log("ajex", myJson);
-			const data = myJson as unknown as IApiResponseChapterChannelList;
-			const newData: IChapterChannelData[] = data.data.rows.map(
-				(item) => {
-					return {
-						channel: {
-							ChannelName: item.channel.name,
-							ChannelId: item.channel.uid,
-							ChannelType: item.channel.type,
-							StudioName: "V",
-							StudioId: "123",
-							StudioType: "p",
-						},
-						progress: Math.ceil(item.progress * 100),
-						hit: item.views,
-						like: 0,
-						updatedAt: item.updated_at,
-					};
-				}
-			);
-			setTableData(newData);
-		});
-	}, [prop.para]);
+  useEffect(() => {
+    console.log("palichapterlist useEffect");
+    let url = `/v2/progress?view=chapter_channels&book=${para.book}&par=${para.para}`;
+    get(url).then(function (myJson) {
+      console.log("ajex", myJson);
+      const data = myJson as unknown as IApiResponseChapterChannelList;
+      const newData: IChapterChannelData[] = data.data.rows.map((item) => {
+        return {
+          channel: {
+            channelName: item.channel.name,
+            channelId: item.channel.uid,
+            channelType: item.channel.type,
+            studioName: "V",
+            studioId: "123",
+            studioType: "p",
+          },
+          progress: Math.ceil(item.progress * 100),
+          hit: item.views,
+          like: 0,
+          updatedAt: item.updated_at,
+        };
+      });
+      setTableData(newData);
+    });
+  }, [para]);
 
-	return (
-		<>
-			<ChapterInChannel data={tableData} />
-		</>
-	);
+  return (
+    <>
+      <ChapterInChannel data={tableData} book={para.book} para={para.para} />
+    </>
+  );
 };
 
 export default Widget;

dashboard/src/components/corpus/PaliChapterHead.tsx

@@ -7,64 +7,66 @@ import { IApiResponcePaliChapter } from "../api/Corpus";
 import { get } from "../../request";
 
 interface IWidgetPaliChapterHead {
-	para: IParagraph;
-	onChange?: Function;
+  para: IParagraph;
+  onChange?: Function;
 }
 
 const Widget = (prop: IWidgetPaliChapterHead) => {
-	const defaultPathData: ITocPathNode[] = [
-		{
-			book: 98,
-			paragraph: 55,
-			title: "string;",
-			paliTitle: "string;",
-			level: 2,
-		},
-	];
-	const [pathData, setPathData] = useState(defaultPathData);
-	const [chapterData, setChapterData] = useState({ title: "" });
-	useEffect(() => {
-		console.log("palichapterlist useEffect");
-		fetchData(prop.para);
-	}, [prop.para]);
+  const defaultPathData: ITocPathNode[] = [
+    {
+      book: 98,
+      paragraph: 55,
+      title: "string;",
+      paliTitle: "string;",
+      level: 2,
+    },
+  ];
+  const [pathData, setPathData] = useState(defaultPathData);
+  const [chapterData, setChapterData] = useState<IChapterInfo>({ title: "" });
+  useEffect(() => {
+    console.log("palichapterlist useEffect");
+    fetchData(prop.para);
+  }, [prop.para]);
 
-	function fetchData(para: IParagraph) {
-		let url = `/v2/palitext?view=paragraph&book=${para.book}&para=${para.para}`;
-		get(url).then(function (myJson) {
-			console.log("ajex", myJson);
-			const data = myJson as unknown as IApiResponcePaliChapter;
-			let path: ITocPathNode[] = JSON.parse(data.data.path);
-			path.push({
-				book: data.data.book,
-				paragraph: data.data.paragraph,
-				title: data.data.toc,
-				paliTitle: data.data.toc,
-				level: data.data.level,
-			});
-			setPathData(path);
-			const chapter: IChapterInfo = {
-				title: data.data.toc,
-				subTitle: data.data.toc,
-			};
-			setChapterData(chapter);
-		});
-	}
-	return (
-		<>
-			<TocPath
-				data={pathData}
-				onChange={(e: IParagraph) => {
-					message.success(e.book + ":" + e.para);
-					fetchData(e);
-					if (typeof prop.onChange !== "undefined") {
-						prop.onChange(e);
-					}
-				}}
-				link={"none"}
-			/>
-			<ChapterHead data={chapterData} />
-		</>
-	);
+  function fetchData(para: IParagraph) {
+    let url = `/v2/palitext?view=paragraph&book=${para.book}&para=${para.para}`;
+    get<IApiResponcePaliChapter>(url).then(function (myJson) {
+      console.log("ajex", myJson);
+      const data = myJson;
+      let path: ITocPathNode[] = JSON.parse(data.data.path);
+      path.push({
+        book: data.data.book,
+        paragraph: data.data.paragraph,
+        title: data.data.toc,
+        paliTitle: data.data.toc,
+        level: data.data.level,
+      });
+      setPathData(path);
+      const chapter: IChapterInfo = {
+        title: data.data.toc,
+        subTitle: data.data.toc,
+        book: data.data.book,
+        para: data.data.paragraph,
+      };
+      setChapterData(chapter);
+    });
+  }
+  return (
+    <>
+      <TocPath
+        data={pathData}
+        onChange={(e: IParagraph) => {
+          message.success(e.book + ":" + e.para);
+          fetchData(e);
+          if (typeof prop.onChange !== "undefined") {
+            prop.onChange(e);
+          }
+        }}
+        link={"none"}
+      />
+      <ChapterHead data={chapterData} />
+    </>
+  );
 };
 
 export default Widget;