create

dashboard/src/components/article/ArticleCardMainMenu.tsx

@@ -0,0 +1,73 @@
+import { Tabs, Button, Popover } from "antd";
+import { MenuOutlined, PushpinOutlined } from "@ant-design/icons";
+import PaliTextToc from "./PaliTextToc";
+import Find from "./Find";
+import Nav from "./Nav";
+
+interface IWidget {
+  type?: string;
+  articleId?: string;
+}
+const Widget = ({ type, articleId }: IWidget) => {
+  const id = articleId?.split("_");
+  let tocWidget = <></>;
+  if (id && id.length > 0) {
+    const sentId = id[0].split("-");
+    if (sentId.length > 1) {
+      tocWidget = (
+        <PaliTextToc book={parseInt(sentId[0])} para={parseInt(sentId[1])} />
+      );
+    }
+  }
+  const styleTabBody: React.CSSProperties = {
+    width: 350,
+    height: "calc(100vh - 200px)",
+    overflowY: "scroll",
+  };
+  const mainMenuContent = (
+    <Tabs
+      size="small"
+      defaultActiveKey="1"
+      tabBarExtraContent={{
+        right: <Button type="text" size="small" icon={<PushpinOutlined />} />,
+      }}
+      items={[
+        {
+          label: `目录`,
+          key: "1",
+          children: <div style={styleTabBody}>{tocWidget}</div>,
+        },
+        {
+          label: `定位`,
+          key: "2",
+          children: (
+            <div style={styleTabBody}>
+              <Nav />
+            </div>
+          ),
+        },
+        {
+          label: `查找`,
+          key: "3",
+          children: (
+            <div style={styleTabBody}>
+              <Find />
+            </div>
+          ),
+        },
+      ]}
+    />
+  );
+  return (
+    <Popover
+      placement="bottomLeft"
+      arrowPointAtCenter
+      content={mainMenuContent}
+      trigger="click"
+    >
+      <Button size="small" icon={<MenuOutlined />} />
+    </Popover>
+  );
+};
+
+export default Widget;

dashboard/src/components/article/Find.tsx

@@ -0,0 +1,56 @@
+import { Input, Space, Select } from "antd";
+import { useState } from "react";
+
+const { Search } = Input;
+
+const Widget = () => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onSearch = (value: string) => {
+    setIsLoading(true);
+    console.log(value);
+  };
+  const onReplace = (value: string) => {
+    console.log(value);
+  };
+  return (
+    <div>
+      <Space direction="vertical">
+        <Search
+          placeholder="input search text"
+          allowClear
+          onSearch={onSearch}
+          style={{ width: "100%" }}
+          loading={isLoading}
+        />
+        <Search
+          placeholder="input search text"
+          allowClear
+          enterButton="替换"
+          style={{ width: "100%" }}
+          onSearch={onReplace}
+        />
+        <Select
+          defaultValue="current"
+          style={{ width: "100%" }}
+          onChange={(value: string) => {
+            console.log(`selected ${value}`);
+          }}
+          options={[
+            {
+              value: "current",
+              label: "当前文档",
+            },
+            {
+              value: "all",
+              label: "全部译文",
+            },
+          ]}
+        />
+        <div>搜索结果</div>
+      </Space>
+    </div>
+  );
+};
+
+export default Widget;

dashboard/src/components/article/Nav.tsx

@@ -0,0 +1,38 @@
+import { Space, Select } from "antd";
+
+const Widget = () => {
+  return (
+    <div>
+      <Space direction="vertical">
+        <Select
+          defaultValue="current"
+          style={{ width: "100%" }}
+          onChange={(value: string) => {
+            console.log(`selected ${value}`);
+          }}
+          options={[
+            {
+              value: "book-mark",
+              label: "书签",
+            },
+            {
+              value: "tag",
+              label: "标签",
+            },
+            {
+              value: "suggestion",
+              label: "修改建议",
+            },
+            {
+              value: "qa",
+              label: "问答",
+            },
+          ]}
+        />
+        <div>搜索结果</div>
+      </Space>
+    </div>
+  );
+};
+
+export default Widget;

dashboard/src/components/article/PaliTextToc.tsx

@@ -0,0 +1,32 @@
+import { parseInt } from "lodash";
+import { useState, useEffect } from "react";
+import { get } from "../../request";
+import { IPaliTocListResponse } from "../api/Corpus";
+import { ListNodeData } from "../studio/EditableTree";
+import TocTree from "./TocTree";
+
+interface IWidget {
+  book?: number;
+  para?: number;
+  channel?: string;
+}
+const Widget = ({ book, para, channel }: IWidget) => {
+  const [tocList, setTocList] = useState<ListNodeData[]>([]);
+  useEffect(() => {
+    get<IPaliTocListResponse>(
+      `/v2/palitext?view=book-toc&book=${book}&para=${para}`
+    ).then((json) => {
+      const toc = json.data.rows.map((item, id) => {
+        return {
+          key: `${item.book}-${item.paragraph}`,
+          title: item.toc,
+          level: parseInt(item.level),
+        };
+      });
+      setTocList(toc);
+    });
+  }, [book, para]);
+  return <TocTree treeData={tocList} />;
+};
+
+export default Widget;