mujian/react-boilerplate
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

doc

Browse Source
This commit is contained in:
rex
2025-11-26 20:48:12 +08:00
parent 243a22794c
commit 9b472109e9
16 changed files with 224 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title>幕间自定义界面模版 React版</title>
</head>
<body>
<div id="root"></div>

2
package.json
View File

@@ -36,7 +36,9 @@
"@types/react": "^19.1.10",
"@types/react-dom": "^19.1.7",
"@vitejs/plugin-react": "^5.0.0",
"clsx": "^2.1.1",
"globals": "^16.3.0",
"tailwind-merge": "^3.4.0",
"typescript": "~5.8.3",
"vite": "^7.1.2"
}

17
pnpm-lock.yaml generated
View File

@@ -66,9 +66,15 @@ importers:
'@vitejs/plugin-react':
specifier: ^5.0.0
version: 5.0.2(vite@7.1.3(@types/node@22.18.0)(jiti@2.5.1)(lightningcss@1.30.1))
clsx:
specifier: ^2.1.1
version: 2.1.1
globals:
specifier: ^16.3.0
version: 16.3.0
tailwind-merge:
specifier: ^3.4.0
version: 3.4.0
typescript:
specifier: ~5.8.3
version: 5.8.3
@@ -685,6 +691,10 @@ packages:
resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
engines: {node: '>=6'}
clsx@2.1.1:
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
engines: {node: '>=6'}
color-convert@2.0.1:
resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
engines: {node: '>=7.0.0'}
@@ -1275,6 +1285,9 @@ packages:
resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
engines: {node: '>=10'}
tailwind-merge@3.4.0:
resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
tailwindcss@4.1.12:
resolution: {integrity: sha512-DzFtxOi+7NsFf7DBtI3BJsynR+0Yp6etH+nRPTbpWnS2pZBaSksv/JGctNwSWzbFjp0vxSqknaUylseZqMDGrA==}
@@ -1972,6 +1985,8 @@ snapshots:
cli-spinners@2.9.2: {}
clsx@2.1.1: {}
color-convert@2.0.1:
dependencies:
color-name: 1.1.4
@@ -2408,6 +2423,8 @@ snapshots:
dependencies:
has-flag: 4.0.0
tailwind-merge@3.4.0: {}
tailwindcss@4.1.12: {}
tapable@2.2.3: {}

11
src/components/Button/index.tsx
View File

@@ -4,16 +4,17 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
children: React.ReactNode;
}
export const Button: React.FC<ButtonProps> = ({ children, className = '', ...props }) => {
export const Button: React.FC<ButtonProps> = ({
children,
className = '',
...props
}) => {
return (
<button
className={`px-4 py-2 rounded-md font-medium transition-colors ${className}`}
className={`px-4 py-1 rounded-md font-medium transition-colors ${className} ${props.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:opacity-80'}`}
{...props}
>
{children}
</button>
);
};

24
src/pages/about/index.tsx
View File

@@ -1,24 +0,0 @@
import { Button } from '@/components';
import './index.css';
import { useNavigate } from 'react-router';
// import { useGlobalStore } from "@/store/global";
function About() {
const navigate = useNavigate();
// const { count, increment } = useGlobalStore((state) => state);
return (
<div className='flex flex-col justify-center items-center h-screen'>
<div className='text-2xl font-bold mb-4'>这里是第二个页面</div>
<Button
className="bg-blue-500 hover:bg-blue-600 text-white rounded-lg"
onClick={() => navigate('/')}
>
返回首页
</Button>
</div>
);
}
export default About;

0
src/pages/about/components/.gitkeep → src/pages/chat/components/.gitkeep
View File

133
src/pages/chat/index.tsx Normal file
View File

@@ -0,0 +1,133 @@
import { useChat, useMujian } from '@mujian/js-sdk/react';
import { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router';
import { Button } from '@/components';
import { useGlobalStore } from '@/store/global';
import { cn } from '@/utils/cn';
// import { useGlobalStore } from "@/store/global";
function Chat() {
const { init } = useGlobalStore();
const mujian = useMujian();
const navigate = useNavigate();
const [inputValue, setInputValue] = useState('');
const messagesContainerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
init(mujian);
}, []);
// const { count, increment } = useGlobalStore((state) => state);
// 调用消息 SDK，获取消息列表、状态、错误信息、添加消息、停止消息
const { messages, status, error, append, stop } = useChat({
onError: (e) => {
console.error(e);
},
});
useEffect(() => {
if (messagesContainerRef.current) {
messagesContainerRef.current?.scrollTo({
top: messagesContainerRef.current.scrollHeight,
behavior: 'smooth',
});
}
}, [messages]);
// 发送按钮
const handleSend = () => {
append(inputValue);
setInputValue('');
};
// 停止按钮
const handleStop = () => {
stop();
};
// 输入框变化
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
setInputValue(e.target.value);
};
return (
<div className="flex flex-col justify-center items-center h-screen">
<div className="font-bold mb-2">
这里是首页{' '}
<Button
className="bg-blue-500 hover:bg-blue-600 text-white rounded-lg"
onClick={() => navigate('/second')}
>
进入第二个页面
</Button>
</div>
<div
className="w-full flex flex-col gap-2 h-[calc(100vh-140px)] max-h-[calc(100vh-140px)] overflow-y-auto px-2"
ref={messagesContainerRef}
>
{messages.map((message) =>
message.role === 'user' ? (
<div
key={message.id}
className="text-right p-2 rounded-md bg-red-500/30 text-white w-fit self-end"
>
User: {message.content}
</div>
) : (
<div
key={message.id}
className={cn(
'text-left p-2 rounded-md bg-green-500/30 text-white w-fit self-start',
message.id === messages[messages.length - 1].id &&
status === 'streaming' &&
'animate-pulse',
)}
>
Assistant: {message.content || '思考中...'}
</div>
),
)}
</div>
<div className="w-full flex flex-col gap-2 pt-2">
<textarea
rows={3}
placeholder="请输入内容"
className="border-2 border-gray-300 rounded-md p-2 w-full"
value={inputValue}
onChange={handleInputChange}
/>
<div className="flex gap-2 justify-between">
当前状态: {status}
<div className="flex gap-2">
<Button
className="bg-blue-500 hover:bg-blue-600 text-white rounded-lg"
onClick={handleSend}
onKeyDown={(e) => {
// 按下回车键发送消息
if (e.key === 'Enter') {
handleSend();
}
}}
disabled={status === 'streaming'}
>
发送
</Button>
<Button
className="bg-red-500 hover:bg-red-600 text-white rounded-lg"
onClick={handleStop}
disabled={status !== 'streaming'}
>
停止
</Button>
</div>
</div>
</div>
</div>
);
}
export default Chat;

