+ {sourceLabels[sourceType] ?? sourceType}
+ 匹配度 {Math.round(score * 100)}%
+
+ {title}
+{content}
+ {sourceLabel ?来源：{sourceLabel}
: null} +
-
+
+
)
}
diff --git a/frontend/src/components/app/AppApprovalPanel.tsx b/frontend/src/components/app/AppApprovalPanel.tsx
new file mode 100644
index 0000000..c26408c
--- /dev/null
+++ b/frontend/src/components/app/AppApprovalPanel.tsx
@@ -0,0 +1,34 @@
+import type * as React from 'react'
+
+import { Alert, AlertAction, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
+
+type AppApprovalPanelProps = {
+ title: string
+ description: string
+ state: 'waiting' | 'approved' | 'rejected'
+ action?: React.ReactNode
+}
+
+const stateConfig = {
+ waiting: { label: '等待确认', variant: 'warning' },
+ approved: { label: '已确认', variant: 'success' },
+ rejected: { label: '已拒绝', variant: 'danger' }
+} as const
+
+export function AppApprovalPanel({ title, description, state, action }: AppApprovalPanelProps) {
+ const config = stateConfig[state]
+
+ return (
+
- setMobileNavOpen(true)} />
+
+
+
-
+ {description}
+
+ {action ?
+ {title}
+ {config.label}
+
+ {value}
+
-
+ 当前页面使用演示数据
+ 用于确认产品交互和数据契约，不会保存配置或发起真实调用。
+
+ )
+}
diff --git a/frontend/src/components/app/AppReferenceCard.tsx b/frontend/src/components/app/AppReferenceCard.tsx
new file mode 100644
index 0000000..c867cac
--- /dev/null
+++ b/frontend/src/components/app/AppReferenceCard.tsx
@@ -0,0 +1,30 @@
+import { Badge } from '@/components/ui/badge'
+
+const sourceLabels: Record = {
+ knowledge_item: '知识条目',
+ solution: '解决方案',
+ ticket: '历史工单',
+ document: '文档'
+}
+
+type AppReferenceCardProps = {
+ title: string
+ sourceType: string
+ content: string
+ score: number
+ sourceLabel?: string
+}
+
+export function AppReferenceCard({ title, sourceType, content, score, sourceLabel }: AppReferenceCardProps) {
+ return (
+
+
+ )
+}
diff --git a/frontend/src/components/app/AppRiskBadge.tsx b/frontend/src/components/app/AppRiskBadge.tsx
new file mode 100644
index 0000000..e5a6ebe
--- /dev/null
+++ b/frontend/src/components/app/AppRiskBadge.tsx
@@ -0,0 +1,14 @@
+import { Badge } from '@/components/ui/badge'
+import type { McpTool } from '@/features/prototype/types'
+
+const riskConfig = {
+ low: { label: '低风险', variant: 'success' },
+ medium: { label: '中风险', variant: 'warning' },
+ high: { label: '高风险', variant: 'danger' }
+} as const
+
+export function AppRiskBadge({ risk }: { risk: McpTool['risk_level'] }) {
+ const config = riskConfig[risk]
+
+ return {config.label}
+}
diff --git a/frontend/src/components/app/AppSection.tsx b/frontend/src/components/app/AppSection.tsx
index 8ccb6cd..0490050 100644
--- a/frontend/src/components/app/AppSection.tsx
+++ b/frontend/src/components/app/AppSection.tsx
@@ -1,6 +1,6 @@
import type * as React from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Separator } from '@/components/ui/separator'
type AppSectionProps = {
title: string
@@ -11,15 +11,16 @@ type AppSectionProps = {
export function AppSection({ title, description, action, children }: AppSectionProps) {
return (
-
-
-
+
+
-
+
)
}
diff --git a/frontend/src/components/app/AppPrototypeNotice.tsx b/frontend/src/components/app/AppPrototypeNotice.tsx
new file mode 100644
index 0000000..0d87c8f
--- /dev/null
+++ b/frontend/src/components/app/AppPrototypeNotice.tsx
@@ -0,0 +1,13 @@
+import { FlaskConical } from 'lucide-react'
+
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+
+export function AppPrototypeNotice() {
+ return (
+
-
{actions ?
-
{description ? {title}
+{title}
{meta}{description}
: null}{actions}
: null}
- {title}
- {description ? {description} : null}
+
+
)
}
diff --git a/frontend/src/components/app/AppSidebar.tsx b/frontend/src/components/app/AppSidebar.tsx
index 389968f..47f4a25 100644
--- a/frontend/src/components/app/AppSidebar.tsx
+++ b/frontend/src/components/app/AppSidebar.tsx
@@ -15,13 +15,28 @@ import {
Ticket,
UserCog,
Users,
- UsersRound
+ UsersRound,
+ Workflow
} from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarGroup,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarMenu,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ SidebarRail,
+ SidebarSeparator,
+ useSidebar
+} from '@/components/ui/sidebar'
import { useAuth } from '@/features/auth/AuthProvider'
import type { AuthMenu } from '@/features/auth/types'
-import { cn } from '@/lib/utils'
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
const iconMap = {
audit: ScrollText,
@@ -102,62 +117,41 @@ type SidebarNavContentProps = {
onNavigate?: () => void
}
-function SidebarBrand() {
- return (
-
-
-
- 移动端导航
-
- onMobileOpenChange?.(false)}
- />
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+ setOpenMobile(false)}
+ />
+
+
+
+
)
}
diff --git a/frontend/src/components/app/AppTopbar.tsx b/frontend/src/components/app/AppTopbar.tsx
index a90d54d..d4e0d99 100644
--- a/frontend/src/components/app/AppTopbar.tsx
+++ b/frontend/src/components/app/AppTopbar.tsx
@@ -1,49 +1,91 @@
-import { Bell, ChevronRight, LogOut, Menu, UserRound } from 'lucide-react'
+import * as React from 'react'
+import { ChevronDown, ChevronRight, LogOut, UserRound } from 'lucide-react'
import { AppThemeToggle } from '@/components/app/AppThemeToggle'
-import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
import { Separator } from '@/components/ui/separator'
+import { SidebarTrigger } from '@/components/ui/sidebar'
import { useAuth } from '@/features/auth/AuthProvider'
-type AppTopbarProps = {
- onMobileMenuClick?: () => void
+const routeTitles: Array<{ pattern: RegExp; title: string }> = [
+ { pattern: /^\/$/, title: '工作台' },
+ { pattern: /^\/tickets$/, title: '工单中心' },
+ { pattern: /^\/tickets\/new$/, title: '创建工单' },
+ { pattern: /^\/tickets\/\d+$/, title: '工单详情' },
+ { pattern: /^\/solutions$/, title: '解决方案库' },
+ { pattern: /^\/solutions\/new/, title: '新建解决方案' },
+ { pattern: /^\/knowledge$/, title: '知识库' },
+ { pattern: /^\/knowledge\/search$/, title: '知识检索' },
+ { pattern: /^\/knowledge\/items\/new$/, title: '新建知识条目' },
+ { pattern: /^\/system\/users$/, title: '用户管理' },
+ { pattern: /^\/system\/user-groups$/, title: '用户组管理' },
+ { pattern: /^\/system\/roles$/, title: '角色管理' },
+ { pattern: /^\/system\/menus$/, title: '菜单权限' },
+ { pattern: /^\/audit$/, title: '审计日志' },
+ { pattern: /^\/design-system$/, title: '设计系统' }
+]
+
+export function getCurrentPageTitle(hash: string) {
+ const route = hash.replace(/^#/, '') || '/'
+ return routeTitles.find((item) => item.pattern.test(route))?.title ?? '当前工作区'
}
-export function AppTopbar({ onMobileMenuClick }: AppTopbarProps) {
+export function AppTopbar() {
const { logout, user } = useAuth()
+ const [pageTitle, setPageTitle] = React.useState(() => getCurrentPageTitle(window.location.hash))
+
+ React.useEffect(() => {
+ const handleHashChange = () => setPageTitle(getCurrentPageTitle(window.location.hash))
+ window.addEventListener('hashchange', handleHashChange)
+ return () => window.removeEventListener('hashchange', handleHashChange)
+ }, [])
return (
-
+
-
+
)
}
@@ -166,7 +169,7 @@ function Sidebar({
- Sidebar
- Displays the mobile sidebar.
+ 侧边栏导航
+ 显示移动端功能导航。
+ {children}
-
+
+
+
{action}
-
- {title}
+ {description ?{description}
: null}{children}
+
-
- )
-}
-
function SidebarNavContent({ groups, currentHash, onNavigate }: SidebarNavContentProps) {
return (
-
+
)
}
-type AppSidebarProps = {
- mobileOpen?: boolean
- onMobileOpenChange?: (open: boolean) => void
-}
-
-export function AppSidebar({ mobileOpen = false, onMobileOpenChange }: AppSidebarProps) {
+export function AppSidebar() {
const { user } = useAuth()
+ const { setOpenMobile } = useSidebar()
const currentHash = useCurrentHash()
const menuGroups = (user?.menus ?? []).filter((menu) => menu.is_visible && menu.is_enabled)
const hasKnowledgeMenu = menuGroups.some(
@@ -166,24 +160,42 @@ export function AppSidebar({ mobileOpen = false, onMobileOpenChange }: AppSideba
const groups = hasKnowledgeMenu ? menuGroups : [...menuGroups, knowledgeNavGroup]
return (
- <>
-
-
-
-
-
-
-
- AI 工单平台
-企业服务治理中台
-
+
+
+ 服务状态
+ 本地环境
+
+
-
+
-
- 本地环境
-
+
+
+
+
+
+
+ {user?.display_name || user?.username || '当前用户'}
+ {user?.username || '未设置账号'}
+
+
+
+ void logout()}>
+
+
+
+
)
diff --git a/frontend/src/components/app/AppTraceTimeline.tsx b/frontend/src/components/app/AppTraceTimeline.tsx
new file mode 100644
index 0000000..2518a6f
--- /dev/null
+++ b/frontend/src/components/app/AppTraceTimeline.tsx
@@ -0,0 +1,47 @@
+import { CheckCircle2, CircleAlert, Clock3 } from 'lucide-react'
+
+import { Badge } from '@/components/ui/badge'
+import type { AgentStep } from '@/features/prototype/types'
+
+const statusConfig = {
+ success: { label: '成功', variant: 'success' },
+ failed: { label: '失败', variant: 'danger' },
+ waiting: { label: '等待确认', variant: 'warning' }
+} as const
+
+const typeLabels = {
+ model: '模型',
+ retrieval: '知识检索',
+ skill: '技能',
+ tool: '工具',
+ approval: '人工确认'
+} as const
+
+export function AppTraceTimeline({ items }: { items: AgentStep[] }) {
+ return (
+
+
+ )
+
+ expect(container.querySelector('[data-slot="sidebar-wrapper"]')).toBeInTheDocument()
+ expect(container.querySelector('[data-slot="sidebar-trigger"]')).toHaveAccessibleName('切换侧边栏')
+ expect(container.querySelector('[data-slot="app-topbar"]')).toHaveTextContent('工单中心')
+ expect(screen.getByRole('link', { name: '工单中心' })).toHaveAttribute('href', '#/tickets')
+ })
+
+ it('页面标题和普通分区保持无卡片化层级', () => {
+ const { container } = render(
+ <>
+ 新建工单} />
+
+
+
+ )
+
+ const pageHeader = container.querySelector('[data-slot="app-page-header"]')
+ const section = container.querySelector('[data-slot="app-section"]')
+
+ expect(pageHeader).toBeInTheDocument()
+ expect(pageHeader).not.toHaveClass('shadow-sm')
+ expect(section?.tagName).toBe('SECTION')
+ expect(section?.querySelector('[data-slot="card"]')).not.toBeInTheDocument()
+ })
+})
diff --git a/frontend/src/components/app/prototype-components.test.tsx b/frontend/src/components/app/prototype-components.test.tsx
new file mode 100644
index 0000000..b87e3a6
--- /dev/null
+++ b/frontend/src/components/app/prototype-components.test.tsx
@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { AppApprovalPanel } from './AppApprovalPanel'
+import { AppMetricCard } from './AppMetricCard'
+import { AppPrototypeNotice } from './AppPrototypeNotice'
+import { AppReferenceCard } from './AppReferenceCard'
+import { AppRiskBadge } from './AppRiskBadge'
+import { AppTraceTimeline } from './AppTraceTimeline'
+
+describe('Stage A 共享组件', () => {
+ it('明确标识演示数据', () => {
+ render(
-
+
)}
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
index c263ad5..5f74f39 100644
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -43,7 +43,7 @@ function DropdownMenuContent({
data-slot="dropdown-menu-content"
sideOffset={sideOffset}
align={align}
- className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+ className={cn("z-50 max-h-[--radix-dropdown-menu-content-available-height] w-[--radix-dropdown-menu-trigger-width] min-w-32 origin-[--radix-dropdown-menu-content-transform-origin] overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className )}
{...props}
/>
@@ -73,7 +73,7 @@ function DropdownMenuItem({
data-inset={inset}
data-variant={variant}
className={cn(
- "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+ "group/dropdown-menu-item relative flex cursor-default select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
@@ -95,7 +95,7 @@ function DropdownMenuCheckboxItem({
data-slot="dropdown-menu-checkbox-item"
data-inset={inset}
className={cn(
- "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ "relative flex cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-7 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
@@ -139,7 +139,7 @@ function DropdownMenuRadioItem({
data-slot="dropdown-menu-radio-item"
data-inset={inset}
className={cn(
- "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ "relative flex cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-7 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
@@ -170,7 +170,7 @@ function DropdownMenuLabel({
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn(
- "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+ "px-1.5 py-1 text-xs font-medium text-muted-foreground data-[inset]:pl-7",
className
)}
{...props}
@@ -226,7 +226,7 @@ function DropdownMenuSubTrigger({
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
- "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ "flex cursor-default select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-7 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
@@ -244,7 +244,7 @@ function DropdownMenuSubContent({
return (
-
+ {items.map((item) => {
+ const Icon = item.status === 'success' ? CheckCircle2 : item.status === 'failed' ? CircleAlert : Clock3
+ const status = statusConfig[item.status]
+
+ return (
+
-
+
+
+ + ++++{item.step_name}
+{typeLabels[item.step_type]} +{status.label} +输入：{item.input_summary}
+输出：{item.output_summary}
+耗时 {item.latency_ms} ms
+
+ )
+ })}
+
业务内容
+ 字段内容
+
- {children}
-
+
+ {children}
+
+ {children}
@@ -215,23 +218,23 @@ function Sidebar({