feat: 加了一个按钮用来控制鼠标点击段落中的上标跳转到文献引用

app/i18n/locales/en/translation.json

@@ -25,5 +25,6 @@
     "deepseek-chat": "deepseek-chat (Model needs to be manually changed to this one)",
     "caifree": "caifree (Recommended)",
     "custom": "Custom"
-  }
+  },
+  "鼠标点击段落中的上标跳转到文献引用？": "Click the superscript in the paragraph to jump to the reference?"
 }

app/i18n/locales/zh-CN/translation.json

@@ -26,5 +26,6 @@
     "deepseek-chat": "deepseek-chat（需要手动修改模型为这个）",
     "caifree": "caifree（推荐）",
     "custom": "自定义"
-  }
+  },
+  "鼠标点击段落中的上标跳转到文献引用？": "鼠标点击段落中的上标跳转到文献引用？"
 }

app/store/index.ts

@@ -28,6 +28,7 @@ const statePersistConfig = {
     "contentUpdatedFromNetwork",
     "isVip",
     "language",
+    "isJumpToReference",
   ],
 };
 

app/store/slices/stateSlice.ts

@@ -5,6 +5,7 @@ export interface APIState {
   contentUpdatedFromNetwork: boolean;
   isVip: boolean;
   language: string;
+  isJumpToReference: boolean;
 }
 
 const initialState: APIState = {
@@ -13,6 +14,7 @@ const initialState: APIState = {
   contentUpdatedFromNetwork: false,
   isVip: false,
   language: "en",
+  isJumpToReference: false,
 };
 
 export const stateSlice = createSlice({
@@ -40,6 +42,9 @@ export const stateSlice = createSlice({
     setLanguage: (state, action: PayloadAction<string>) => {
       state.language = action.payload;
     },
+    setIsJumpToReference: (state, action: PayloadAction<boolean>) => {
+      state.isJumpToReference = action.payload;
+    },
   },
 });
 
@@ -50,6 +55,7 @@ export const {
   setContentUpdatedFromNetwork,
   setIsVip,
   setLanguage,
+  setIsJumpToReference,
 } = stateSlice.actions;
 
 export const stateReducer = stateSlice.reducer;

components/QuillEditor.tsx

@@ -70,6 +70,9 @@ const QEditor = ({ lng }) => {
   //读取redux中的API key
   const apiKey = useAppSelector((state: any) => state.auth.apiKey);
   const upsreamUrl = useAppSelector((state: any) => state.auth.upsreamUrl);
+  const isJumpToReference = useAppSelector(
+    (state) => state.state.isJumpToReference
+  );
   const [quill, setQuill] = useState<Quill | null>(null);
   const contentUpdatedFromNetwork = useAppSelector(
     (state) => state.state.contentUpdatedFromNetwork
@@ -140,22 +143,24 @@ const QEditor = ({ lng }) => {
       });
       // 添加点击事件监听器
       const handleEditorClick = (e) => {
-        const range = editor.current!.getSelection();
+        if (isJumpToReference) {
-        if (range && range.length === 0 && editor.current) {
+          const range = editor.current!.getSelection();
-          const [leaf, offset] = editor.current.getLeaf(range.index);
+          if (range && range.length === 0 && editor.current) {
-          if (leaf.text) {
+            const [leaf, offset] = editor.current.getLeaf(range.index);
-            const textWithoutSpaces = leaf.text.replace(/\s+/g, ""); // 去掉所有空格
+            if (leaf.text) {
-            if (/^\[\d+\]$/.test(textWithoutSpaces)) {
+              const textWithoutSpaces = leaf.text.replace(/\s+/g, ""); // 去掉所有空格
-              console.log("点击了引用", textWithoutSpaces);
+              if (/^\[\d+\]$/.test(textWithoutSpaces)) {
-              try {
+                console.log("点击了引用", textWithoutSpaces);
-                document.getElementById(textWithoutSpaces)!.scrollIntoView();
+                try {
-              } catch (e) {
+                  document.getElementById(textWithoutSpaces)!.scrollIntoView();
-                console.log("没有找到对应的引用");
+                } catch (e) {
+                  console.log("没有找到对应的引用");
+                }
               }
             }
+          } else {
+            console.log("No editor in click.");
           }
-        } else {
-          console.log("No editor in click.");
         }
       };
 

components/Settings.tsx

@@ -7,6 +7,7 @@ import {
   setUpsreamUrl,
   setSystemPrompt,
 } from "@/app/store/slices/authSlice";
+import { setIsJumpToReference } from "@/app/store/slices/stateSlice";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
@@ -43,11 +44,18 @@ const Settings = ({ lng }: { lng: string }) => {
   const apiKey = useAppSelector((state) => state.auth.apiKey);
   const upstreamUrl = useAppSelector((state) => state.auth.upsreamUrl);
   const systemPrompt = useAppSelector((state) => state.auth.systemPrompt);
+  const isJumpToReference = useAppSelector(
+    (state) => state.state.isJumpToReference
+  );
   //state
   const [userConfigNumber, setUserConfigNumber] = useLocalStorage(
     "userConfigNumber",
     "2"
   );
+
+  const toggleSwitch = () => {
+    dispatch(setIsJumpToReference(!isJumpToReference));
+  };
   return (
     <div className="max-w-md rounded overflow-hidden shadow-lg bg-blue-gray-100 z-1000  mx-auto ">
       <h1 className="font-bold text-3xl">settings</h1>
@@ -134,6 +142,21 @@ const Settings = ({ lng }: { lng: string }) => {
           />
         </div>
       </div>
+      <label className="relative inline-flex items-center cursor-pointer">
+        <input
+          type="checkbox"
+          className="sr-only peer"
+          checked={isJumpToReference}
+          onChange={toggleSwitch}
+        />
+        <div className="w-10 h-4 bg-gray-200 rounded-full peer-checked:bg-blue-600 peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 transition-colors ease-in-out duration-200"></div>
+        <span
+          className={`absolute block bg-white w-3 h-3 rounded-full transition ease-in-out duration-200 transform ${
+            isJumpToReference ? "translate-x-6" : "translate-x-1"
+          } -translate-y-1/2 top-1/2`}
+        ></span>
+        {t("鼠标点击段落中的上标跳转到文献引用？")}
+      </label>
     </div>
   );
 };

dictionaries/en.json

@@ -1,5 +0,0 @@
-{
-  "products": {
-    "cart": "Toevoegen aan Winkelwagen"
-  }
-}

dictionaries/zh-CN.json

@@ -1,5 +0,0 @@
-{
-  "products": {
-    "cart": "Add to Cart"
-  }
-}