ads

SwAdBanner · 横幅(多 item 自动接 SwCarousel 轮播)
广告
width 100% · ratio 随 item.ratio / prop(示意 8:3)
SwAdMrec(300×250 中矩形) & SwAdNative(原生信息流卡)
ratio 默认 300/250(IAB MREC)
封面 ratio 默认 16/9 · layout: banner-list / grid
SwAdText · 文字链(行尾 inline 角标不参与收缩)
今日爆款直播间整点抽奖,点击进入领取专属福利 广告 新用户注册立减 30 元,超长文案会被截断成省略号但角标仍然完整露出 广告
SwAdFloating · 侧边悬浮(实际 fixed 吸边,此处为容器内静态示意)
页面内容区
广告
--sw-ad-floating-width 默认 3.75rem(60px)· pos-left / pos-right · ratio 默认 1/1
SwAdLabel · 合规角标两形态
广告 广告 AD

结构样式(.slide / .card / .title / .desc / .foot / .item / .label 与 SwAdLabel 全部视觉)均自 SFC 源码提取为框架内置; 渐变色块为 SwImage 创意图占位、Floating 的容器内 absolute 均为静态示意。 整族还有:SwAdSplash(开屏)/ SwAdPopup(弹窗)/ SwAdPreroll(贴片)/ SwAdPause(暂停贴)/ SwAdMarquee(跑马灯)/ SwAdIcon(挂件),及私有基类 AdOverlay / AdPopupBase。 共同 props:items / slot-key / ratio / radius / show-ad-label(+ Banner/Mrec: autoplay、Native/Text: layout);全族内置 useAdTrack 曝光 / 点击埋点。

breadcrumb

默认分隔符
自定义分隔符 ›

headless:items 驱动,末项自动渲染为不可点当前页(aria-current)。 schema prop 默认开,同一份 items 输出 BreadcrumbList JSON-LD(视觉/结构化单源)。

button

语义类型(data-type)
状态

框架内置样式仅 loading spinner;type 只输出 data-type 属性, 彩色 variant 为按语义 token 的参考实现(applier 自挂,本卡即示范写法)。 props:type / nativeType / disabled / loading / icon / track(内置埋点)。

carousel

banner 轮播(dots 指示器 · 内置结构 + 参考箭头皮肤)
缩略图条指示器(indicator="thumbnails" · 内置)

