:sparkles: 单词变格列表

dashboard/src/components/api/Dict.ts

@@ -1,3 +1,5 @@
+import { ICaseListData } from "../dict/CaseList";
+
 export interface IDictDataRequest {
   id: number;
   word: string;
@@ -62,3 +64,12 @@ export interface IVocabularyListResponse {
 export interface IUserDictDeleteRequest {
   id: string;
 }
+
+export interface ICaseListResponse {
+  ok: boolean;
+  message: string;
+  data: {
+    rows: ICaseListData[];
+    count: number;
+  };
+}

dashboard/src/components/dict/CaseList.tsx

@@ -1,31 +1,52 @@
-import { List, Card } from "antd";
-import { Row, Col } from "antd";
+import { List, Card, Tag, Typography } from "antd";
+import { useEffect, useState } from "react";
+import { get } from "../../request";
+import { ICaseListResponse } from "../api/Dict";
+const { Text } = Typography;
 
 export interface ICaseListData {
-	word: string;
-	count: number;
+  word: string;
+  count: number;
+  bold: number;
 }
-interface IWidgetCaseList {
-	data: ICaseListData[];
+interface IWidget {
+  word?: string;
 }
-const Widget = (prop: IWidgetCaseList) => {
-	return (
-		<Card title="Case List">
-			<List
-				footer={"共计30"}
-				size="small"
-				dataSource={prop.data}
-				renderItem={(item) => (
-					<List.Item>
-						<Row>
-							<Col>{item.word}</Col>
-							<Col>{item.count}</Col>
-						</Row>
-					</List.Item>
-				)}
-			/>
-		</Card>
-	);
+const Widget = ({ word }: IWidget) => {
+  const [caseData, setCaseData] = useState<ICaseListData[]>();
+  const [count, setCount] = useState<number>();
+  useEffect(() => {
+    get<ICaseListResponse>(`/v2/case/${word}`).then((json) => {
+      console.log("case", json);
+      if (json.ok) {
+        setCaseData(json.data.rows.sort((a, b) => b.count - a.count));
+        setCount(json.data.count);
+      }
+    });
+  }, [word]);
+  return (
+    <div style={{ padding: 4 }}>
+      <List
+        header={`单词数：${count}`}
+        size="small"
+        dataSource={caseData}
+        renderItem={(item) => (
+          <List.Item>
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                width: "100%",
+              }}
+            >
+              <Text strong={item.bold > 0 ? true : false}>{item.word}</Text>
+              <Tag>{item.count}</Tag>
+            </div>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
 };
 
 export default Widget;

dashboard/src/components/dict/DictContent.tsx

@@ -20,11 +20,12 @@ export interface IApiDictContentData {
 }
 
 interface IWidget {
+  word?: string;
   data: IWidgetDictContentData;
   compact?: boolean;
 }
 
-const Widget = ({ data, compact }: IWidget) => {
+const Widget = ({ word, data, compact }: IWidget) => {
   return (
     <>
       <Row>
@@ -37,7 +38,7 @@ const Widget = ({ data, compact }: IWidget) => {
           })}
         </Col>
         <Col flex="200px">
-          <CaseList data={data.caselist} />
+          <CaseList word={word} />
         </Col>
       </Row>
     </>