Skip to content

phsl / new-api

Go to a project
Commit 824714e5 by 1808837298@qq.com
Options

feat: 完善自定义聊天配置

parent 53ff1547
Showing with 90 additions and 40 deletions
web/src/App.js
...@@ -256,7 +256,7 @@ function App() { ...@@ -256,7 +256,7 @@ function App() {
} }
/> />
<Route <Route
path='/chat' path='/chat/:id?'
element={ element={
<Suspense fallback={<Loading></Loading>}> <Suspense fallback={<Loading></Loading>}>
<Chat /> <Chat />
......
web/src/components/SiderBar.js
...@@ -40,11 +40,9 @@ const SiderBar = () => { ...@@ -40,11 +40,9 @@ const SiderBar = () => {
const defaultIsCollapsed = const defaultIsCollapsed =
isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true'; isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true';
let navigate = useNavigate();
const [selectedKeys, setSelectedKeys] = useState(['home']); const [selectedKeys, setSelectedKeys] = useState(['home']);
const systemName = getSystemName();
const logo = getLogo();
const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed); const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed);
const [chatItems, setChatItems] = useState([]);
const theme = useTheme(); const theme = useTheme();
const setTheme = useSetTheme(); const setTheme = useSetTheme();
...@@ -68,12 +66,6 @@ const SiderBar = () => { ...@@ -68,12 +66,6 @@ const SiderBar = () => {
const headerButtons = useMemo( const headerButtons = useMemo(
() => [ () => [
// {
// text: '首页',
// itemKey: 'home',
// to: '/',
// icon: <IconHome />,
// },
{ {
text: 'Playground', text: 'Playground',
itemKey: 'playground', itemKey: 'playground',
...@@ -96,11 +88,12 @@ const SiderBar = () => { ...@@ -96,11 +88,12 @@ const SiderBar = () => {
{ {
text: '聊天', text: '聊天',
itemKey: 'chat', itemKey: 'chat',
to: '/chat', // to: '/chat',
items: chatItems,
icon: <IconComment />, icon: <IconComment />,
className: localStorage.getItem('chat_link') // className: localStorage.getItem('chat_link')
? 'semi-navigation-item-normal' // ? 'semi-navigation-item-normal'
: 'tableHiddle', // : 'tableHiddle',
}, },
{ {
text: '令牌', text: '令牌',
...@@ -181,7 +174,7 @@ const SiderBar = () => { ...@@ -181,7 +174,7 @@ const SiderBar = () => {
localStorage.getItem('enable_data_export'), localStorage.getItem('enable_data_export'),
localStorage.getItem('enable_drawing'), localStorage.getItem('enable_drawing'),
localStorage.getItem('enable_task'), localStorage.getItem('enable_task'),
localStorage.getItem('chat_link'), localStorage.getItem('chat_link'), chatItems,
isAdmin(), isAdmin(),
], ],
); );
...@@ -212,6 +205,33 @@ const SiderBar = () => { ...@@ -212,6 +205,33 @@ const SiderBar = () => {
localKey = 'home'; localKey = 'home';
} }
setSelectedKeys([localKey]); 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 ( return (
...@@ -228,6 +248,27 @@ const SiderBar = () => { ...@@ -228,6 +248,27 @@ const SiderBar = () => {
}} }}
selectedKeys={selectedKeys} selectedKeys={selectedKeys}
renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => { 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 ( return (
<Link <Link
style={{ textDecoration: 'none' }} style={{ textDecoration: 'none' }}
...@@ -241,15 +282,6 @@ const SiderBar = () => { ...@@ -241,15 +282,6 @@ const SiderBar = () => {
onSelect={(key) => { onSelect={(key) => {
setSelectedKeys([key.itemKey]); setSelectedKeys([key.itemKey]);
}} }}
// header={{
// logo: (
// <img src={logo} alt='logo' style={{ marginRight: '0.75em' }} />
// ),
// text: systemName,
// }}
// footer={{
// text: '© 2021 NekoAPI',
// }}
footer={ footer={
<> <>
{isMobile() && ( {isMobile() && (
......
web/src/components/fetchTokenKeys.js
...@@ -4,7 +4,7 @@ import { API, showError } from '../helpers'; ...@@ -4,7 +4,7 @@ import { API, showError } from '../helpers';
async function fetchTokenKeys() { async function fetchTokenKeys() {
try { 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; const { success, data } = response.data;
if (success) { if (success) {
const activeTokens = data.filter((token) => token.status === 1); const activeTokens = data.filter((token) => token.status === 1);
...@@ -38,9 +38,9 @@ function getServerAddress() { ...@@ -38,9 +38,9 @@ function getServerAddress() {
return serverAddress; return serverAddress;
} }
export function useTokenKeys() { export function useTokenKeys(id) {
const [keys, setKeys] = useState([]); const [keys, setKeys] = useState([]);
const [chatLink, setChatLink] = useState(''); // const [chatLink, setChatLink] = useState('');
const [serverAddress, setServerAddress] = useState(''); const [serverAddress, setServerAddress] = useState('');
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
...@@ -55,9 +55,7 @@ export function useTokenKeys() { ...@@ -55,9 +55,7 @@ export function useTokenKeys() {
} }
setKeys(fetchedKeys); setKeys(fetchedKeys);
setIsLoading(false); setIsLoading(false);
// setChatLink(link);
const link = localStorage.getItem('chat_link');
setChatLink(link);
const address = getServerAddress(); const address = getServerAddress();
setServerAddress(address); setServerAddress(address);
...@@ -66,5 +64,5 @@ export function useTokenKeys() { ...@@ -66,5 +64,5 @@ export function useTokenKeys() {
loadAllData(); loadAllData();
}, []); }, []);
return { keys, chatLink, serverAddress, isLoading }; return { keys, serverAddress, isLoading };
} }
\ No newline at end of file
web/src/pages/Chat/index.js
import React from 'react'; import React, {useEffect} from 'react';
import { useTokenKeys } from '../../components/fetchTokenKeys'; 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 ChatPage = () => {
const { keys, chatLink, serverAddress, isLoading } = useTokenKeys(); const { id } = useParams();
const { keys, serverAddress, isLoading } = useTokenKeys(id);
const comLink = (key) => { const comLink = (key) => {
if (!chatLink || !serverAddress || !key) return ''; // console.log('chatLink:', chatLink);
return `${chatLink}/#/?settings={"key":"sk-${key}","url":"${encodeURIComponent(serverAddress)}"}`; 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]) : ''; const iframeSrc = keys.length > 0 ? comLink(keys[0]) : '';
...@@ -22,10 +41,10 @@ const ChatPage = () => { ...@@ -22,10 +41,10 @@ const ChatPage = () => {
<div> <div>
<Layout> <Layout>
<Layout.Header> <Layout.Header>
<h3 style={{ color: 'red'}}> <Banner
当前没有可用的已启用令牌，请确认是否有令牌处于启用状态！<br /> description={"正在跳转......"}
正在跳转...... type={"warning"}
</h3> />
</Layout.Header> </Layout.Header>
</Layout> </Layout>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment