+
+
+
+
+
+ {dockAgent && dockedOpen ? (
+
+ ) : null}
+ {children}
+
+
+
+
+
+ {[0, 1, 2].map((item) =>
+ {value}
-
+
+ {header ? (
+
diff --git a/frontend/src/components/app/AppPageHeader.tsx b/frontend/src/components/app/AppPageHeader.tsx
index ae05340..9cfaf8d 100644
--- a/frontend/src/components/app/AppPageHeader.tsx
+++ b/frontend/src/components/app/AppPageHeader.tsx
@@ -1,24 +1,73 @@
-import type * as React from 'react'
+import * as React from 'react'
+import { ArrowLeft } from 'lucide-react'
+
+import { useCurrentRoute } from '@/app/route-meta'
+import { Button } from '@/components/ui/button'
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbList,
+ BreadcrumbPage,
+ BreadcrumbSeparator
+} from '@/components/ui/breadcrumb'
type AppPageHeaderProps = {
title: string
description?: string
+ breadcrumbLabel?: string
meta?: React.ReactNode
actions?: React.ReactNode
}
-export function AppPageHeader({ title, description, meta, actions }: AppPageHeaderProps) {
+export function AppPageHeader({ title, description, breadcrumbLabel, meta, actions }: AppPageHeaderProps) {
+ const route = useCurrentRoute()
+ const showBreadcrumbs = route.meta.breadcrumbs.length > 0
+ const parentBreadcrumb = route.meta.breadcrumbs[route.meta.breadcrumbs.length - 1]
return (
-
-
+
+ ) : null}
+
+ {header}
+
+
{children}
+
+ {showBreadcrumbs ? (
+
- {actions ?
)
diff --git a/frontend/src/components/app/AppRiskBadge.tsx b/frontend/src/components/app/AppRiskBadge.tsx
deleted file mode 100644
index e5a6ebe..0000000
--- a/frontend/src/components/app/AppRiskBadge.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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/AppRouteTabs.test.tsx b/frontend/src/components/app/AppRouteTabs.test.tsx
new file mode 100644
index 0000000..74a51c6
--- /dev/null
+++ b/frontend/src/components/app/AppRouteTabs.test.tsx
@@ -0,0 +1,93 @@
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { AppRouteTabs } from '@/components/app/AppRouteTabs'
+
+function navigate(path: string) {
+ act(() => {
+ window.location.hash = path
+ window.dispatchEvent(new HashChangeEvent('hashchange'))
+ })
+}
+
+beforeEach(() => {
+ window.sessionStorage.clear()
+ window.location.hash = '#/tickets/42'
+})
+
+afterEach(() => cleanup())
+
+describe('已打开页面标签', () => {
+ it('只显示实际打开过的页面，并允许关闭非当前标签', async () => {
+ const user = userEvent.setup()
+ render(
+ return typeof tab.label === 'string' && typeof tab.path === 'string' && tab.path.startsWith('/')
+ }).slice(-MAX_OPEN_TABS)
+ } catch {
+ return []
+ }
+}
+
+function saveOpenedTabs(tabs: RouteNavigationTab[]) {
+ window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(tabs))
+}
+
+function addOpenedTab(tabs: RouteNavigationTab[], tab: RouteNavigationTab) {
+ const existing = tabs.findIndex((item) => item.path === tab.path)
+ if (existing >= 0) {
+ return tabs.map((item, index) => index === existing ? { ...item, label: tab.label } : item)
+ }
+ return [...tabs, tab].slice(-MAX_OPEN_TABS)
+}
+
+export function AppRouteTabs() {
+ const { route, meta } = useCurrentRoute()
+ const [openedTabs, setOpenedTabs] = React.useState(readOpenedTabs)
+ const scrollAreaRef = React.useRef(null)
+ const tabRefs = React.useRef(new Map())
+ const [scrollState, setScrollState] = React.useState({
+ overflow: false,
+ canScrollLeft: false,
+ canScrollRight: false
+ })
+
+ const syncScrollState = React.useCallback(() => {
+ const element = scrollAreaRef.current
+ if (!element) return
+ const maxScrollLeft = Math.max(0, element.scrollWidth - element.clientWidth)
+ setScrollState({
+ overflow: maxScrollLeft > SCROLL_EPSILON,
+ canScrollLeft: element.scrollLeft > SCROLL_EPSILON,
+ canScrollRight: element.scrollLeft < maxScrollLeft - SCROLL_EPSILON
+ })
+ }, [])
+
+ React.useEffect(() => {
+ setOpenedTabs((current) => {
+ const next = addOpenedTab(current, { label: meta.title, path: route })
+ saveOpenedTabs(next)
+ return next
+ })
+ }, [meta.title, route])
+
+ React.useLayoutEffect(() => {
+ const element = scrollAreaRef.current
+ if (!element) return
+
+ syncScrollState()
+ element.addEventListener('scroll', syncScrollState, { passive: true })
+ window.addEventListener('resize', syncScrollState)
+ const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(syncScrollState)
+ resizeObserver?.observe(element)
+
+ return () => {
+ element.removeEventListener('scroll', syncScrollState)
+ window.removeEventListener('resize', syncScrollState)
+ resizeObserver?.disconnect()
+ }
+ }, [openedTabs.length, syncScrollState])
+
+ React.useLayoutEffect(() => {
+ const frame = window.requestAnimationFrame(() => {
+ const element = scrollAreaRef.current
+ const activeTab = tabRefs.current.get(route)
+ if (!element || !activeTab) return
+
+ const tabStart = activeTab.offsetLeft
+ const tabEnd = tabStart + activeTab.offsetWidth
+ const viewportStart = element.scrollLeft
+ const viewportEnd = viewportStart + element.clientWidth
+ let nextScrollLeft = viewportStart
+
+ if (tabStart < viewportStart) nextScrollLeft = Math.max(0, tabStart - 16)
+ if (tabEnd > viewportEnd) nextScrollLeft = tabEnd - element.clientWidth + 16
+
+ if (nextScrollLeft !== viewportStart) {
+ if (typeof element.scrollTo === 'function') element.scrollTo({ left: nextScrollLeft, behavior: 'smooth' })
+ else element.scrollLeft = nextScrollLeft
+ }
+ syncScrollState()
+ })
+
+ return () => window.cancelAnimationFrame(frame)
+ }, [openedTabs, route, scrollState.overflow, syncScrollState])
+
+ const closeTab = (path: string) => {
+ const closedIndex = openedTabs.findIndex((tab) => tab.path === path)
+ const next = openedTabs.filter((tab) => tab.path !== path)
+ saveOpenedTabs(next)
+ setOpenedTabs(next)
+
+ if (path !== route) return
+ const fallback = next[Math.max(0, closedIndex - 1)] ?? next[0]
+ window.location.hash = fallback?.path ?? '/'
+ }
+
+ const scrollTabs = (direction: -1 | 1) => {
+ const element = scrollAreaRef.current
+ if (!element) return
+ const distance = Math.max(240, element.clientWidth * 0.65) * direction
+ if (typeof element.scrollBy === 'function') element.scrollBy({ left: distance, behavior: 'smooth' })
+ else element.scrollLeft += distance
+ }
+
+ return (
+
+ )
+}
diff --git a/frontend/src/components/app/AppSection.tsx b/frontend/src/components/app/AppSection.tsx
index 0490050..9db3665 100644
--- a/frontend/src/components/app/AppSection.tsx
+++ b/frontend/src/components/app/AppSection.tsx
@@ -1,5 +1,6 @@
import type * as React from 'react'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
type AppSectionProps = {
@@ -7,9 +8,29 @@ type AppSectionProps = {
description?: string
action?: React.ReactNode
children: React.ReactNode
+ footer?: React.ReactNode
+ variant?: 'plain' | 'card'
}
-export function AppSection({ title, description, action, children }: AppSectionProps) {
+export function AppSection({ title, description, action, children, footer, variant = 'plain' }: AppSectionProps) {
+ if (variant === 'card') {
+ return (
+
+
+
+
+ {children}
+ {footer ? {footer} : null}
+
+
+ )
+ }
+
return (
+ {route.meta.backPath ? (
+
+ ) : null}
+
+
+ {route.meta.breadcrumbs.map((item, index) => (
+
+
+ {item.path ? (
+ {item.label}
+ ) : (
+ {item.label}
+ )}
+
+
+ ))}
+
+ {breadcrumbLabel ?? title}
+
+
+
+
+ ) : null}
+
-
{description ? {title}
+{title}
{meta}{description}
: null}{actions}
: null}
+ {actions ?
+ {actions}
+
: null}
+ {title}
+ {description ? {description} : null}
+
+ {action ? {action}
: null}
+
diff --git a/frontend/src/components/app/AppSidebar.test.tsx b/frontend/src/components/app/AppSidebar.test.tsx
new file mode 100644
index 0000000..b2c9c1a
--- /dev/null
+++ b/frontend/src/components/app/AppSidebar.test.tsx
@@ -0,0 +1,157 @@
+import * as React from 'react'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { AppSidebar } from '@/components/app/AppSidebar'
+import { SidebarProvider, useSidebar } from '@/components/ui/sidebar'
+import type { AuthMenu } from '@/features/auth/types'
+
+const logout = vi.fn()
+
+vi.mock('@/features/auth/AuthProvider', () => ({
+ useAuth: () => ({
+ logout,
+ user: {
+ username: 'admin',
+ display_name: '平台管理员',
+ menus: [
+ menu(1, 'workbench', '工作台', '#/', 'home'),
+ menu(2, 'business', '工单', '', 'ticket', [
+ menu(21, 'business.tickets', '工单中心', '#/tickets', 'ticket'),
+ menu(22, 'business.ticket_create', '创建工单', '#/tickets/new', 'briefcase')
+ ]),
+ menu(3, 'knowledge', '知识与方案', '', 'book_open', [
+ menu(31, 'platform.knowledge', '知识库', '#/knowledge', 'database'),
+ menu(32, 'knowledge.search', '知识检索', '#/knowledge/search', 'search')
+ ]),
+ menu(4, 'empty', '空分组', '', 'settings'),
+ { ...menu(5, 'hidden', '隐藏分组', '', 'settings', [menu(51, 'hidden.child', '隐藏页面', '#/hidden', 'settings')]), is_visible: false }
+ ]
+ }
+ })
+}))
+
+function menu(id: number, code: string, title: string, path: string, icon: string, children: AuthMenu[] = []): AuthMenu {
+ return {
+ id,
+ code,
+ title,
+ path,
+ icon,
+ permission_code: '',
+ is_visible: true,
+ is_enabled: true,
+ children
+ }
+}
+
+function renderSidebar(defaultOpen = true) {
+ return render((activeGroupCode)
+
+ React.useEffect(() => {
+ setOpenGroupCode(activeGroupCode)
+ }, [activeGroupCode, currentHash])
+
return (
- <>
- {groups.map((group) => (
-
- {group.title}
-
-
- {visibleChildren(group).map((item) => {
- const Icon = getIcon(item.icon)
- const route = currentHash.replace(/^#/, '')
- const itemRoute = item.path.replace(/^#/, '')
- const active = route === itemRoute || (itemRoute !== '/' && route.startsWith(`${itemRoute}/`))
+
+
+ 业务导航
+
+
+
+ {groups.map((group) => {
+ const children = visibleChildren(group)
+ const Icon = getIcon(group.icon)
+
+ if (group.path && children.length === 0) {
+ const groupActive = routeMatches(group.path, currentHash)
return (
-
-
-
+
+
+
+
)
- })}
-
-
-
- ))}
-
+ }
+
+ const selectedChildCode = activeChildCode(group, currentHash)
+ const groupActive = Boolean(selectedChildCode)
+ const groupOpen = openGroupCode === group.code
+ return (
+ {
+ if (!isMobile && state === 'collapsed') {
+ setOpen(true)
+ setOpenGroupCode(group.code)
+ return
+ }
+ setOpenGroupCode(nextOpen ? group.code : null)
+ }}
+ >
+
+
+
+
+
+
+
+
+ {children.map((item) => {
+ const itemActive = selectedChildCode === item.code
+ return (
+
+
+
+
+ {item.title}
+
+
+
+ )
+ })}
+
+
+
+
+ )
+ })}
+
+
+
)
}
export function AppSidebar() {
- const { user } = useAuth()
- const { setOpenMobile } = useSidebar()
+ const { logout, user } = useAuth()
+ const { setOpenMobile, state } = useSidebar()
const currentHash = useCurrentHash()
- const menuGroups = (user?.menus ?? []).filter((menu) => menu.is_visible && menu.is_enabled)
- const hasKnowledgeMenu = menuGroups.some(
- (group) => group.code.startsWith('knowledge') || visibleChildren(group).some((item) => item.path.startsWith('#/knowledge'))
- )
- const groups = hasKnowledgeMenu ? menuGroups : [...menuGroups, knowledgeNavGroup]
+ const groups = (user?.menus ?? []).filter((menu) => {
+ if (!menu.is_visible || !menu.is_enabled) return false
+ return Boolean(menu.path) || visibleChildren(menu).length > 0
+ })
+ const userName = user?.display_name || user?.username || '当前用户'
return (
-
-
+
+
-
-
-
-
-
+
+
+
+
@@ -179,23 +266,51 @@ export function AppSidebar() {
+
setOpenMobile(false)}
/>
-
-
-
- 服务状态
- 本地环境
+
+
+
+
+ setOpenMobile(false)}>
+
+
+ {getUserInitials(userName)}
+
+
+
+ {userName}
+ 个人中心 · 账号与设置
+
+
+
+
+
+
-
-
-
- 界面主题
-
+ 外观模式
- {themeOptions.map((option) => {
+ {appearanceOptions.map((option) => {
const Icon = option.icon
- return (
-
-
- )
+ return
diff --git a/frontend/src/components/app/AppTopbar.tsx b/frontend/src/components/app/AppTopbar.tsx
index d4e0d99..8e6f969 100644
--- a/frontend/src/components/app/AppTopbar.tsx
+++ b/frontend/src/components/app/AppTopbar.tsx
@@ -1,92 +1,23 @@
-import * as React from 'react'
-import { ChevronDown, ChevronRight, LogOut, UserRound } from 'lucide-react'
+import { Bot } from 'lucide-react'
+import { matchRoute, useCurrentRoute } from '@/app/route-meta'
import { AppThemeToggle } from '@/components/app/AppThemeToggle'
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'
-
-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: '设计系统' }
-]
+import { useAgentWorkspace } from '@/features/agent-workspace/AgentWorkspaceProvider'
export function getCurrentPageTitle(hash: string) {
const route = hash.replace(/^#/, '') || '/'
- return routeTitles.find((item) => item.pattern.test(route))?.title ?? '当前工作区'
+ return matchRoute(route).meta.section
}
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)
- }, [])
-
+ const { meta } = useCurrentRoute()
+ const { setSheetOpen } = useAgentWorkspace()
return (
-
-
+
)
}
diff --git a/frontend/src/components/app/app-foundation.test.tsx b/frontend/src/components/app/app-foundation.test.tsx
index cc7aecd..bec6761 100644
--- a/frontend/src/components/app/app-foundation.test.tsx
+++ b/frontend/src/components/app/app-foundation.test.tsx
@@ -1,10 +1,13 @@
import * as React from 'react'
-import { render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { AppShell } from '@/app/layout/AppShell'
+import { AppPage } from '@/components/app/AppPage'
import { AppPageHeader } from '@/components/app/AppPageHeader'
import { AppSection } from '@/components/app/AppSection'
+import { AGENT_DOCKED_OPEN_STORAGE_KEY } from '@/features/agent-workspace/AgentWorkspaceProvider'
const logout = vi.fn()
@@ -44,6 +47,12 @@ vi.mock('@/features/auth/AuthProvider', () => ({
}))
beforeEach(() => {
+ vi.stubGlobal('ResizeObserver', class ResizeObserverMock {
+ observe() {}
+ unobserve() {}
+ disconnect() {}
+ })
+ window.sessionStorage.clear()
window.location.hash = '#/tickets'
window.innerWidth = 1280
window.matchMedia = vi.fn().mockImplementation((query: string) => ({
@@ -58,17 +67,21 @@ beforeEach(() => {
}))
})
+afterEach(() => {
+ cleanup()
+ vi.unstubAllGlobals()
+})
+
describe('企业后台 UI 底座', () => {
it('使用 shadcn 侧栏骨架并显示当前中文页面', () => {
- const { container } = render(
-
-
- )
+ const { container } = render(
+
+ )
+
+ expect(container.querySelector('[data-slot="app-agent-dock"]')).not.toBeInTheDocument()
+ expect(container.querySelector('[data-slot="agent-workspace-launcher"]')).toHaveClass('fixed', 'rounded-full')
+
+ await user.click(screen.getByRole('button', { name: '打开 Agent 助手' }))
+ await waitFor(() => expect(container.querySelector('[data-slot="app-agent-dock"]')).toBeInTheDocument())
+ expect(window.sessionStorage.getItem(AGENT_DOCKED_OPEN_STORAGE_KEY)).toBe('true')
+ expect(screen.queryByRole('button', { name: '打开 Agent 助手' })).not.toBeInTheDocument()
+
+ await user.click(screen.getByRole('button', { name: '关闭 Agent 助手' }))
+ await waitFor(() => expect(container.querySelector('[data-slot="app-agent-dock"]')).not.toBeInTheDocument())
+ expect(window.sessionStorage.getItem(AGENT_DOCKED_OPEN_STORAGE_KEY)).toBe('false')
+ expect(screen.getByRole('button', { name: '打开 Agent 助手' })).toBeInTheDocument()
+ })
+
+ it('治理页面同样显示全局 Agent 入口，并通过 Sheet 打开', async () => {
+ const user = userEvent.setup()
+ window.location.hash = '#/system/users'
+ const { container } = render() {
+ return ) {
+ return (
+
+
+ )
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+ return
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+ return
+}
+
+function AlertDialogTitle({ className, ...props }: React.ComponentProps) {
+ return ) {
+ return ) {
+ return
+}
+
+function AlertDialogCancel({ className, ...props }: React.ComponentProps) {
+ return
+}
+
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger }
diff --git a/frontend/src/components/ui/avatar.tsx b/frontend/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..99f3ed2
--- /dev/null
+++ b/frontend/src/components/ui/avatar.tsx
@@ -0,0 +1,110 @@
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+ className,
+ size = "default",
+ ...props
+}: React.ComponentProps & {
+ size?: "default" | "sm" | "lg"
+}) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+ 显示与账户
+
+
-
-
-
-
-
-
-
-
-
- {user?.display_name || user?.username || '当前用户'}
- {user?.username || '未设置账号'}
-
-
-
- void logout()}>
-
-
-
-
-
+ 业务内容
- 业务内容
业务内容
业务内容
+ +用户管理内容
表单内容
+ + ) + + const surface = container.querySelector('[data-slot="app-page-header-surface"]') + const content = container.querySelector('[data-slot="app-page-content"]') + + expect(surface).toHaveClass('border-b', 'bg-card') + expect(surface).not.toHaveClass('min-[1024px]:sticky') + expect(surface).toHaveTextContent('工单中心') + expect(surface).toHaveTextContent('创建工单') + expect(screen.queryByRole('link', { name: '返回工单中心' })).not.toBeInTheDocument() + expect(within(surface as HTMLElement).getByRole('link', { name: '工单中心' })).toHaveAttribute('href', '#/tickets') + expect(content).toHaveTextContent('表单内容') + expect(surface?.contains(content)).toBe(false) + }) + + it('详情页允许使用实体编号覆盖当前面包屑节点', () => { + window.location.hash = '#/tickets/42' + render( +详情内容
+ + ) + + expect(screen.getByRole('link', { name: 'INC-20260714-0042' })).toHaveAttribute('aria-current', 'page') + expect(screen.getByRole('heading', { name: 'VPN 连接失败' })).toBeInTheDocument() + }) }) diff --git a/frontend/src/components/app/prototype-components.test.tsx b/frontend/src/components/app/prototype-components.test.tsx deleted file mode 100644 index b87e3a6..0000000 --- a/frontend/src/components/app/prototype-components.test.tsx +++ /dev/null @@ -1,53 +0,0 @@ -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(svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+export {
+ Avatar,
+ AvatarImage,
+ AvatarFallback,
+ AvatarGroup,
+ AvatarGroupCount,
+ AvatarBadge,
+}
diff --git a/frontend/src/components/ui/bubble.tsx b/frontend/src/components/ui/bubble.tsx
new file mode 100644
index 0000000..792146e
--- /dev/null
+++ b/frontend/src/components/ui/bubble.tsx
@@ -0,0 +1,125 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function BubbleGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+const bubbleVariants = cva(
+ "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+ {
+ variants: {
+ variant: {
+ default:
+ "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+ secondary:
+ "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+ muted:
+ "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+ tinted:
+ "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+ outline:
+ "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+ ghost:
+ "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+ destructive:
+ "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function Bubble({
+ variant = "default",
+ align = "start",
+ className,
+ ...props
+}: React.ComponentProps<"div"> &
+ VariantProps & {
+ align?: "start" | "end"
+ }) {
+ return (
+
+ )
+}
+
+function BubbleContent({
+ asChild = false,
+ className,
+ ...props
+}: React.ComponentProps<"div"> & {
+ asChild?: boolean
+}) {
+ const Comp = asChild ? Slot.Root : "div"
+
+ return (
+ ) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+ )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+const emptyMediaVariants = cva(
+ "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default: "bg-transparent",
+ icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function EmptyMedia({
+ className,
+ variant = "default",
+ ...props
+}: React.ComponentProps<"div"> & VariantProps) {
+ return (
+
+ )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+ return (
+
a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Empty,
+ EmptyHeader,
+ EmptyTitle,
+ EmptyDescription,
+ EmptyContent,
+ EmptyMedia,
+}
diff --git a/frontend/src/components/ui/input-group.tsx b/frontend/src/components/ui/input-group.tsx
new file mode 100644
index 0000000..c67b8da
--- /dev/null
+++ b/frontend/src/components/ui/input-group.tsx
@@ -0,0 +1,70 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { cn } from "@/lib/utils"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+const inputGroupAddonVariants = cva(
+ "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>svg:not([class*='size-'])]:size-4",
+ {
+ variants: {
+ align: {
+ "inline-start": "order-first pl-2",
+ "inline-end": "order-last pr-2",
+ "block-start": "order-first w-full justify-start px-3 pt-2",
+ "block-end": "order-last w-full justify-start px-3 pb-2",
+ },
+ },
+ defaultVariants: { align: "inline-start" },
+ }
+)
+
+function InputGroupAddon({ className, align = "inline-start", ...props }: React.ComponentProps<"div"> & VariantProps) {
+ return (
+
{
+ if ((event.target as HTMLElement).closest("button")) return
+ ;(event.currentTarget.parentElement?.querySelector("input, textarea") as HTMLInputElement | HTMLTextAreaElement | null)?.focus()
+ }}
+ {...props}
+ />
+ )
+}
+
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "icon-sm", ...props }: React.ComponentProps) {
+ return
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+ return
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<"input">) {
+ return
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
+ return
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea }
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index f4b353c..69ff882 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
type={type}
data-slot="input"
className={cn(
- "h-8 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base outline-none transition-colors file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 md:text-sm",
+ "h-9 w-full min-w-0 rounded-lg border border-input bg-card/80 px-3 py-1 text-base shadow-sm shadow-foreground/[0.02] outline-none transition-all file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:bg-card focus-visible:ring-3 focus-visible:ring-ring/15 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 md:text-sm",
className
)}
{...props}
diff --git a/frontend/src/components/ui/marker.tsx b/frontend/src/components/ui/marker.tsx
new file mode 100644
index 0000000..cfa76c6
--- /dev/null
+++ b/frontend/src/components/ui/marker.tsx
@@ -0,0 +1,69 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const markerVariants = cva(
+ "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
+ {
+ variants: {
+ variant: {
+ default: "",
+ separator:
+ "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+ border: "border-b border-border pb-2",
+ },
+ },
+ }
+)
+
+function Marker({
+ className,
+ variant = "default",
+ asChild = false,
+ ...props
+}: React.ComponentProps<"div"> &
+ VariantProps & {
+ asChild?: boolean
+ }) {
+ const Comp = asChild ? Slot.Root : "div"
+
+ return (
+ ) {
+ return ) {
+ return ) {
+ return ) {
+ return ) {
+ return & Pick, "variant" | "size">) {
+ return (
+ ) {
}
const sidebarMenuButtonVariants = cva(
- "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-none transition-[width,height,padding] group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+ "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-none transition-[width,height,padding,gap,margin,background-color,color] [transition-duration:240ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!gap-0 group-data-[collapsible=icon]:!p-0 group-data-[collapsible=icon]:justify-center hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
{
variants: {
variant: {
@@ -478,7 +478,7 @@ const sidebarMenuButtonVariants = cva(
size: {
default: "h-8 text-sm",
sm: "h-7 text-xs",
- lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+ lg: "h-12 text-sm",
},
},
defaultVariants: {
diff --git a/frontend/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
index 18fbe8b..a414f0e 100644
--- a/frontend/src/components/ui/textarea.tsx
+++ b/frontend/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {