支持 term 点击跳转

dashboard/src/components/term/TermItem.tsx

@@ -14,7 +14,10 @@ import { useEffect, useState } from "react";
 import StudioName from "../auth/StudioName";
 import { Link, useNavigate } from "react-router-dom";
 import { useAppSelector } from "../../hooks";
-import { clickedTerm } from "../../reducers/term-click";
+import { click, clickedTerm } from "../../reducers/term-click";
+import store from "../../store";
+import "../article/article.css";
+import Discussion from "../discussion/Discussion";
 
 const { Text } = Typography;
 
@@ -24,21 +27,27 @@ interface IWidget {
 }
 const TermItemWidget = ({ data, onTermClick }: IWidget) => {
   const [openTermModal, setOpenTermModal] = useState(false);
+  const [showDiscussion, setShowDiscussion] = useState(false);
   const navigate = useNavigate();
   const termClicked = useAppSelector(clickedTerm);
 
   useEffect(() => {
     console.debug("on redux", termClicked, data);
+    if (typeof termClicked === "undefined") {
+      return;
+    }
     if (termClicked?.channelId === data?.channel?.id) {
+      store.dispatch(click(null));
       if (typeof onTermClick !== "undefined") {
         onTermClick(termClicked);
       }
     }
-  }, [data?.channel?.id, termClicked]);
+  }, [data, termClicked]);
 
   return (
     <>
       <Card
+        bodyStyle={{ padding: 8 }}
         title={
           <Space direction="vertical" size={3}>
             <Space>
@@ -98,7 +107,18 @@ const TermItemWidget = ({ data, onTermClick }: IWidget) => {
           </Dropdown>
         }
       >
-        <MdView html={data?.html} />
+        <div className="pcd_article">
+          <MdView html={data?.html} />
+        </div>
+        {showDiscussion ? (
+          <Discussion resType="term" resId={data?.guid} />
+        ) : (
+          <div style={{ textAlign: "right" }}>
+            <Button type="link" onClick={() => setShowDiscussion(true)}>
+              纠错
+            </Button>
+          </div>
+        )}
       </Card>
       <TermModal
         id={data?.guid}

dashboard/src/components/term/TermSearch.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Col, List, Row, Typography } from "antd";
+import { Col, List, Row, Skeleton, Typography } from "antd";
 
 import { get } from "../../request";
 import {
@@ -24,14 +24,17 @@ const TermSearchWidget = ({
   onIdChange,
 }: IWidget) => {
   const [tableData, setTableData] = useState<ITermDataResponse[]>();
+  const [loading, setLoading] = useState(false);
 
   const loadById = (id: string) => {
     const url = `/v2/terms/${id}`;
     console.info("term url", url);
+    setLoading(true);
     get<ITermResponse>(url)
       .then((json) => {
         setTableData([json.data]);
       })
+      .finally(() => setLoading(false))
       .catch((error) => {
         console.error(error);
       });
@@ -40,16 +43,19 @@ const TermSearchWidget = ({
     if (typeof word === "undefined" && typeof wordId === "undefined") {
       return;
     }
-    if (word) {
+    if (word && word.length > 0) {
       const url = `/v2/terms?view=word&word=${word}`;
+      console.info("term url", url);
+      setLoading(true);
       get<ITermListResponse>(url)
         .then((json) => {
           setTableData(json.data.rows);
         })
+        .finally(() => setLoading(false))
         .catch((error) => {
           console.error(error);
         });
-    } else if (wordId) {
+    } else if (wordId && wordId.length > 0) {
       loadById(wordId);
     }
   }, [word, wordId]);
@@ -59,29 +65,30 @@ const TermSearchWidget = ({
       <Row>
         <Col flex="200px">{compact ? <></> : <></>}</Col>
         <Col flex="760px">
-          <Title>{word}</Title>
-          <List
-            itemLayout="vertical"
-            size="large"
-            dataSource={tableData}
-            renderItem={(item) => (
-              <List.Item>
-                <TermItem
-                  data={item}
-                  onTermClick={(value: ITerm) => {
-                    console.debug("on term click", value);
-                    if (typeof onIdChange === "undefined") {
-                      if (value.id) {
-                        loadById(value.id);
+          <Title level={4}>{word}</Title>
+          {loading ? (
+            <Skeleton active />
+          ) : (
+            <div>
+              {tableData?.map((item, id) => {
+                return (
+                  <TermItem
+                    data={item}
+                    onTermClick={(value: ITerm) => {
+                      console.debug("on term click", value);
+                      if (typeof onIdChange === "undefined") {
+                        if (value.id) {
+                          loadById(value.id);
+                        }
+                      } else {
+                        onIdChange(value.id);
                       }
-                    } else {
-                      onIdChange(value.id);
-                    }
-                  }}
-                />
-              </List.Item>
-            )}
-          />
+                    }}
+                  />
+                );
+              })}
+            </div>
+          )}
         </Col>
         <Col flex="200px"></Col>
       </Row>

dashboard/src/components/term/TermShow.tsx

@@ -10,13 +10,17 @@ interface IWidget {
   word?: string;
   wordId?: string;
   compact?: boolean;
+  hideInput?: boolean;
   onSearch?: Function;
+  onIdChange?: Function;
 }
 const TermShowWidget = ({
   word,
   wordId,
   compact = false,
+  hideInput = false,
   onSearch,
+  onIdChange,
 }: IWidget) => {
   const [split, setSplit] = useState<string>();
   const [wordSearch, setWordSearch] = useState<string>();
@@ -35,34 +39,49 @@ const TermShowWidget = ({
   };
   return (
     <div ref={setContainer}>
-      <Affix offsetTop={0} target={compact ? () => container : undefined}>
-        <div
-          style={{
-            backgroundColor: "rgba(100,100,100,0.3)",
-            backdropFilter: "blur(5px)",
-          }}
-        >
-          <Row style={{ paddingTop: "0.5em", paddingBottom: "0.5em" }}>
-            {compact ? <></> : <Col flex="auto"></Col>}
-            <Col flex="560px">
-              <SearchVocabulary
-                value={word}
-                onSearch={dictSearch}
-                onSplit={(word: string | undefined) => {
-                  console.log("onSplit", word);
-                  setSplit(word);
-                }}
-              />
-            </Col>
-            {compact ? <></> : <Col flex="auto"></Col>}
-          </Row>
-        </div>
-      </Affix>
+      {hideInput ? (
+        <></>
+      ) : (
+        <Affix offsetTop={0} target={compact ? () => container : undefined}>
+          <div
+            style={{
+              backgroundColor: "rgba(100,100,100,0.3)",
+              backdropFilter: "blur(5px)",
+            }}
+          >
+            <Row style={{ paddingTop: "0.5em", paddingBottom: "0.5em" }}>
+              {compact ? <></> : <Col flex="auto"></Col>}
+              <Col flex="560px">
+                <SearchVocabulary
+                  value={word}
+                  onSearch={dictSearch}
+                  onSplit={(word: string | undefined) => {
+                    console.log("onSplit", word);
+                    setSplit(word);
+                  }}
+                />
+              </Col>
+              {compact ? <></> : <Col flex="auto"></Col>}
+            </Row>
+          </div>
+        </Affix>
+      )}
+
       <Content style={{ minHeight: 700 }}>
         <Row>
           {compact ? <></> : <Col flex="auto"></Col>}
           <Col flex="1260px">
-            <TermSearch word={wordSearch} wordId={wordId} compact={compact} />
+            <TermSearch
+              word={wordSearch}
+              wordId={wordId}
+              compact={compact}
+              onIdChange={(value: string) => {
+                console.debug("term onIdChange", value);
+                if (typeof onIdChange !== "undefined") {
+                  onIdChange(value);
+                }
+              }}
+            />
           </Col>
           {compact ? <></> : <Col flex="auto"></Col>}
         </Row>