17
src/pages/home/index.tsx
View File

@@ -1,17 +0,0 @@
import './index.css';
import { useNavigate } from 'react-router';
import { Button } from '@/components';
function Home() {
const navigate = useNavigate();
return (
<div className='flex flex-col justify-center items-center h-screen'>
<div className='text-2xl font-bold mb-4'>这里是首页</div>
<Button className="bg-green-500 hover:bg-green-600 text-white rounded-lg" onClick={() => navigate('/about')}>
按钮
</Button>
</div>
);
}
export default Home;

0
src/pages/home/components/.gitkeep → src/pages/second/components/.gitkeep
View File

0
src/pages/home/index.css → src/pages/second/index.css
View File

30
src/pages/second/index.tsx Normal file
View File

@@ -0,0 +1,30 @@
import './index.css';
import { useNavigate } from 'react-router';
import { Button } from '@/components';
import { useGlobalStore } from '@/store/global';
function Second() {
const navigate = useNavigate();
const { projectInfo, activePersona } = useGlobalStore();
return (
<div className="flex flex-col justify-center items-center h-screen">
<div className="text-2xl font-bold mb-4">这里是第二个页面</div>
<Button
className="bg-green-500 hover:bg-green-600 text-white rounded-lg"
onClick={() => navigate('/')}
>
返回首页
</Button>
<div className="w-full max-w-md">
<pre className="text-xs text-wrap">{JSON.stringify(projectInfo, null, 2)}</pre>
</div>
<div className="w-full max-w-md">
<pre className="text-xs text-wrap">{JSON.stringify(activePersona, null, 2)}</pre>
</div>
</div>
);
}
export default Second;

10
src/providers/RouterProvider.tsx
View File

@@ -1,16 +1,16 @@
import { createBrowserRouter } from 'react-router';
import { RouterProvider } from 'react-router/dom';
import About from '@/pages/about';
import Home from '@/pages/home';
import Chat from '@/pages/chat';
import Second from '@/pages/second';
const router = createBrowserRouter([
{
path: '/',
element: <Home />,
element: <Chat />,
},
{
path: '/about',
element: <About />,
path: '/second',
element: <Second />,
},
]);

19
src/store/global.tsx
View File

@@ -1,14 +1,23 @@
import type { MujianSdk } from '@mujian/js-sdk';
import type { PersonaInfo, ProjectInfo } from '@mujian/js-sdk/types';
import { create } from 'zustand';
type GlobalState = {
count: number;
increment: () => void;
projectInfo: ProjectInfo | null;
activePersona: PersonaInfo | null;
init: (mujian: MujianSdk) => Promise<void>;
};
export const useGlobalStore = create<GlobalState>((set) => ({
count: 0,
increment: () => {
console.log('increment');
set((state) => ({ count: state.count + 1 }));
projectInfo: null,
activePersona: null,
init: async (mujian: MujianSdk) => {
const [projectInfo, persona] = await Promise.all([
mujian.ai.chat.project.getInfo(),
mujian.ai.chat.settings.persona.getActive(),
]);
set({ projectInfo, activePersona: persona });
},
}));

6
src/utils/cn.ts Normal file
View File

@@ -0,0 +1,6 @@
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export const cn = (...inputs: ClassValue[]) => {
return twMerge(clsx(inputs));
};

15
vite.config.ts
View File

@@ -5,10 +5,13 @@ import { defineConfig } from 'vite';
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
plugins: [react(), tailwindcss()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
server: {
cors: true,
},
});