:fire: 无用的依赖

dashboard/src/components/corpus/ChapterCard.tsx

@@ -8,7 +8,6 @@ import TagArea from "../tag/TagArea";
 import type { IChannelApiData } from "../api/Channel";
 import ChannelListItem from "../channel/ChannelListItem";
 import { IStudio } from "../auth/StudioName";
-import { TagNode } from "../api/Tag";
 import { ITagData } from "./ChapterTagList";
 
 const { Title, Paragraph, Text } = Typography;
@@ -37,6 +36,7 @@ interface IWidgetChapterCard {
 
 const Widget = ({ data, onTagClick }: IWidgetChapterCard) => {
   const path = JSON.parse(data.path);
+  console.log("path", data.path);
   return (
     <>
       <Row>

dashboard/src/components/corpus/ChapterList.tsx

@@ -7,12 +7,6 @@ import ChapterCard from "./ChapterCard";
 import type { ChapterData } from "./ChapterCard";
 import type { ChannelFilterProps } from "../channel/ChannelList";
 
-const defaultFilterProps: ChannelFilterProps = {
-  chapterProgress: 0.9,
-  lang: "en",
-  channelType: "translation",
-};
-
 interface IWidget {
   filter?: ChannelFilterProps;
   progress?: number;

dashboard/src/components/course/JoinCourse.tsx

@@ -5,7 +5,7 @@
  */
 import { Button, message, Modal, Typography } from "antd";
 import { useEffect, useState } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 import { ExclamationCircleFilled } from "@ant-design/icons";
 
 import { useAppSelector } from "../../hooks";

dashboard/src/components/course/LeaveCourse.tsx

@@ -2,7 +2,6 @@ import { Button, message, Modal, Typography } from "antd";
 import { useIntl } from "react-intl";
 import { ExclamationCircleFilled } from "@ant-design/icons";
 
-import { currentUser as _currentUser } from "../../reducers/current-user";
 import { delete_, put } from "../../request";
 import {
   ICourseMemberData,

dashboard/src/components/dict/DictComponent.tsx

@@ -1,26 +1,14 @@
 import { useState, useEffect } from "react";
-import { Affix, Col, Row } from "antd";
-import { Input } from "antd";
 
 import { useAppSelector } from "../../hooks";
 import { message } from "../../reducers/command";
-
-import DictSearch from "./DictSearch";
-
-const { Search } = Input;
+import Dictionary from "./Dictionary";
 
 export interface IWidgetDict {
   word?: string;
 }
 const Widget = ({ word }: IWidgetDict) => {
-  const [container, setContainer] = useState<HTMLDivElement | null>(null);
   const [wordSearch, setWordSearch] = useState(word);
-
-  const onSearch = (value: string) => {
-    console.log("onSearch", value);
-    setWordSearch(value);
-  };
-
   //接收查字典消息
   const commandMsg = useAppSelector(message);
   useEffect(() => {
@@ -30,35 +18,7 @@ const Widget = ({ word }: IWidgetDict) => {
     }
   }, [commandMsg]);
 
-  return (
-    <div ref={setContainer}>
-      <Affix offsetTop={0} target={() => container}>
-        <div style={{ backgroundColor: "gray", height: "3.5em" }}>
-          <Row style={{ paddingTop: "0.5em" }}>
-            <Col xs={0} lg={8}></Col>
-            <Col xs={24} lg={8}>
-              <Search
-                placeholder="input search text"
-                onSearch={onSearch}
-                value={wordSearch}
-                style={{ width: "100%" }}
-              />
-            </Col>
-            <Col xs={0} lg={8}></Col>
-          </Row>
-        </div>
-      </Affix>
-      <div>
-        <Row>
-          <Col flex="auto"></Col>
-          <Col flex="1260px">
-            <DictSearch word={wordSearch} />
-          </Col>
-          <Col flex="auto"></Col>
-        </Row>
-      </div>
-    </div>
-  );
+  return <Dictionary word={wordSearch} compact={true} />;
 };
 
 export default Widget;

dashboard/src/components/dict/WordCard.tsx

@@ -1,25 +1,36 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { Typography } from "antd";
+import { Space, Typography } from "antd";
 
 import type { IWordByDict } from "./WordCardByDict";
 import IWidgetGrammarPop from "./GrammarPop";
 import WordCardByDict from "./WordCardByDict";
+import { useIntl } from "react-intl";
 
 const { Title, Text } = Typography;
 
+export interface IWordGrammar {
+  word: string;
+  type: string;
+  grammar: string;
+  parent: string;
+  factors: string;
+  confidence: number;
+}
 export interface IWidgetWordCardData {
   word: string;
   factors: string;
   parents: string;
   case: string[];
+  grammar: IWordGrammar[];
   anchor: string;
   dict: IWordByDict[];
 }
 interface IWidgetWordCard {
   data: IWidgetWordCardData;
 }
-const Widget = (prop: IWidgetWordCard) => {
-  const caseList = prop.data.case.map((element) => {
+const Widget = ({ data }: IWidgetWordCard) => {
+  const intl = useIntl();
+  const caseList = data.case.map((element) => {
     return element.split("|").map((it, id) => {
       if (it.slice(0, 1) === "@") {
         const [showText, keyText] = it.slice(1).split("-");
@@ -31,21 +42,45 @@ const Widget = (prop: IWidgetWordCard) => {
   });
   return (
     <>
-      <Title level={4} id={prop.data.anchor}>
-        {prop.data.word}
+      <Title level={4} id={data.anchor}>
+        {data.word}
       </Title>
 
       <div>
-        <Text>{prop.data.factors}</Text>
+        <Text>{data.grammar.length > 0 ? data.grammar[0].factors : ""}</Text>
+      </div>
+      <div>
+        <Text>{data.parents}</Text>
       </div>
       <div>
-        <Text>{prop.data.parents}</Text>
+        {data.grammar
+          .filter((item) => item.confidence > 0.5)
+          .map((it, id) => {
+            const grammar = it.grammar.split("$");
+            const grammarGuide = grammar.map((item, id) => {
+              const strCase = item.replaceAll(".", "");
+              return (
+                <IWidgetGrammarPop
+                  key={id}
+                  gid={`grammar_${strCase}`}
+                  text={intl.formatMessage({
+                    id: `dict.fields.type.${strCase}.label`,
+                  })}
+                />
+              );
+            });
+            return (
+              <div key={id}>
+                <Space>{grammarGuide}</Space>
+              </div>
+            );
+          })}
       </div>
       <div>
         <Text>{caseList}</Text>
       </div>
       <div>
-        {prop.data.dict.map((it, id) => {
+        {data.dict.map((it, id) => {
           return <WordCardByDict key={id} data={it} />;
         })}
       </div>

dashboard/src/components/general/UiLangSelect.tsx

@@ -3,7 +3,7 @@ import type { MenuProps } from "antd";
 import { useEffect, useState } from "react";
 import { set, get } from "../../locales";
 import { GlobalOutlined } from "@ant-design/icons";
-import { ItemType } from "antd/lib/menu/hooks/useItems";
+
 const Widget = () => {
   // TODO
   const [curr, setCurr] = useState<string>();

dashboard/src/components/template/Note.tsx

@@ -2,7 +2,7 @@ import { Popover } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { Typography } from "antd";
 
-const { Paragraph, Link } = Typography;
+const { Link } = Typography;
 
 interface IWidgetNoteCtl {
   trigger?: string;
@@ -10,7 +10,6 @@ interface IWidgetNoteCtl {
   children?: React.ReactNode;
 }
 const NoteCtl = ({ trigger, note, children }: IWidgetNoteCtl) => {
-  const noteCard = children ? children : <Paragraph copyable>{note}</Paragraph>;
   const show = trigger ? trigger : <InfoCircleOutlined />;
   return (
     <>

dashboard/src/components/template/Wbw/WbwMeaningSelect.tsx

@@ -15,7 +15,7 @@
  */
 import { useEffect, useState } from "react";
 import { useIntl } from "react-intl";
-import { Collapse, Space, Tag, Typography } from "antd";
+import { Collapse, Tag, Typography } from "antd";
 
 import { IWbw } from "./WbwWord";
 import { useAppSelector } from "../../../hooks";

dashboard/src/pages/library/anthology/show.tsx

@@ -1,14 +1,11 @@
 import { useParams } from "react-router-dom";
-import { Layout, Affix, Col, Row } from "antd";
+import { Col, Row } from "antd";
 
 import AnthologyDetail from "../../../components/article/AnthologyDetail";
 
-const { Content, Header } = Layout;
-
 const Widget = () => {
   // TODO
   const { id, tags } = useParams(); //url 参数
-  let channel = tags ? tags : "";
 
   const pageMaxWidth = "960px";
   return (

dashboard/src/pages/library/article/show.tsx

@@ -1,10 +1,18 @@
+import { Affix, Space } from "antd";
+import { Header } from "antd/lib/layout/layout";
 import { useRef, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import Article, { ArticleMode } from "../../../components/article/Article";
 import ArticleCard from "../../../components/article/ArticleCard";
-import ArticleTabs from "../../../components/article/ArticleTabs";
-import ProTabs from "../../../components/article/ProTabs";
+import MainMenu from "../../../components/article/MainMenu";
+import ModeSwitch from "../../../components/article/ModeSwitch";
+import RightPanel, { TPanelName } from "../../../components/article/RightPanel";
+import RightToolsSwitch from "../../../components/article/RightToolsSwitch";
+import ToolButtonSearch from "../../../components/article/ToolButtonSearch";
+import ToolButtonSetting from "../../../components/article/ToolButtonSetting";
+import ToolButtonTag from "../../../components/article/ToolButtonTag";
+import ToolButtonToc from "../../../components/article/ToolButtonToc";
 
 /**
  * type:
@@ -23,47 +31,83 @@ const Widget = () => {
   const [articleMode, setArticleMode] = useState<ArticleMode>(
     mode as ArticleMode
   );
+  const [rightPanel, setRightPanel] = useState<TPanelName>("close");
 
   const box = useRef<HTMLDivElement>(null);
 
-  const closeCol = () => {
-    if (box.current) {
-      box.current.style.display = "none";
-    }
-  };
   const openCol = () => {
     if (box.current) {
       box.current.style.display = "block";
     }
   };
-
+  //const right = <ProTabs />;
   const rightBarWidth = "48px";
   return (
-    <div style={{ width: "100%", display: "flex" }}>
-      <div style={{ width: `calc(100% - ${rightBarWidth})`, display: "flex" }}>
-        <div style={{ flex: 5 }}>
-          <ArticleCard
-            type={type}
-            articleId={id}
-            onModeChange={(e: ArticleMode) => {
-              setArticleMode(e);
-            }}
-            showCol={openCol}
-          >
-            <Article
-              active={true}
+    <div>
+      <Affix offsetTop={0}>
+        <Header
+          style={{
+            height: 44,
+            lineHeight: 44,
+            display: "flex",
+            justifyContent: "space-between",
+            padding: "5px",
+          }}
+        >
+          <div>
+            <MainMenu />
+          </div>
+          <div>tools</div>
+          <div style={{ display: "flex" }}>
+            <ModeSwitch
+              onModeChange={(e: ArticleMode) => {
+                setArticleMode(e);
+              }}
+            />
+            <RightToolsSwitch
+              onModeChange={(open: TPanelName) => {
+                setRightPanel(open);
+              }}
+            />
+          </div>
+        </Header>
+      </Affix>
+      <div style={{ width: "100%", display: "flex" }}>
+        <Affix offsetTop={44}>
+          <div style={{ height: `calc(100% - 44px)`, padding: 10 }}>
+            <Space direction="vertical">
+              <ToolButtonToc type={type} articleId={id} />
+              <ToolButtonTag type={type} articleId={id} />
+              <ToolButtonSearch type={type} articleId={id} />
+              <ToolButtonSetting type={type} articleId={id} />
+              <ToolButtonTag type={type} articleId={id} />
+            </Space>
+          </div>
+        </Affix>
+        <div
+          style={{ width: `calc(100% - ${rightBarWidth})`, display: "flex" }}
+        >
+          <div style={{ flex: 5 }}>
+            <ArticleCard
               type={type}
               articleId={id}
-              mode={articleMode}
-            />
-          </ArticleCard>
+              onModeChange={(e: ArticleMode) => {
+                setArticleMode(e);
+              }}
+              showCol={openCol}
+            >
+              <Article
+                active={true}
+                type={type}
+                articleId={id}
+                mode={articleMode}
+              />
+            </ArticleCard>
+          </div>
+          <div>
+            <RightPanel curr={rightPanel} />
+          </div>
         </div>
-        <div style={{ flex: 5, display: "none" }} ref={box}>
-          <ArticleTabs onClose={closeCol} />
-        </div>
-      </div>
-      <div>
-        <ProTabs />
       </div>
     </div>
   );

dashboard/src/pages/library/community/list.tsx

@@ -1,6 +1,5 @@
-import { useNavigate } from "react-router-dom";
 import { useState } from "react";
-import { Layout, Affix, Row, Col, Divider, Space } from "antd";
+import { Affix, Row, Col, Divider, Space } from "antd";
 import { Typography } from "antd";
 import { TagOutlined } from "@ant-design/icons";
 import ChannelList from "../../../components/channel/ChannelList";
@@ -12,8 +11,6 @@ import ChapterTagList from "../../../components/corpus/ChapterTagList";
 const { Title } = Typography;
 const Widget = () => {
   // TODO
-  const navigate = useNavigate();
-
   const defaultTags: string[] = [];
   const [tags, setTags] = useState(defaultTags);
   const [progress, setProgress] = useState(0.9);
@@ -24,7 +21,7 @@ const Widget = () => {
     <Row>
       <Col xs={0} sm={6} md={5}>
         <Affix offsetTop={0}>
-          <Layout style={{ height: "100vh", overflowY: "scroll" }}>
+          <div style={{ height: "100vh", overflowY: "scroll" }}>
             <BookTree
               onChange={(key: string, path: string[]) => {
                 /*
@@ -37,7 +34,7 @@ const Widget = () => {
                 console.log(key);
               }}
             />
-          </Layout>
+          </div>
         </Affix>
       </Col>
       <Col xs={24} sm={18} md={14}>

dashboard/src/pages/library/discussion/list.tsx

@@ -1,10 +1,8 @@
-import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 import { ProList } from "@ant-design/pro-components";
 import { message, Space, Tag } from "antd";
 import { MessageOutlined } from "@ant-design/icons";
 
-import { IComment } from "../../../components/comment/CommentItem";
 import { ICommentListResponse } from "../../../components/api/Comment";
 import { get } from "../../../request";
 import { IUser } from "../../../components/auth/User";
@@ -21,7 +19,6 @@ interface IDiscussion {
 }
 const Widget = () => {
   // TODO
-  const intl = useIntl();
 
   return (
     <div>

dashboard/src/pages/library/palicanon/bypath.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
-import { Layout, Affix, Drawer, Row, Col } from "antd";
+import { Affix, Drawer, Row, Col } from "antd";
 import { message } from "antd";
 
 import BookTree from "../../../components/corpus/BookTree";

dashboard/src/pages/studio/anthology/edit.tsx

@@ -9,12 +9,12 @@ import {
   IAnthologyDataRequest,
   IAnthologyResponse,
 } from "../../../components/api/Article";
-import EditableTree from "../../../components/article/EditableTree";
 import type { ListNodeData } from "../../../components/article/EditableTree";
 import LangSelect from "../../../components/general/LangSelect";
 import PublicitySelect from "../../../components/studio/PublicitySelect";
 import GoBack from "../../../components/studio/GoBack";
 import MDEditor from "@uiw/react-md-editor";
+import TocTree from "../../../components/anthology/TocTree";
 
 interface IFormData {
   title: string;
@@ -25,9 +25,7 @@ interface IFormData {
 }
 
 const Widget = () => {
-  const listdata: ListNodeData[] = [];
   const intl = useIntl();
-  const [tocData, setTocData] = useState(listdata);
   const [title, setTitle] = useState("");
   const { studioname, anthology_id } = useParams(); //url 参数
   const [contentValue, setContentValue] = useState<string>("ddd");
@@ -86,7 +84,6 @@ const Widget = () => {
                 level: parseInt(item.level),
               };
             });
-            setTocData(toc);
             treeList = toc;
           }
           return {
@@ -171,14 +168,7 @@ const Widget = () => {
             {
               key: "toc",
               label: `目录`,
-              children: (
-                <EditableTree
-                  treeData={tocData}
-                  onChange={(data: ListNodeData[]) => {
-                    treeList = data;
-                  }}
-                />
-              ),
+              children: <TocTree anthologyId={anthology_id} />,
             },
           ]}
         />

dashboard/src/pages/studio/channel/edit.tsx

@@ -6,7 +6,7 @@ import {
   ProFormText,
   ProFormTextArea,
 } from "@ant-design/pro-components";
-import { Card, message, Space } from "antd";
+import { Card, message } from "antd";
 
 import { IApiResponseChannel } from "../../../components/api/Channel";
 import { get, put } from "../../../request";
@@ -43,7 +43,7 @@ const Widget = () => {
         }}
         formKey="channel_edit"
         request={async () => {
-          const res: IApiResponseChannel = await get(
+          const res = await get<IApiResponseChannel>(
             `/v2/channel/${channelid}`
           );
           setTitle(res.data.name);

dashboard/src/pages/studio/channel/show.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useIntl } from "react-intl";
 import { useParams } from "react-router-dom";
 import { Card, Progress } from "antd";
@@ -13,6 +13,7 @@ import { get } from "../../../request";
 
 import GoBack from "../../../components/studio/GoBack";
 import { IChapterListResponse } from "../../../components/api/Corpus";
+import { IApiResponseChannel } from "../../../components/api/Channel";
 
 const onMenuClick: MenuProps["onClick"] = (e) => {
   console.log("click", e);
@@ -55,6 +56,11 @@ const Widget = () => {
   const { studioname } = useParams();
   const [title, setTitle] = useState("");
 
+  useEffect(() => {
+    get<IApiResponseChannel>(`/v2/channel/${channelId}`).then((json) => {
+      setTitle(json.data.name);
+    });
+  }, [channelId]);
   return (
     <Card
       title={<GoBack to={`/studio/${studioname}/channel/list`} title={title} />}

dashboard/src/pages/studio/dict/list.tsx

@@ -60,13 +60,6 @@ interface IItem {
   createdAt: number;
 }
 
-const valueEnum = {
-  0: "n",
-  1: "ti",
-  2: "v",
-  3: "ind",
-};
-
 const Widget = () => {
   const intl = useIntl();
   const { studioname } = useParams();