结构样式(.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 曝光 / 点击埋点。
headless:items 驱动,末项自动渲染为不可点当前页(aria-current)。 schema prop 默认开,同一份 items 输出 BreadcrumbList JSON-LD(视觉/结构化单源)。
框架内置样式仅 loading spinner;type 只输出 data-type 属性,
彩色 variant 为按语义 token 的参考实现(applier 自挂,本卡即示范写法)。
props:type / nativeType / disabled / loading / icon / track(内置埋点)。
内置:.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)。
@产品经理 这个方案我看过了,#新版首页 的加载体验比预期好很多,建议下周灰度上线。
.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。
3-20 个字符
密码至少 8 位
框架内置样式仅纵向布局;label / hint / error / input 视觉为参考实现(applier 自挂)。 双模式:简单模式直接传 error;传 name 走 vee-validate(外层 useForm + schema,错误自动产出)。
山海之间
星河彼岸
燃冬来信
白夜微光
长风渡口
深海回声
雪岭疾行
城市之光
定位说明: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 组合。
.img.is-loaded(hover 放大).placeholder.is-error山海之间
星河彼岸
白夜微光
内置:占位 / 错误态(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.css:毛玻璃遮罩 + 居中卡片,--modal-* 皮肤变量全部映射语义 token, 自动跟随明暗。props:open / title / description / confirmText / cancelText / closable / dismissible; #title #footer 插槽可完全自定义。命令式调用配 SwModalHost + useModal。
props:page / total / pageSize / maxVisible / showJumper / showTotal / disabled。 移动端(<768px)纯 CSS 降级为「上一页 N/M 下一页」紧凑形态,无 JS 测宽,SSR 安全。
整卡为静态示意: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)。
内置:横滚 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
可完全自定义控件。
框架内置完整基础视觉(active 主色填充)。props:v-model / options / disabled; #option 作用域插槽可完全自定义单项。键盘 ← → / Home / End 由 reka-ui 自带。
框架内置完整基础视觉(触发器 + 弹层 + 选中/高亮/禁用态 + chips)。 props:v-model / options(支持 group 归组)/ multiple / placeholder / clearable / disabled / searchable(输入过滤)/ creatable(输入即建,emit create)。multiple + searchable + creatable 即 tag-input 形态。
| 名称 | 分类 | 集数 | 更新时间 | |
|---|---|---|---|---|
| 晨曦之森 | 动画 | 8 | 2026-07-16 | |
| 深海物语(选中行) | 电影 | 1 | 2026-07-12 | |
| 未来都市 | 动画 | 12 | 2026-07-15 | |
| 星际驿站 | 剧集 | 24 | 2026-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.css:顶部居中浮层、color-mix 半透明毛玻璃背景,--toast-* 映射语义 token。 调用:useToast().success('...'),app.vue 挂载一次 <SwToast />;每条默认 3000ms 自动消失。
三组件均为无样式(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。
第三集的反转真没想到,编剧牛!