AFSHomeShowcase

39 原语

AUP 定义了跨平台语义原语。每个原语声明渲染什么——运行时决定如何渲染。智能体将这些构建模块组合成任意 UI。

布局

用于组织 UI 元素的容器和结构原语。

Universal container. Supports column, row, grid, stack, overlay-grid layouts. Tabs, collapsible panels, backgrounds, stagger animations.

Modal dialogs, toast notifications, bottom sheets, popovers, command palettes, and confirm prompts.

deck

Slide deck / carousel. Supports auto-play, loop, and navigation controls.

frame

Iframe container for full-page isolation. Bridge API for postMessage communication with the parent surface.

ticker

Scrolling ticker / marquee for live data feeds.

内容

用于展示文本、媒体、数据可视化和丰富内容的原语。

Text display with heading levels (1-6), scale (xs-2xl), intent (info/success/warning/error), markdown rendering, count-up animation.

Images, video, and audio with responsive sizing and format support.

Data visualization: bar, line, pie, doughnut, area, radar. Static data or live AFS binding via src.

Data table with columns, sorting, row selection, pagination. Supports live data via src.

Rich text / code editor with syntax highlighting and markdown support.

calendar查看详情

Date picker and calendar view with event display.

Time display with formatting options, relative time, and countdown.

moonphase

Lunar phase visualization based on date.

natal-chart

Astrological natal chart visualization.

globe

3D globe visualization with markers and data overlays.

Interactive map with markers, routes, and geolocation.

输入

用于收集用户数据的表单控件和交互式输入。

All input types: text, password, textarea, number, email, url, date, time, select, toggle, slider, checkbox, radio, file, color. State-bound.

Buttons and clickable triggers. Variants: primary, secondary, destructive, ghost. Supports icon, loading, disabled states.

command-bar

Command palette / search bar with fuzzy matching and keyboard navigation.

数据

用于浏览和展示 AFS 路径数据的原语。

list

AFS data list with layout (list/grid/masonry/slideshow/table) x itemStyle (row/card/compact/media/hero) matrix. Filter, sort, paginate.

list-nav

Navigation list with breadcrumb, back button, and hierarchical path browsing.

Elevated container connecting to AFS paths or remote AUP servers. WebSocket auto-reconnect, multi-view discovery.

finance-chart

Specialized financial chart with candlestick, OHLC, and volume data.

视觉

丰富的视觉和交互式显示原语。

hero-widget

Large hero section with background image/video, title, subtitle, and call-to-action.

webgl-hero

WebGL-powered animated hero background with particle effects.

photo-story

Photo story / gallery with captions and scroll-linked transitions.

scroll-explainer

Scroll-linked animation sections for storytelling.

text-image-expand

Expandable text+image card with smooth reveal animation.

text-highlight

Text with highlighted segments and annotation overlays.

HTML5 Canvas for custom drawing, games, and interactive graphics.

progress-bar-3d

3D progress bar with WebGL rendering.

通信

实时通信和终端交互原语。

broadcast

Live broadcast overlay with TV-style graphics package (roles + overlay themes).

terminal

Terminal emulator with command input and output display.

block-revealer

Block reveal animation for content entrance effects.

type-block

Typewriter-style text animation.

系统

系统级和工具类原语。

placeholder

Placeholder for content that will be loaded later. Shows skeleton/shimmer state.

unknown

Fallback renderer for unrecognized primitive types.

format-cell

Formatted data cell for tables — handles numbers, dates, currencies, percentages.

xeyes

Classic xeyes widget — follows mouse cursor.