:bug: 加载时不显示目录风格

dashboard/src/components/corpus/BookTree.tsx

@@ -6,6 +6,11 @@ import { Typography } from "antd";
 import type { TreeProps } from "antd/es/tree";
 
 import { get } from "../../request";
+import { useNavigate } from "react-router-dom";
+import TocStyleSelect from "./TocStyleSelect";
+import { IPaliBookListResponse } from "../api/Corpus";
+import { ITocTree } from "./BookTreeList";
+import { PaliToEn } from "../../utils";
 
 const { Text } = Typography;
 
@@ -13,37 +18,33 @@ const { Option } = Select;
 interface IWidgetBookTree {
   root?: string;
   path?: string[];
+  onChange?: Function;
 }
-const Widget = (prop: IWidgetBookTree) => {
+const Widget = ({ root = "default", path, onChange }: IWidgetBookTree) => {
   //Library foot bar
   //const intl = useIntl(); //i18n
-  const defaultTreeData: NewTree[] = [];
-  const [treeData, setTreeData] = useState(defaultTreeData);
+  const navigate = useNavigate();
+
+  const [treeData, setTreeData] = useState<ITocTree[]>([]);
 
   useEffect(() => {
-    if (typeof prop.root !== "undefined") fetchBookTree(prop.root);
-  }, [prop.root]);
+    if (typeof root !== "undefined") fetchBookTree(root);
+  }, [root]);
 
-  type OrgTree = {
-    name: string;
-    tag: string[];
-    children: OrgTree[];
-  };
-  type NewTree = {
-    title: string;
-    key: string;
-    tag: string[];
-    children: NewTree[];
-  };
   const onSelect: TreeProps["onSelect"] = (selectedKeys, info) => {
     //let aaa: NewTree = info.node;
-    //console.log("selected", aaa.tag);
+    const node: ITocTree = info.node as unknown as ITocTree;
+    console.log("tree selected", selectedKeys, node.path);
+    if (typeof onChange !== "undefined" && selectedKeys.length > 0) {
+      onChange(selectedKeys[0], node.path);
+    }
   };
 
   function fetchBookTree(value: string) {
-    function treeMap(params: OrgTree): NewTree {
+    function treeMap(params: IPaliBookListResponse): ITocTree {
       return {
         title: params.name,
+        dir: PaliToEn(params.name),
         key: params.tag.join(),
         tag: params.tag,
         children: Array.isArray(params.children)
@@ -51,14 +52,23 @@ const Widget = (prop: IWidgetBookTree) => {
           : [],
       };
     }
-    get(`/v2/palibook/${value}`).then((response) => {
-      const myJson = response as unknown as OrgTree[];
-      let newTree = myJson.map(treeMap);
+    function setPathToNode(nodes: ITocTree[], path: string[]) {
+      for (let node of nodes) {
+        node.path = [...path, node.title];
+        setPathToNode(node.children, node.path);
+      }
+    }
+    get<IPaliBookListResponse[]>(`/v2/palibook/${value}`).then((json) => {
+      let newTree: ITocTree[] = json.map(treeMap);
+      setPathToNode(newTree, []);
+      console.log("root", newTree);
       setTreeData(newTree);
     });
   }
   const handleChange = (value: string) => {
     console.log(`selected ${value}`);
+    localStorage.setItem("pali_path_root", value);
+    navigate("/palicanon/list/" + value);
     fetchBookTree(value);
   };
 
@@ -67,14 +77,7 @@ const Widget = (prop: IWidgetBookTree) => {
     <Layout>
       <Space>
         <Text>目录风格</Text>
-        <Select
-          defaultValue={prop.root}
-          loading={false}
-          onChange={handleChange}
-        >
-          <Option value="defualt">Defualt</Option>
-          <Option value="cscd">CSCD</Option>
-        </Select>
+        <TocStyleSelect style={root} onChange={handleChange} />
       </Space>
       <Tree
         showLine