#985 阶段3: 9个占位路由升级为 amber 金暖白 ComingSoon 页 (统一品牌感+功能预告)

frontend-v2/src/App.tsx

@@ -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 */}
+            {/* 占位页：真实功能开发中，统一 amber 金暖白「敬请期待」态 */}
-            <Route path="market" element={<PlaceholderPage title="技能市场" />} />
+            <Route
-            <Route path="agents" element={<PlaceholderPage title="Agent 智能体" />} />
+              path="market"
-            <Route path="mcp" element={<PlaceholderPage title="MCP 工具" />} />
+              element={
-            <Route path="workflows" element={<PlaceholderPage title="工作流" />} />
+                <ComingSoon
-            <Route path="rules" element={<PlaceholderPage title="规则库" />} />
+                  title="技能市场"
-            <Route path="channels" element={<PlaceholderPage title="渠道" />} />
+                  icon={Zap}
-            <Route path="dashboard" element={<PlaceholderPage title="驾驶舱" />} />
+                  description="浏览、导入、发布 Skills 技能，一键接入平台能力。"
-            <Route path="profile" element={<PlaceholderPage title="个人中心" />} />
+                  features={[
-            <Route path="notifications" element={<PlaceholderPage title="消息通知" />} />
+                    '从 Coze / Dify / N8N 等平台导入技能',
-            <Route path="evolution" element={<PlaceholderPage title="自进化" />} />
+                    '官方技能与社区技能分类检索',
+                    '一键安装到 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;

frontend-v2/src/components/common/ComingSoon.tsx

@@ -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>
+  );
+}