feat: 完善自定义聊天配置

web/src/App.js

@@ -256,7 +256,7 @@ function App() {
           }
         />
         <Route
-          path='/chat'
+          path='/chat/:id?'
           element={
             <Suspense fallback={<Loading></Loading>}>
               <Chat />

web/src/components/SiderBar.js

@@ -40,11 +40,9 @@ const SiderBar = () => {
   const defaultIsCollapsed =
     isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true';
 
-  let navigate = useNavigate();
   const [selectedKeys, setSelectedKeys] = useState(['home']);
-  const systemName = getSystemName();
-  const logo = getLogo();
   const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed);
+  const [chatItems, setChatItems] = useState([]);
   const theme = useTheme();
   const setTheme = useSetTheme();
 
@@ -68,12 +66,6 @@ const SiderBar = () => {
 
   const headerButtons = useMemo(
     () => [
-      // {
-      //   text: '首页',
-      //   itemKey: 'home',
-      //   to: '/',
-      //   icon: <IconHome />,
-      // },
       {
         text: 'Playground',
         itemKey: 'playground',
@@ -96,11 +88,12 @@ const SiderBar = () => {
       {
         text: '聊天',
         itemKey: 'chat',
-        to: '/chat',
+        // to: '/chat',
+        items: chatItems,
         icon: <IconComment />,
-        className: localStorage.getItem('chat_link')
-          ? 'semi-navigation-item-normal'
-          : 'tableHiddle',
+        // className: localStorage.getItem('chat_link')
+        //   ? 'semi-navigation-item-normal'
+        //   : 'tableHiddle',
       },
       {
         text: '令牌',
@@ -181,7 +174,7 @@ const SiderBar = () => {
       localStorage.getItem('enable_data_export'),
       localStorage.getItem('enable_drawing'),
       localStorage.getItem('enable_task'),
-      localStorage.getItem('chat_link'),
+      localStorage.getItem('chat_link'), chatItems,
       isAdmin(),
     ],
   );
@@ -212,6 +205,33 @@ const SiderBar = () => {
       localKey = 'home';
     }
     setSelectedKeys([localKey]);
+    let chatLink = localStorage.getItem('chat_link');
+    if (!chatLink) {
+        let chats = localStorage.getItem('chats');
+        if (chats) {
+            // console.log(chats);
+            try {
+                chats = JSON.parse(chats);
+                if (Array.isArray(chats)) {
+                    let chatItems = [];
+                    for (let i = 0; i < chats.length; i++) {
+                        let chat = {};
+                        for (let key in chats[i]) {
+                            chat.text = key;
+                            chat.itemKey = 'chat' + i;
+                            chat.to = '/chat/' + i;
+                        }
+                        // setRouterMap({ ...routerMap, chat: '/chat/' + i })
+                        chatItems.push(chat);
+                    }
+                    setChatItems(chatItems);
+                }
+            } catch (e) {
+                console.error(e);
+                showError('聊天数据解析失败')
+            }
+        }
+    }
   }, []);
 
   return (
@@ -228,6 +248,27 @@ const SiderBar = () => {
         }}
         selectedKeys={selectedKeys}
         renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
+            let chatLink = localStorage.getItem('chat_link');
+            if (!chatLink) {
+                let chats = localStorage.getItem('chats');
+                if (chats) {
+                    chats = JSON.parse(chats);
+                    if (Array.isArray(chats) && chats.length > 0) {
+                        for (let i = 0; i < chats.length; i++) {
+                            routerMap['chat' + i] = '/chat/' + i;
+                        }
+                        if (chats.length > 1) {
+                            // delete /chat
+                            if (routerMap['chat']) {
+                                delete routerMap['chat'];
+                            }
+                        } else {
+                            // rename /chat to /chat/0
+                            routerMap['chat'] = '/chat/0';
+                        }
+                    }
+                }
+            }
           return (
             <Link
               style={{ textDecoration: 'none' }}
@@ -241,15 +282,6 @@ const SiderBar = () => {
         onSelect={(key) => {
           setSelectedKeys([key.itemKey]);
         }}
-        // header={{
-        //   logo: (
-        //     <img src={logo} alt='logo' style={{ marginRight: '0.75em' }} />
-        //   ),
-        //   text: systemName,
-        // }}
-        // footer={{
-        //   text: '© 2021 NekoAPI',
-        // }}
         footer={
           <>
             {isMobile() && (

web/src/components/fetchTokenKeys.js

@@ -4,7 +4,7 @@ import { API, showError } from '../helpers';
 
 async function fetchTokenKeys() {
   try {
-    const response = await API.get('/api/token/?p=0&size=999');
+    const response = await API.get('/api/token/?p=0&size=100');
     const { success, data } = response.data;
     if (success) {
       const activeTokens = data.filter((token) => token.status === 1);
@@ -38,9 +38,9 @@ function getServerAddress() {
   return serverAddress;
 }
 
-export function useTokenKeys() {
+export function useTokenKeys(id) {
   const [keys, setKeys] = useState([]);
-  const [chatLink, setChatLink] = useState('');
+  // const [chatLink, setChatLink] = useState('');
   const [serverAddress, setServerAddress] = useState('');
   const [isLoading, setIsLoading] = useState(true);
 
@@ -55,9 +55,7 @@ export function useTokenKeys() {
       }
       setKeys(fetchedKeys);
       setIsLoading(false);
-
-      const link = localStorage.getItem('chat_link');
-      setChatLink(link);
+      // setChatLink(link);
 
       const address = getServerAddress();
       setServerAddress(address);
@@ -66,5 +64,5 @@ export function useTokenKeys() {
     loadAllData();
   }, []);
 
-  return { keys, chatLink, serverAddress, isLoading };
+  return { keys, serverAddress, isLoading };
 }

web/src/pages/Chat/index.js

@@ -1,13 +1,32 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import { useTokenKeys } from '../../components/fetchTokenKeys';
-import {  Layout } from '@douyinfe/semi-ui';
+import {Banner, Layout} from '@douyinfe/semi-ui';
+import { useParams } from 'react-router-dom';
 
 const ChatPage = () => {
-  const { keys, chatLink, serverAddress, isLoading } = useTokenKeys();
+  const { id } = useParams();
+  const { keys, serverAddress, isLoading } = useTokenKeys(id);
 
   const comLink = (key) => {
-    if (!chatLink || !serverAddress || !key) return '';
-    return `${chatLink}/#/?settings={"key":"sk-${key}","url":"${encodeURIComponent(serverAddress)}"}`;
+    // console.log('chatLink:', chatLink);
+    if (!serverAddress || !key) return '';
+      let link = localStorage.getItem('chat_link');
+      if (link) {
+          link = `${link}/#/?settings={"key":"sk-${key}","url":"${encodeURIComponent(serverAddress)}"}`;
+      } else if (id) {
+          let chats = localStorage.getItem('chats');
+          if (chats) {
+              chats = JSON.parse(chats);
+              if (Array.isArray(chats) && chats.length > 0) {
+                  for (let k in chats[id]) {
+                      link = chats[id][k];
+                      link = link.replace('{address}', encodeURIComponent(serverAddress));
+                      link = link.replace('{key}', 'sk-' + key);
+                  }
+              }
+          }
+      }
+      return link;
   };
 
   const iframeSrc = keys.length > 0 ? comLink(keys[0]) : '';
@@ -22,10 +41,10 @@ const ChatPage = () => {
     <div>
       <Layout>
         <Layout.Header>
-          <h3 style={{ color: 'red'}}>
-            当前没有可用的已启用令牌，请确认是否有令牌处于启用状态！<br />
-            正在跳转......
-          </h3>
+          <Banner
+              description={"正在跳转......"}
+              type={"warning"}
+          />
         </Layout.Header>
       </Layout>
     </div>