#985 阶段3: 9个占位路由升级为 amber 金暖白 ComingSoon 页 (统一品牌感+功能预告)
This commit is contained in:
QihuAI Design committed
1 parent
6f192a89cf
commit
4a2920e637
2 files changed
+226
-22
No files matched your search
+164
-22
@@ -8,6 +8,19 @@ import { ChatPage } from '@/pages/front/ChatPage';
|
||||
import { KnowledgePage } from '@/pages/front/KnowledgePage';
|
||||
import { ImBotHub } from '@/pages/front/ImBotHub';
|
||||
import { AppServices } from '@/pages/front/AppServices';
|
||||
import { ComingSoon } from '@/components/common/ComingSoon';
|
||||
import {
|
||||
Zap,
|
||||
Bot,
|
||||
Puzzle,
|
||||
Workflow,
|
||||
Shield,
|
||||
Radio,
|
||||
LayoutDashboard,
|
||||
User,
|
||||
Bell,
|
||||
Sparkles,
|
||||
} from 'lucide-react';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@@ -21,17 +34,157 @@ function App() {
|
||||
<Route path="knowledge" element={<KnowledgePage />} />
|
||||
<Route path="im-bots" element={<ImBotHub />} />
|
||||
<Route path="apps" element={<AppServices />} />
|
||||
{/* Placeholder routes */}
|
||||
<Route path="market" element={<PlaceholderPage title="技能市场" />} />
|
||||
<Route path="agents" element={<PlaceholderPage title="Agent 智能体" />} />
|
||||
<Route path="mcp" element={<PlaceholderPage title="MCP 工具" />} />
|
||||
<Route path="workflows" element={<PlaceholderPage title="工作流" />} />
|
||||
<Route path="rules" element={<PlaceholderPage title="规则库" />} />
|
||||
<Route path="channels" element={<PlaceholderPage title="渠道" />} />
|
||||
<Route path="dashboard" element={<PlaceholderPage title="驾驶舱" />} />
|
||||
<Route path="profile" element={<PlaceholderPage title="个人中心" />} />
|
||||
<Route path="notifications" element={<PlaceholderPage title="消息通知" />} />
|
||||
<Route path="evolution" element={<PlaceholderPage title="自进化" />} />
|
||||
{/* 占位页：真实功能开发中，统一 amber 金暖白「敬请期待」态 */}
|
||||
<Route
|
||||
path="market"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="技能市场"
|
||||
icon={Zap}
|
||||
description="浏览、导入、发布 Skills 技能，一键接入平台能力。"
|
||||
features={[
|
||||
'从 Coze / Dify / N8N 等平台导入技能',
|
||||
'官方技能与社区技能分类检索',
|
||||
'一键安装到 AI 聊天与个人工作流',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="agents"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="Agent 智能体"
|
||||
icon={Bot}
|
||||
description="可视化编排多源 Agent，组合技能、知识与工具完成复杂任务。"
|
||||
features={[
|
||||
'拖拽式 Agent 编排画布',
|
||||
'多 Agent 协作与对话路由',
|
||||
'绑定知识库与 MCP 工具',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="mcp"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="MCP 工具"
|
||||
icon={Puzzle}
|
||||
description="接入 Model Context Protocol 工具，扩展 AI 的外部执行能力。"
|
||||
features={[
|
||||
'粘贴 MCP 配置一键连接',
|
||||
'工具列表与连通性测试',
|
||||
'官方与社区 MCP 应用市场',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="workflows"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="工作流"
|
||||
icon={Workflow}
|
||||
description="用可视化 DAG 编排多步骤自动化流程。"
|
||||
features={[
|
||||
'节点拖拽编排',
|
||||
'条件分支与并行执行',
|
||||
'可导出可移植的 YAML 规范',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="rules"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="规则库"
|
||||
icon={Shield}
|
||||
description="配置业务规则与审批策略，管控 AI 工具调用风险。"
|
||||
features={[
|
||||
'工具调用四级风险审批',
|
||||
'Loop 原语与验证器',
|
||||
'企业级合规策略模板',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="channels"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="渠道"
|
||||
icon={Radio}
|
||||
description="管理多渠道接入，让 AI 能力触达不同终端用户。"
|
||||
features={[
|
||||
'微信公众号 / 个人微信接入',
|
||||
'IM Bot 多端统一适配',
|
||||
'渠道级权限与配额',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="dashboard"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="驾驶舱"
|
||||
icon={LayoutDashboard}
|
||||
description="全局数据驾驶舱，实时掌握平台运行与资源消耗。"
|
||||
features={[
|
||||
'Token 消耗与趋势分析',
|
||||
'模型调用与成功率监控',
|
||||
'租户维度用量报表',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="profile"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="个人中心"
|
||||
icon={User}
|
||||
description="管理个人账户、余额与偏好设置。"
|
||||
features={[
|
||||
'账户资料与登录安全',
|
||||
'Token 余额与充值',
|
||||
'API Key 与偏好配置',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="notifications"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="消息通知"
|
||||
icon={Bell}
|
||||
description="集中查看系统通知与任务动态。"
|
||||
features={[
|
||||
'任务完成 / 失败提醒',
|
||||
'配额与账单告警',
|
||||
'按渠道订阅推送',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="evolution"
|
||||
element={
|
||||
<ComingSoon
|
||||
title="自进化"
|
||||
icon={Sparkles}
|
||||
description="让平台从使用中持续学习、自我优化能力。"
|
||||
features={[
|
||||
'对话与工具调用沉淀',
|
||||
'技能自动迭代建议',
|
||||
'知识库增量同步',
|
||||
]}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Route>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
@@ -40,15 +193,4 @@ function App() {
|
||||
);
|
||||
}
|
||||
|
||||
function PlaceholderPage({ title }: { title: string }) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-[60vh]">
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-2">{title}</h2>
|
||||
<p className="text-muted-foreground">页面开发中...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,62 @@
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import { Sparkles, Construction } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
interface ComingSoonProps {
|
||||
title: string;
|
||||
icon: LucideIcon;
|
||||
description?: string;
|
||||
features?: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 统一「页面开发中」占位页（amber 金暖白设计语言）。
|
||||
* 用于前台尚未实现真实功能的路由，提供有品牌感的「敬请期待」状态，
|
||||
* 而非空白或纯文字提示，保证导航点击不出现断崖式空页面。
|
||||
*/
|
||||
export function ComingSoon({ title, icon: Icon, description, features }: ComingSoonProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh] px-4">
|
||||
<Card className="w-full max-w-lg text-center border-border">
|
||||
<CardContent className="p-10">
|
||||
{/* 图标芯片 */}
|
||||
<div className="mx-auto mb-6 w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center">
|
||||
<Icon size={30} className="text-primary" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-2 mb-3">
|
||||
<h2 className="text-2xl font-bold text-foreground">{title}</h2>
|
||||
<Badge className="bg-primary/10 text-primary border-primary/20 hover:bg-primary/10">
|
||||
<Construction size={12} className="mr-1" />
|
||||
开发中
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<p className="text-muted-foreground leading-relaxed mb-6">
|
||||
{description ?? `${title} 正在紧张开发中，敬请期待。上线后这里将提供完整的功能体验。`}
|
||||
</p>
|
||||
|
||||
{features && features.length > 0 && (
|
||||
<div className="text-left space-y-2 mb-6">
|
||||
{features.map((f, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-start gap-2 text-sm text-muted-foreground"
|
||||
>
|
||||
<Sparkles size={15} className="text-primary mt-0.5 shrink-0" />
|
||||
<span>{f}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-xs text-muted-foreground/70 bg-muted rounded-full px-3 py-1.5">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
|
||||
我们将尽快为您带来 {title}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user