内置:.viewport / .track / .slide transform 翻页结构(无缝 loop 克隆 + autoplay + 拖拽阈值翻页)、dots 指示器(默认白点 + 投影,激活变长条,全套 --sw-carousel-dot-* token)、缩略图条 indicator="thumbnails"(非激活压暗 / hover 调亮 / 激活白描边,--sw-carousel-thumb-* token)、indicatorPlacement 六摆位。参考实现(非框架内置):左右箭头(组件无内置箭头 —— 业务自渲染并调暴露方法 prev() / next() / goTo())与 banner 文案 / CTA(每张内容走 #default 作用域插槽;CTA 色示范 --brand-cta fallback --primary)。主要 props:items 必填 + #default slot;loop / autoplay / autoplayDelay / speed / pauseOnHover / dragThreshold / indicator(dots|thumbnails|none)/ thumbnails(SC-001:须与 items 等长同序)/ thumbnailTrigger / :track(逐张曝光埋点,opt-in)。

editor

SwEditor · 带工具栏(mention 高亮为内置 token 皮肤)

@产品经理 这个方案我看过了,#新版首页 的加载体验比预期好很多,建议下周灰度上线。

空态 placeholder(p.is-editor-empty 内置渲染机制)


评论发布框形态(参考实现:头像 + SwEditor + 发布按钮)

第三集的反转真没想到,编剧牛!

.sw-editor 骨架(surface / toolbar-row / emoji-panel / placeholder 机制 / mention 高亮)与 .sw-editor-toolbar 功能布局均为框架内置(Tiptap 封装,样式仅功能性必需 + token 皮肤 --sw-editor-*,视觉细节由项目覆盖); 评论发布框的头像与彩色「发布」按钮为参考实现。 props:modelValue / placeholder / editable / tools(mention | topic | emoji | image | video | submit)/ upload(注入图 / 视频上传函数)/ submitOnEnter; slots:toolbar(业务按钮,夹在工具与发送之间)/ emoji(默认内置 EmojiPicker);events:submit / upload / upload-error。

form-field

label + 必填星号 + hint

3-20 个字符

错误态(error 优先于 hint)

密码至少 8 位

框架内置样式仅纵向布局;label / hint / error / input 视觉为参考实现(applier 自挂)。 双模式:简单模式直接传 error;传 name 走 vee-validate(外层 useForm + schema,错误自动产出)。

gallery

封面网格(minItemWidth 自适应列数)+ 加载更多按钮(内置)
取数反馈态(内置:加载中 / 失败重试 / 已到底 / 空态)

定位说明:SwGallery 是「等高网格 + 加载更多」组件(追加式数据流); 「主图 + 缩略图条」形态属 SwCarousel 的 indicator="thumbnails"(见 carousel 卡)。 内置:CSS Grid 布局(默认 minItemWidth auto-fill 自适应列数;columns 可按 mobile/tablet/desktop 三档断点锁列)、加载更多按钮(传 total+pageSize 显示计数)、加载中 / 失败重试 / 已到底 / 空态四反馈(#load-more / #finished / #empty slot 可换)、 auto 模式触底哨兵。参考实现(非框架内置):海报卡视觉(封面 / 角标 / 片名)—— 走 #default 作用域插槽业务渲染,角标色 --brand-badge-free fallback --success。 主要 props:items 必填;minItemWidth / columns / loadMode(button|auto|none)/ loading / finished / total / pageSize / error / autoThreshold。 SG-001:失败重试须同传 :loading;SG-002:@load-more 必配 :finished 或 :total;页码翻页用 load-mode="none" + SwPagination 组合。

image

加载状态(内置三态:淡入 / 占位 / 错误)
已加载 .img.is-loaded(hover 放大)
loading 占位(演示覆盖底色为 --muted,默认 transparent)
error 态 .placeholder.is-error
海报卡角标(参考实现,非框架内置 · overlay slot 承载)
免费
8.9

山海之间

VIP 30
9.2

星河彼岸

限免
7.6

白夜微光

内置:占位 / 错误态(token --sw-image-placeholder-bg / --sw-image-placeholder-error-bg)、.img.is-loaded 淡入、overlay slot(.content 层)、 hover-zoom class(--sw-image-hover-zoom-scale);构建期 avif/webp srcset 与 .bnc 解密属运行时能力,静态卡不演示。参考实现(非框架内置):免费 / VIP 角标、金币价、评分星 —— applier 在 overlay slot 自渲染,色走 --brand-badge-free / --brand-badge-vip / --brand-coin / --brand-rating(fallback 语义 token)。 主要 props:src / alt 必填;ratio(防 CLS)/ fit / loading / fetchpriority / placeholder / radius / blur / preload / provider。

modal

删除确认

确定删除该条内容?此操作不可撤销。

默认皮肤 modal.css:毛玻璃遮罩 + 居中卡片,--modal-* 皮肤变量全部映射语义 token, 自动跟随明暗。props:open / title / description / confirmText / cancelText / closable / dismissible; #title #footer 插槽可完全自定义。命令式调用配 SwModalHost + useModal。

pagination

完整形态(页码窗口 + 总数 + 跳转)

props:page / total / pageSize / maxVisible / showJumper / showTotal / disabled。 移动端(<768px)纯 CSS 降级为「上一页 N/M 下一页」紧凑形态,无 JS 测宽,SSR 安全。

player

SwVideoPlayer · 播放中(弹幕开)— 整体静态示意
12:34 / 45:00 弹
5 秒后可关闭广告
付费墙形态(#paywall slot · overlay 定位为内置,面板为参考实现)
试看已结束
开通会员即可观看完整版

整卡为静态示意:SwVideoPlayer 底层是 Artplayer,控制条 / 音量 / 全屏 / 弹幕发送面板等皮肤来自 Artplayer 本体与 artplayer-plugin-danmuku。 框架内置的仅:.sw-player 黑底容器、贴片广告覆盖层(.preroll-ad + .timer 倒计时 /「进入」)、付费墙与暂停广告的 Teleport overlay 定位层(.sw-player-paywall / .sw-player-pause-ad)、弹幕主色 token(--sw-danmaku-theme-color,缺省回退 --primary)。 付费墙面板内容为 #paywall slot 的参考实现。slots:preroll-ad(countdown/skip) / loading / paywall(locked) / pause-ad(close)。

rail

楼层横滑(标题为参考实现,rail 为内置结构)

热播推荐

更多 ›

山海之间

星河彼岸

燃冬来信

白夜微光

长风渡口

深海回声

雪岭疾行

内置:横滚 viewport(原生 scroll + CSS scroll-snap,snap 三态默认 proximity)、卡片间距 token --sw-rail-gap(默认 0.75rem,#210 起基线不粘连, 可覆盖任意值含 0)、默认左右箭头(仅 hover 设备显示,移动端手指滑;本例左箭头为到头 .is-disabled 态 —— 与静止态外观对称、仅不可点;样式全走 --sw-rail-arrow-* token)、 键盘 ←/→/Home/End。参考实现(非框架内置):楼层标题行与海报卡 —— 内容走 #default slot 业务 渲染,卡片须自带确定宽度(SR-001);异步追加内容后需调 railRef.refresh()(SR-002)。 主要 props:snap / scrollBy('page' 或 px)/ arrows / ariaLabel;#controls 作用域插槽或 defineExpose 的 scrollPrev/scrollNext/canPrev/canNext 可完全自定义控件。

segmented

单选选项组(reka-ui RadioGroup 薄壳)
含禁用项 / 整组场景

框架内置完整基础视觉(active 主色填充)。props:v-model / options / disabled; #option 作用域插槽可完全自定义单项。键盘 ← → / Home / End 由 reka-ui 自带。

select

触发器(未选 / 已选 / 禁用)
下拉弹层(展开态静态示意,实际经 Portal 悬浮)
影视
短剧
电影(hover 高亮态)
剧集
其他
综艺
动漫(禁用)
searchable 多选(chips + 输入过滤,creatable 输入即建)
短剧 电影
纪录片
创建 "悬疑剧"

框架内置完整基础视觉(触发器 + 弹层 + 选中/高亮/禁用态 + chips)。 props:v-model / options(支持 group 归组)/ multiple / placeholder / clearable / disabled / searchable(输入过滤)/ creatable(输入即建,emit create)。multiple + searchable + creatable 即 tag-input 形态。

table

管理台数据表(受控排序 + 行选批量 + 斑马纹)
名称 分类 集数 更新时间
晨曦之森动画82026-07-16
深海物语(选中行)电影12026-07-12
未来都市动画122026-07-15
星际驿站剧集242026-07-10

框架内置完整基础视觉(wrapper 边框圆角 / 表头弱化底 / 行分隔 / hover 微亮)。 排序为受控三态(v-model:sort,组件只发事件、数据排序归业务);行选 v-model:selected(全选含 indeterminate); 另有 loading 遮罩(保结构防闪白)/ stickyHeader 粘性表头(配 --sw-table-max-height)/ size=compact 紧凑密度 / #cell-<key> 单元格插槽 / #empty 空态。props:columns / items / rowKey / striped / size / stickyHeader / loading / selectable / v-model:sort / v-model:selected / @row-click。

toast

胶囊形态(无 title,icon 四态)
保存成功
网络异常,请重试
表单有未保存修改
已切换到深色模式
带 title 形态(圆角矩形 + 右上角 ✕)
注意 当前处于离线状态,改动将在恢复连接后同步。

默认皮肤 toast.css:顶部居中浮层、color-mix 半透明毛玻璃背景,--toast-* 映射语义 token。 调用:useToast().success('...'),app.vue 挂载一次 <SwToast />;每条默认 3000ms 自动消失。

upload

SwUploadImage · 图片九宫格(参考实现:已传 / 上传中 / 失败 / 添加)
68%
失败·重试
添加图片
SwUploadVideo · 分片上传 + 转码轮询(参考实现:拖拽区 · 进度来自 slot 的 progress)
正在上传《宣传片-final.mp4》
62%(分片 2MB × 并发,成功后轮询转码 m3u8)
SwUploadFile · 文件列表形态(参考实现:成功 / 上传中 / 失败)
产品需求说明书-v3.pdf 2.4 MB
素材打包.zip 45%
会议录音-0708.wav 上传失败 重试

三组件均为无样式(headless):框架内置的只有逻辑(useFileDialog 点击选文件 + useDropZone 拖拽、视频分片上传 + 转码轮询、文件分片直传)与根容器类名 .sw-upload-image / .sw-upload-video / .sw-upload-file; 本卡全部视觉为默认作用域插槽的参考实现(slot 参数 { isOver, pending, progress, open })。 props:uploadFn(必填)/ accept / multiple;视频另有 queryFn(必填)/ chunkSize(默认 2MB)/ retryNum / pollVideo;文件另有 threadNum。events:success / error /(视频、文件)progress。