169 lines
8.1 KiB
TypeScript
169 lines
8.1 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState } from 'react';
|
||
import {
|
||
MessageSquare,
|
||
Terminal,
|
||
Layers,
|
||
Wifi,
|
||
WifiOff,
|
||
Plus,
|
||
Trash2,
|
||
Send,
|
||
ChevronDown,
|
||
ChevronRight,
|
||
} from 'lucide-react';
|
||
|
||
interface SectionProps {
|
||
icon: React.ReactNode;
|
||
title: string;
|
||
children: React.ReactNode;
|
||
defaultOpen?: boolean;
|
||
}
|
||
|
||
function Section({ icon, title, children, defaultOpen = false }: SectionProps) {
|
||
const [open, setOpen] = useState(defaultOpen);
|
||
return (
|
||
<div className="border border-border rounded-lg overflow-hidden">
|
||
<button
|
||
className="w-full flex items-center gap-3 px-4 py-3 bg-card hover:bg-accent/50 transition-colors text-left"
|
||
onClick={() => setOpen((v) => !v)}
|
||
>
|
||
<span className="text-primary">{icon}</span>
|
||
<span className="font-medium flex-1">{title}</span>
|
||
{open ? <ChevronDown className="w-4 h-4 text-muted-foreground" /> : <ChevronRight className="w-4 h-4 text-muted-foreground" />}
|
||
</button>
|
||
{open && (
|
||
<div className="px-4 py-4 space-y-3 text-sm text-muted-foreground border-t border-border bg-background">
|
||
{children}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Tag({ children, color = 'default' }: { children: React.ReactNode; color?: 'green' | 'yellow' | 'red' | 'default' }) {
|
||
const cls = {
|
||
green: 'bg-green-900/30 text-green-400 border-green-800',
|
||
yellow: 'bg-yellow-900/30 text-yellow-400 border-yellow-800',
|
||
red: 'bg-red-900/30 text-red-400 border-red-800',
|
||
default: 'bg-muted text-foreground border-border',
|
||
}[color];
|
||
return (
|
||
<span className={`inline-block px-2 py-0.5 rounded border text-xs font-mono ${cls}`}>
|
||
{children}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
export default function HelpPage() {
|
||
return (
|
||
<div className="max-w-2xl mx-auto px-4 py-8 space-y-4">
|
||
<div className="mb-6">
|
||
<h1 className="text-2xl font-bold mb-1">使用帮助</h1>
|
||
<p className="text-muted-foreground text-sm">了解如何使用 Boardware Genius 的各项功能</p>
|
||
</div>
|
||
|
||
<Section icon={<MessageSquare className="w-5 h-5" />} title="如何开始对话" defaultOpen>
|
||
<p>进入页面后，你会看到主界面分为左侧<strong className="text-foreground">对话列表</strong>和右侧<strong className="text-foreground">聊天区域</strong>。</p>
|
||
<ol className="list-decimal list-inside space-y-1.5 ml-1">
|
||
<li>在底部输入框中输入你的问题或指令</li>
|
||
<li>按 <Tag>Enter</Tag> 发送，按 <Tag>Shift + Enter</Tag> 换行</li>
|
||
<li>等待 Boardware Genius 回复（右上角会显示"思考中..."）</li>
|
||
</ol>
|
||
<p className="mt-1">
|
||
点击左上角的 <Tag>新对话</Tag> 按钮可以开启一个全新的对话，历史对话会保存在左侧列表中。
|
||
</p>
|
||
</Section>
|
||
|
||
<Section icon={<Terminal className="w-5 h-5" />} title="斜杠命令（/命令）">
|
||
<p>在输入框中输入 <Tag>/</Tag> 可以呼出命令选择菜单，列出所有可用的快捷指令。</p>
|
||
<ul className="space-y-1.5 ml-1">
|
||
<li>输入 <Tag>/</Tag> 后继续输入关键词可以过滤命令</li>
|
||
<li>用 <Tag>↑</Tag> <Tag>↓</Tag> 方向键选择命令</li>
|
||
<li>按 <Tag>Enter</Tag> 或 <Tag>Tab</Tag> 确认选择</li>
|
||
<li>按 <Tag>Esc</Tag> 关闭命令菜单</li>
|
||
</ul>
|
||
<p>命令由内置功能或已安装的插件提供，可在<strong className="text-foreground">技能</strong>和<strong className="text-foreground">插件</strong>页面查看详情。</p>
|
||
</Section>
|
||
|
||
<Section icon={<Layers className="w-5 h-5" />} title="对话管理">
|
||
<ul className="space-y-2 ml-1">
|
||
<li>
|
||
<span className="inline-flex items-center gap-1"><Plus className="w-3.5 h-3.5" /><strong className="text-foreground">新对话</strong></span>
|
||
{' '}— 创建一个新的独立对话，不会影响现有对话
|
||
</li>
|
||
<li>
|
||
<span className="inline-flex items-center gap-1"><MessageSquare className="w-3.5 h-3.5" /><strong className="text-foreground">切换对话</strong></span>
|
||
{' '}— 点击左侧列表中的对话条目即可切换
|
||
</li>
|
||
<li>
|
||
<span className="inline-flex items-center gap-1"><Trash2 className="w-3.5 h-3.5" /><strong className="text-foreground">删除对话</strong></span>
|
||
{' '}— 鼠标悬停在对话条目上，点击右侧垃圾桶图标删除
|
||
</li>
|
||
</ul>
|
||
<p className="text-xs mt-1 text-muted-foreground/70">对话历史保存在服务器端，刷新页面或重启前端后仍可查看。</p>
|
||
</Section>
|
||
|
||
<Section icon={<Wifi className="w-5 h-5" />} title="连接状态说明">
|
||
<p>右上角导航栏会显示当前连接状态：</p>
|
||
<div className="space-y-2 ml-1 mt-2">
|
||
<div className="flex items-center gap-2">
|
||
<span className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" />
|
||
<Tag color="green">已连接</Tag>
|
||
<span>— Boardware Genius 服务正常运行，可以正常对话</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="w-2 h-2 rounded-full bg-yellow-500 flex-shrink-0" />
|
||
<Tag color="yellow">连接中 / 检查中</Tag>
|
||
<span>— 正在建立连接或检测服务状态，请稍等</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0" />
|
||
<Tag color="red">服务离线</Tag>
|
||
<span>— 已连到后端接口，但 Boardware Genius 服务当前不可用</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0" />
|
||
<Tag color="red">未连接</Tag>
|
||
<span>— 无法连接到服务器，系统会自动重试</span>
|
||
</div>
|
||
</div>
|
||
<p className="mt-3 text-xs">
|
||
<strong className="text-foreground">提示：</strong>若长时间显示"服务离线"，请检查后端进程是否已启动并监听正确端口。
|
||
</p>
|
||
</Section>
|
||
|
||
<Section icon={<Send className="w-5 h-5" />} title="输入技巧">
|
||
<ul className="space-y-2 ml-1">
|
||
<li><Tag>Enter</Tag> — 发送消息</li>
|
||
<li><Tag>Shift + Enter</Tag> — 在消息中插入换行，不发送</li>
|
||
<li>使用中文输入法时，选字过程中按 Enter 不会误发送，选好汉字后再按 Enter 才会发送</li>
|
||
<li>输入 <Tag>/</Tag> 可以快速调用内置命令和插件功能</li>
|
||
</ul>
|
||
</Section>
|
||
|
||
<Section icon={<WifiOff className="w-5 h-5" />} title="常见问题">
|
||
<div className="space-y-4">
|
||
<div>
|
||
<p className="font-medium text-foreground mb-1">Q：发送消息后一直没有回复？</p>
|
||
<p>请检查右上角连接状态是否为"已连接"。若显示"服务离线"或"未连接"，说明后端服务未运行，消息无法被处理。</p>
|
||
</div>
|
||
<div>
|
||
<p className="font-medium text-foreground mb-1">Q：如何查看 Boardware Genius 的运行状态？</p>
|
||
<p>点击顶部导航栏的<strong className="text-foreground">状态</strong>页面，可以查看服务配置、AI 模型、各通道和定时任务的运行状况。</p>
|
||
</div>
|
||
<div>
|
||
<p className="font-medium text-foreground mb-1">Q：如何使用定时任务？</p>
|
||
<p>点击顶部导航栏的<strong className="text-foreground">定时任务</strong>，可以添加、启用或禁用周期性执行的指令，例如定时提醒、数据采集等。</p>
|
||
</div>
|
||
<div>
|
||
<p className="font-medium text-foreground mb-1">Q：什么是技能和插件？</p>
|
||
<p><strong className="text-foreground">技能</strong>是可上传的自定义提示词包，扩展 Boardware Genius 的能力范围。<strong className="text-foreground">插件</strong>是更完整的功能扩展，可以提供新的斜杠命令、专用 Agent 等。</p>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
</div>
|
||
);
|
||
}
|