查词结果分组

dashboard/src/components/dict/DictContent.tsx

@@ -1,4 +1,4 @@
-import { Col, Row, Tabs } from "antd";
+import { Button, Col, Divider, Row, Tabs } from "antd";
 
 import type { IAnchorData } from "./DictList";
 import type { IWidgetWordCardData } from "./WordCard";
@@ -9,10 +9,16 @@ import CaseList from "./CaseList";
 import DictList from "./DictList";
 import MyCreate from "./MyCreate";
 import { useIntl } from "react-intl";
+import DictGroupTitle from "./DictGroupTitle";
+
+export interface IDictWords {
+  pass: string;
+  words: IWidgetWordCardData[];
+}
 
 export interface IDictContentData {
   dictlist: IAnchorData[];
-  words: IWidgetWordCardData[];
+  words: IDictWords[];
   caselist: ICaseListData[];
   time?: number;
   count?: number;
@@ -64,7 +70,29 @@ const DictContentWidget = ({ word, data, compact }: IWidget) => {
                     </div>
                     <div>
                       {data.words.map((it, id) => {
-                        return <WordCard key={id} data={it} />;
+                        return (
+                          <div>
+                            <DictGroupTitle
+                              title={
+                                <Button style={{ width: 120 }}>
+                                  {intl.formatMessage({
+                                    id: `labels.dict.pass.${it.pass}`,
+                                  })}
+                                </Button>
+                              }
+                              path={[
+                                intl.formatMessage({
+                                  id: `labels.dict.pass.${it.pass}`,
+                                }),
+                              ]}
+                            />
+                            <div>
+                              {it.words.map((word, index) => (
+                                <WordCard key={index} data={word} />
+                              ))}
+                            </div>
+                          </div>
+                        );
                       })}
                     </div>
                   </div>