Merge pull request #2495 from visuddhinanda/development

Development

dashboard-v6/src/Router.tsx

@@ -17,6 +17,7 @@ import transferRoutes from "./routes/transferRoutes";
 import tagRoutes from "./routes/tagRoutes";
 import driverRoutes from "./routes/driverRoutes";
 import dictRoutes from "./routes/dictRoutes";
+import dictionaryRoutes from "./routes/dictionaryRoutes";
 import courseRoutes from "./routes/courseRoutes";
 import nissayaRoutes from "./routes/nissayaRoutes";
 import discussionRoutes from "./routes/discussionRoutes";
@@ -106,6 +107,7 @@ const router = createBrowserRouter(
             ...tagRoutes,
             ...driverRoutes,
             ...dictRoutes,
+            ...dictionaryRoutes,
             ...courseRoutes,
             ...nissayaRoutes,
             ...discussionRoutes,

dashboard-v6/src/components/dict/Dictionary.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Layout, Affix, Col, Row } from "antd";
 
 import DictSearch from "./DictSearch";
@@ -14,88 +14,111 @@ interface IWidget {
   onSearch?: (word?: string) => void;
 }
 
+interface IQuery {
+  type: string;
+  word?: string;
+  id?: string;
+}
+
+/**
+ * 解析查词串。普通词按小写查字典；带冒号的是高级格式，
+ * 如 `type:term id:xxx`、`type:term word:dhamma`。纯函数，不碰 state。
+ */
+function parseQuery(value?: string): IQuery {
+  if (!value?.includes(":")) {
+    return { type: "dict", word: value?.toLowerCase() };
+  }
+  // 与 v4 一致：没写 type 时沿用字典
+  const query: IQuery = { type: "dict", word: "" };
+  value.split(" ").forEach((item) => {
+    const kv = item.split(":");
+    if (kv.length !== 2) return;
+    switch (kv[0]) {
+      case "type":
+        query.type = kv[1];
+        break;
+      case "word":
+        query.word = kv[1];
+        break;
+      case "id":
+        query.id = kv[1];
+        break;
+      default:
+        break;
+    }
+  });
+  return query;
+}
+
 const DictionaryWidget = ({ word, compact = false, onSearch }: IWidget) => {
   const [split, setSplit] = useState<string>();
-  const [wordSearch, setWordSearch] = useState<string>();
   const [container, setContainer] = useState<HTMLDivElement | null>(null);
-  const [dictType, setDictType] = useState("dict");
+  // 首次挂载就带着 word 时（如从 URL 进入）直接按它查，不必等 prop 变化
+  const [initial] = useState(() => parseQuery(word));
+  const [wordSearch, setWordSearch] = useState(initial.word);
+  const [dictType, setDictType] = useState(initial.type);
+  const [wordId, setWordId] = useState(initial.id);
   const [wordInput, setWordInput] = useState(word);
-  const [wordId, setWordId] = useState<string>();
 
   // 用 state 记录上一次的 prop，渲染期派生的标准做法
   const [prevWordProp, setPrevWordProp] = useState<string | undefined>(word);
-  const [prevSearch, setPrevSearch] = useState<string | undefined>(undefined);
+  const [prevSearch, setPrevSearch] = useState<string | undefined>(word);
 
-  const wordChange = useCallback((value?: string) => {
-    let currWord: string | undefined = "";
-    if (value?.includes(":")) {
-      const param = value.split(" ");
-      param.forEach((item) => {
-        const kv = item.split(":");
-        if (kv.length === 2) {
-          switch (kv[0]) {
-            case "type":
-              setDictType(kv[1]);
-              break;
-            case "word":
-              currWord = kv[1];
-              break;
-            case "id":
-              setWordId(kv[1]);
-              break;
-            default:
-              break;
-          }
-        }
-      });
-    } else {
-      setDictType("dict");
-      currWord = value?.toLowerCase();
-    }
-    document.getElementById("pcd_dict_top")?.scrollIntoView();
-    return currWord;
-  }, []);
+  /** 只更新本组件的 state，可在渲染期调用 */
+  const applyQuery = (query: IQuery) => {
+    setDictType(query.type);
+    // 只有高级格式带 id；普通词不清掉旧 id，与 v4 一致
+    if (query.id !== undefined) setWordId(query.id);
+    setWordSearch(query.word);
+  };
 
-  // 渲染期派生：word prop 变化时同步更新 wordInput / wordSearch
+  // 渲染期派生：word prop 变化（路由前进后退、redux 查词）时同步输入框并查词
   if (word !== prevWordProp) {
     setPrevWordProp(word);
     setWordInput(word);
-
     if (word !== prevSearch) {
       setPrevSearch(word);
-      const currWord = word?.includes(":")
-        ? word // 复杂格式保持原值，wordChange 会在实际搜索时解析
-        : word?.toLowerCase();
-      setWordSearch(currWord);
+      applyQuery(parseQuery(word));
     }
   }
 
-  const wordInputChange = useCallback(
-    (value: string | undefined) => {
-      setWordInput(value);
-      if (value === prevSearch) {
-        console.debug("same word, skip search", value);
-        return;
-      }
-      setPrevSearch(value);
-      const currWord = wordChange(value);
-      setWordSearch(currWord);
-    },
-    [wordChange, prevSearch]
-  );
+  // 换词后滚回顶部。副作用不能放在渲染期，所以放这里；首次挂载不滚
+  const mounted = useRef(false);
+  useEffect(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      return;
+    }
+    document.getElementById("pcd_dict_top")?.scrollIntoView();
+  }, [wordSearch, dictType, wordId]);
+
+  const wordInputChange = (value: string | undefined) => {
+    setWordInput(value);
+    if (value === prevSearch) {
+      console.debug("same word, skip search", value);
+      return;
+    }
+    setPrevSearch(value);
+    applyQuery(parseQuery(value));
+  };
 
   const dictSearch = useCallback(
     (value: string, isFactor?: boolean) => {
       console.info("onSearch", value);
-      const currWord = wordChange(value);
+      const query = parseQuery(value);
+      // 与 v4 一致，交给外部（路由 / redux）的只是解析出的单词，搜索框里的
+      // 高级格式不进地址栏；要重入请直接在地址栏写 type:term id:xxx
       if (typeof onSearch !== "undefined" && !isFactor) {
-        onSearch(currWord);
+        onSearch(query.word);
       }
-      // 用户主动搜索不去重
-      setPrevSearch(value);
-      setWordSearch(currWord);
+      // 用户主动搜索不去重。记下交给外部的词，它回传成 word prop 时不再重查，
+      // 否则会按普通词重新解析，把刚切到的术语视图冲掉
+      setPrevSearch(query.word);
+      setDictType(query.type);
+      if (query.id !== undefined) setWordId(query.id);
+      setWordSearch(query.word);
     },
-    [wordChange, onSearch]
+    [onSearch],
   );
 
   return (

dashboard-v6/src/components/dict/SearchVocabulary.tsx

@@ -33,6 +33,12 @@ const SearchVocabulary = ({
   const [factors, setFactors] = useState<string[]>([]);
   // 请求序号：用于竞态防护，只保留最新一次请求的结果
   const seqRef = useRef(0);
+  // 回车只认键盘选中的候选项：鼠标悬停也会让某项高亮，此时回车 AutoComplete
+  // 会选中悬停项（先触发 Input.Search 的 onSearch 查输入的词，紧接着 onSelect
+  // 查悬停的词，后者覆盖前者）。用户要的是查自己输入的词。
+  const arrowNavRef = useRef(false); // 本次输入后是否按过 ↑↓
+  const enterRef = useRef(false); // 这次 onSelect 是否由回车触发
+  const typedRef = useRef<string | undefined>(undefined); // 回车那一刻输入框里的词
 
   // 外部 value（点击单词触发的查词）变化时，同步输入框显示。
   // 仅在 value 真正变化时同步，用户手动输入时 value 不会变，因此不会打断输入。
@@ -129,6 +135,8 @@ const SearchVocabulary = ({
         }}
         showSearch={{
           onSearch: (val: string) => {
+            // 只有打字会走这里（选中候选项不会），借此重置键盘选择
+            arrowNavRef.current = false;
             if (val === "") {
               // 空输入：立即取消挂起请求，并使在途请求失效，清空建议
               seqRef.current++;
@@ -142,6 +150,12 @@ const SearchVocabulary = ({
           },
         }}
         onSelect={(val: string) => {
+          if (enterRef.current && !arrowNavRef.current) {
+            // 回车但没用 ↑↓ 选过：高亮来自鼠标悬停，忽略。Input.Search 的
+            // onSearch 已经查过输入的词，这里把被改掉的输入框改回来
+            setInput(typedRef.current);
+            return;
+          }
           onSearch?.(val);
         }}
       >
@@ -150,7 +164,20 @@ const SearchVocabulary = ({
           size={compact ? undefined : "large"}
           placeholder="search here"
           loading={fetching}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+              arrowNavRef.current = true;
+            } else if (e.key === "Enter") {
+              // onSelect 与本次 keydown 同步触发；之后清掉，免得影响鼠标点击选择
+              enterRef.current = true;
+              setTimeout(() => {
+                enterRef.current = false;
+              }, 0);
+            }
+          }}
           onSearch={(val: string) => {
+            // 回车时它先于 onSelect 触发，val 就是用户输入的词
+            typedRef.current = val;
             onSearch?.(val);
           }}
         />

dashboard-v6/src/components/editor/Editor.tsx

@@ -8,10 +8,8 @@ import {
   ChannelIcon,
   DictIcon,
   GrammarIcon,
-  RobotIcon,
   SuggestionIcon,
 } from "../../assets/icon";
-import ChatPanel from "./panels/ChatPanel";
 import SuggestionPanel from "./panels/SuggestionPanel";
 import GrammarBookPanel from "./panels/GrammarBookPanel";
 import DiscussionBox from "../discussion/DiscussionBox";
@@ -166,12 +164,6 @@ export default function Editor({
         <GrammarBookPanel articleId={articleId} anthologyId={anthologyId} />
       ),
     },
-    {
-      key: "ai",
-      icon: <RobotIcon />,
-      label: "人工智能",
-      content: <ChatPanel articleId={articleId} anthologyId={anthologyId} />,
-    },
   ];
 
   return (

dashboard-v6/src/components/navigation/MainMenu.tsx

@@ -15,7 +15,6 @@ import {
   ChannelIcon,
   CourseOutLinedIcon,
   DocumentIcon,
-  RobotIcon,
   TaskIcon,
   TermIcon,
   TipitakaIcon,
@@ -159,12 +158,6 @@ const Widget = ({ onSearch }: Props) => {
         />
       ),
     },
-    {
-      key: "/workspace/ai",
-      icon: <RobotIcon />,
-      label: "AI",
-      activeId: "workspace.ai",
-    },
     {
       key: "/workspace/tipitaka/lib",
       icon: <TipitakaIcon />,
@@ -287,18 +280,18 @@ const Widget = ({ onSearch }: Props) => {
       label: intl.formatMessage({ id: "labels.tools" }),
       children: [
         {
-          key: "/workspace/tag",
+          key: "/workspace/dictionary",
           label: intl.formatMessage({
-            id: "columns.studio.tag.title",
+            id: "columns.library.dict.title",
           }),
-          activeId: "workspace.tag",
+          activeId: "workspace.dictionary",
         },
         {
-          key: "/workspace/driver",
+          key: "/workspace/grammar-book",
           label: intl.formatMessage({
-            id: "columns.studio.attachment.title",
+            id: "columns.library.palihandbook.title",
           }),
-          activeId: "workspace.driver",
+          activeId: "workspace.grammar-book",
         },
         {
           key: "/workspace/dict",
@@ -307,6 +300,20 @@ const Widget = ({ onSearch }: Props) => {
           }),
           activeId: "workspace.dict",
         },
+        {
+          key: "/workspace/tag",
+          label: intl.formatMessage({
+            id: "columns.studio.tag.title",
+          }),
+          activeId: "workspace.tag",
+        },
+        {
+          key: "/workspace/driver",
+          label: intl.formatMessage({
+            id: "columns.studio.attachment.title",
+          }),
+          activeId: "workspace.driver",
+        },
       ],
     },
     {

dashboard-v6/src/pages/workspace/dictionary/index.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from "react";
+import { useIntl } from "react-intl";
+import { useNavigate, useParams } from "react-router";
+
+import Dictionary from "../../../components/dict/Dictionary";
+import { useAppSelector } from "../../../hooks";
+import { lookupWord } from "../../../reducers/command";
+
+/**
+ * 字典（独立页面）
+ * 查的词放在路由里（/workspace/dictionary/:word），刷新、分享、前进后退都能重入。
+ */
+const Widget = () => {
+  const intl = useIntl();
+  const navigate = useNavigate();
+  const { word } = useParams();
+
+  // 回车时 AutoComplete 的 onSelect 与 Input.Search 的 onSearch 会接连触发同一个词，
+  // 而此时 word 还是旧值，所以用 ref 记住刚跳过去的词，避免历史记录里压两条。
+  const lastWord = useRef(word);
+  useEffect(() => {
+    lastWord.current = word;
+  }, [word]);
+  const search = (value?: string) => {
+    if (!value || value === lastWord.current) return;
+    lastWord.current = value;
+    navigate(`/workspace/dictionary/${encodeURIComponent(value)}`);
+  };
+
+  // 结果里的巴利词点击查词走的是 redux 的 lookup，这里跟上它。
+  // 只响应挂载之后的变化，避免进页面时被 redux 里残留的旧词带跑。
+  const lookup = useAppSelector(lookupWord);
+  const prevLookup = useRef(lookup);
+  useEffect(() => {
+    if (lookup === prevLookup.current) return;
+    prevLookup.current = lookup;
+    if (typeof lookup === "string") search(lookup);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lookup]);
+
+  return (
+    <>
+      {/* React 19 的 <title> 只接受单个字符串子节点 */}
+      <title>{`${word ? `${word} - ` : ""}${intl.formatMessage({ id: "columns.library.dict.title" })}`}</title>
+      <Dictionary word={word} onSearch={search} />
+    </>
+  );
+};
+
+export default Widget;

dashboard-v6/src/pages/workspace/grammar-book/index.tsx

@@ -0,0 +1,21 @@
+import { useIntl } from "react-intl";
+
+import GrammarBook from "../../../components/term/GrammarBook";
+
+/**
+ * 语法手册（独立页面）
+ * 与编辑器右边栏的语法手册面板是同一个组件。
+ */
+const Widget = () => {
+  const intl = useIntl();
+  return (
+    <div style={{ maxWidth: 960, margin: "0 auto", padding: 16 }}>
+      <title>
+        {intl.formatMessage({ id: "columns.library.palihandbook.title" })}
+      </title>
+      <GrammarBook />
+    </div>
+  );
+};
+
+export default Widget;

dashboard-v6/src/routes/dictionaryRoutes.ts

@@ -0,0 +1,35 @@
+// src/routes/dictionaryRoutes.ts
+// 编辑器右边栏的「字典」「语法手册」的独立页面。
+// 注意 /workspace/dict 是「用户字典」，不要混淆。
+import { lazy } from "react";
+import type { RouteObject, UIMatch } from "react-router";
+
+const WorkspaceDictionary = lazy(() => import("../pages/workspace/dictionary"));
+const WorkspaceGrammarBook = lazy(
+  () => import("../pages/workspace/grammar-book"),
+);
+
+const dictionaryRoutes: RouteObject[] = [
+  {
+    path: "dictionary",
+    handle: { id: "workspace.dictionary", crumb: "dictionary" },
+    children: [
+      { index: true, Component: WorkspaceDictionary },
+      // 查词结果可重入：/workspace/dictionary/dhamma
+      {
+        path: ":word",
+        Component: WorkspaceDictionary,
+        handle: {
+          crumb: (match: UIMatch) => match.params.word ?? "",
+        },
+      },
+    ],
+  },
+  {
+    path: "grammar-book",
+    Component: WorkspaceGrammarBook,
+    handle: { id: "workspace.grammar-book", crumb: "grammar-book" },
+  },
+];
+
+export default dictionaryRoutes;