夜雨聆风大家好，我是【考拉搞AI】，一个专注于 VibeCoding 分享 & AI 工程化 的博主。
具体业务场景的卡片页、详情页、输入框等 规范文档组件 都相继推出，当然具体业务场景的卡片页会持续迭代，会更加精细更加贴合具体业务场景。
接下来自然是表单系统 form了，严格来说 base-input 也属于form的一部分，但是 输入框 很多时候都是独立使用 比如搜索、消息输入等，所以独立出来。
而form中，下拉 select又极其常见，在移动端下拉不能使用原生select组件，一是无法兼容二是太丑，当然最最最重要是咱们的设计初衷：非必要时候，禁止使用任何原生组件，以及任何需要设计内容的组件都必须使用base-card容器。
不知不自觉已经有一堆初衷了~所有初衷的都围绕AI 工程化的这同一个主题来。
于是今天的主题 便是单选radio~~~~~~~~~~~
select下拉 会后续推出:13 种单选形态独立成 HTML + MD，按形态检索复用
开关功能整合，不再需要单独的 switch 组件
图片选择，头像、商品规格一网打尽
每个场景独立成案例，参数化配置
组合技……就不多说了。
还是那句老话，与直接让 AI 手搓相比，用技能来写这些组件有这些优势：
1、 风格统一：便于统一调整，避免 AI 放飞自我2、 节省Token：省去 AI 自我思考时间3、 技能矩阵：结合多个相关技能，效果显著【主题系统提供统一主题、样式系统提供样式对齐、图片&icon系统能自动抓取或生产图片icon】
容器原则：所有涉及内容容器的组件，都必须使用 base-card 作为容器
开讲。
一、单选场景
移动APP 的单选场景那可是非常的多：
┌─────────────────────────────────────┐
│ 设置页 │
│ ┌─────────────────────────────────┐│
│ │ 接收推送通知 [开关] ││ ← 开关
│ ├─────────────────────────────────┤│
│ │ 深色模式 [开关] ││
│ ├─────────────────────────────────┤│
│ │ WiFi自动下载 [开关] ││
│ └─────────────────────────────────┘│
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ 商品规格选择 │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │ S │ │ M │ │ L │ ← 标签单选│
│ └────┘ └────┘ └────┘ │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │红色│ │蓝色│ │黑色│ ← 颜色选择│
│ └────┘ └────┘ └────┘ │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ 头像选择 │
│ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │
│ │ A │ │ B │ │ C │ │ D │ ← 图片选择│
│ └───┘ └───┘ └───┘ └───┘ │
└─────────────────────────────────────┘
90% 的选择场景都是这 13 种形态的排列组合！
于是我们把所有单选/开关场景整合成一个组件——base-radio。
二、本次迭代——13 种单选形态
1. 圆圈单选 —— circle
特点：最经典的单选样式，小圆圈 + 文字
┌─────────────────────────────────────┐
│ (●) 已选中选项 │
│ ( ) 未选中选项 │
└─────────────────────────────────────┘
适用场景：基础单选、列表选择、性别选择
特殊参数：position: left | right（圆圈在左侧或右侧）
2. 打钩单选 —— check
特点：方形打钩，带描述文字
┌─────────────────────────────────────┐
│ ☑ 标准配送 │
│ 3-5天送达 │
├─────────────────────────────────────┤
│ ☐ 加急配送 │
│ 当天送达 │
└─────────────────────────────────────┘
适用场景：配送方式、服务条款、协议确认
3. 标签单选 —— tag
特点：横向排列的标签，点击切换
┌─────────────────────────────────────┐
│ [综合] [销量] [价格] [新品] │
└─────────────────────────────────────┘
适用场景：商品排序、筛选条件、状态切换
特殊参数：tagShape: pill | rounded | square
4. 卡片单选 —— card
特点：大卡片，带价格/描述
┌─────────────────────────────────────┐
│ ┌───────────────────────────────┐ │
│ │ 月卡 ¥30 │ │
│ └───────────────────────────────┘ │
│ ┌───────────────────────────────┐ │
│ │ 年卡 ¥300 │ │
│ └───────────────────────────────┘ │
└─────────────────────────────────────┘
适用场景：会员套餐、流量包、会员等级
特殊参数：showPrice: true 显示价格
5. 按钮组单选 —— button
特点：横向按钮组，等分宽度
┌─────────────────────────────────────┐
│ [支付宝] [微信] [银行卡] │
└─────────────────────────────────────┘
适用场景：支付方式、收货方式、发票类型
6. 列表单选 —— list
特点：左侧标签，右侧单选
┌─────────────────────────────────────┐
│ 性别 │
│ ┌─────────────────────────────────┐│
│ │ 男 (●)││
│ ├─────────────────────────────────┤│
│ │ 女 ( )││
│ └─────────────────────────────────┘│
└─────────────────────────────────────┘
适用场景：设置项、个人资料、表单项
特殊参数：showArrow: true 显示箭头
7. 芯片风格 —— chips
特点：圆润胶囊，更柔和的标签
┌─────────────────────────────────────┐
│ ┌───────┐ ┌───────┐ ┌───────┐ │
│ │前端开发│ │后端开发│ │移动端 │ │
│ └───────┘ └───────┘ └───────┘ │
└─────────────────────────────────────┘
适用场景：技能标签、兴趣选择、多条件筛选
特殊参数：variant: filter | single
8. 图片选项 —— image
特点：图片/头像选择
┌─────────────────────────────────────┐
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐│
│ │ │ │ │ │ │ │ ││
│ │ A │ │ B │ │ C │ │ D ││
│ │ │ │ │ │ │ │ ││
│ └─────┘ └─────┘ └─────┘ └─────┘│
└─────────────────────────────────────┘
适用场景：头像选择、商品规格图片
特殊参数：mode: avatar | image
9. 标准胶囊开关 —— switch (standard)
特点：标准胶囊开关
┌─────────────────────────────────────┐
│ 接收推送通知 │
│ 开启后接收最新消息推送 [━━●] │
└─────────────────────────────────────┘
适用场景：通知开关、模式切换、功能开关
10. 方形开关 —— switch (square)
特点：方正简洁风格
┌─────────────────────────────────────┐
│ 深色模式 │
│ 切换应用外观 [■●] │
└─────────────────────────────────────┘
11. 图标开关 —— switch (icon)
特点：带图标的开关
┌─────────────────────────────────────┐
│ 🔔 通知 [━━●] │
│ 🌓 深色模式 [━━○] │
└─────────────────────────────────────┘
12. 卡片开关 —— switch (card)
特点：大卡片样式，带状态文字
┌─────────────────────────────────────┐
│ ┌───────────────────────────────┐ │
│ │ WiFi自动下载 ✓ 已开启 │ │
│ └───────────────────────────────┘ │
└─────────────────────────────────────┘
13. iOS风格开关 —— switch (ios)
特点：苹果风格滑动开关
┌─────────────────────────────────────┐
│ 通知 [━━●] │
└─────────────────────────────────────┘
三、核心参数
interface Props {
modelValue?: any// 选中值
options?: Option[] // 选项列表
type?: 'circle' | 'check' | 'tag' | 'card' | 'button' | 'list' | 'chips' | 'image'
// 特殊参数
position?: 'left' | 'right'// 圆圈位置（circle）
tagShape?: 'pill' | 'rounded' | 'square'// 标签形状（tag）
showPrice?: boolean// 显示价格（card）
showArrow?: boolean// 显示箭头（list）
mode?: 'avatar' | 'image'// 图片模式（image）
variant?: 'filter' | 'single'// 芯片变体（chips）
// 开关参数
size?: 'normal' | 'large' | 'small'
shape?: 'normal' | 'square'
color?: string
// 通用
showIcon?: boolean
disabled?: boolean
label?: string
desc?: string
}
interface Option {
label: string// 显示文字
value: any// 选中值
disabled?: boolean// 是否禁用
desc?: string// 描述文字
image?: string// 图片地址（image 类型）
color?: string// 颜色值（color 类型）
}
四、触发词一览
# 基础单选
/uniapp-base-skill 做一个单选
/uniapp-base-skill 做一个圆圈单选
/uniapp-base-skill 做一个打钩单选
# 筛选/标签
/uniapp-base-skill 做一个标签单选
/uniapp-base-skill 做一个芯片单选
# 卡片/按钮
/uniapp-base-skill 做一个卡片单选
/uniapp-base-skill 做一个按钮组单选
/uniapp-base-skill 做一个列表单选
# 特殊形态
/uniapp-base-skill 做一个图片选项单选
# 开关形态
/uniapp-base-skill 做一个开关
/uniapp-base-skill 做一个胶囊开关
/uniapp-base-skill 做一个方正开关
/uniapp-base-skill 做一个图标开关
/uniapp-base-skill 做一个卡片开关
/uniapp-base-skill 做一个iOS风格开关部分图，小伙伴们可以进入git查看更多图：
五、basec-card容器
容器原则：所有涉及内容容器的组件，都必须使用 base-card 作为容器
<!-- 列表式单选：设置页场景 -->
<base-card radius="var(--radius-md)" padding="0">
<base-radio
v-model="gender"
type="list"
showArrow
:options="[
{ label: '男', value: 'male' },
{ label: '女', value: 'female' }
]"
/>
</base-card>
<!-- 卡片式单选：套餐选择场景 -->
<base-card radius="var(--radius-lg)" padding="var(--space-4)">
<base-radio
v-model="package"
type="card"
showPrice
:options="[
{ label: '月卡', value: 'month', desc: '适合日常使用' },
{ label: '年卡', value: 'year', desc: '立省60元' }
]"
/>
</base-card>
<!-- 开关：设置页场景 -->
<base-card radius="var(--radius-md)" padding="var(--space-3)">
<base-radio
v-model="notifications"
:options="[
{ label: '接收推送通知', value: true, desc: '开启后接收最新消息推送' }
]"
size="normal"
/>
</base-card>
<!-- 按钮组单选：支付方式 -->
<base-card radius="var(--radius-md)" padding="var(--space-4)">
<view style="font-size:14px;color:#666;margin-bottom:12px;">支付方式</view>
<base-radio
v-model="payment"
type="button"
:options="[
{ label: '微信', value: 'wechat' },
{ label: '支付宝', value: 'alipay' },
{ label: '银行卡', value: 'card' }
]"
/>
</base-card>
<!-- 图片选择：头像场景 -->
<base-card radius="var(--radius-lg)" padding="var(--space-4)">
<view style="font-size:14px;color:#666;margin-bottom:12px;">选择头像</view>
<base-radio
v-model="avatar"
type="image"
mode="avatar"
:options="[
{ label: '头像1', value: '1', image: '/images/avatar1.jpg' },
{ label: '头像2', value: '2', image: '/images/avatar2.jpg' },
{ label: '头像3', value: '3', image: '/images/avatar3.jpg' },
{ label: '头像4', value: '4', image: '/images/avatar4.jpg' }
]"
/>
</base-card>
六、本期更新总结
13 种单选形态：圆圈、打钩、标签、卡片、按钮组、列表、芯片、图片 + 5种开关 开关功能整合：所有开关样式通过 size 参数切换 每个场景独立成 HTML，按形态检索复用 参数化配置，修改样式一行搞定
容器原则：所有涉及内容容器的组件，都必须使用 base-card 作为容器
喜欢的童鞋一定要多多点赞收藏！
另外本期将此技能还进行了重新调整变动，重新声明了三个子类技能：
uniapp-card-skill: 具体业务场景的卡片组件，会持续迭代，直接可作为模块使用uniapp-form-skill：表单场景，主要是包括 单选、多选、文本输入等uniapp-page-skill：具体的业务场景，可包含卡片或表单也可包含任何slot内容，属于超集合，比如商品详情、支付详情等等
后期将会围绕着这3个方向，持续持久的迭代、并且还会针对具体的技能进行调整，同时相互之间的引用关系也会进行调整优化，童鞋们可持续关注！
仍然是那句老话：技能的本身不重要，技能的思想才重要，小伙伴在VibeCoding自己的项目时候，一定要懂得提炼，懂得总结！
比如 你在做一个射击小游戏，那么你需要学会：找声效图文素材、搭建游戏体系如积分、打怪、成长、搭建表单逻辑记录个人信息等，这一整套流程 都可以提炼出来~ 如果做 一套管理系统，那么你需要学会：搭建鉴权体系、搭建组织架构、搭建整套表单UI体系等等 如果做 一套商城系统，那么你需要学会：搭建商品体系、搭建订单体系、搭建个人体系、搭建支付体系等等 ……
任何古法项目的内容在AI 时代都会被熔炼、提炼成一个个具体的体系或模块。
点赞+关注，有任何问题，或者想要学习 工程化VibeCoding 的童鞋们 可以私信发送VibeCoding，开启个性化开发~~~~~~~~~~~~~
一天一个SKILL——uniapp+移动端APP卡片升级：8种不同场景卡片布局 + 固定底部悬浮按钮，功能网格支持4种风格切换，Token光速下降！
Spring Boot脚手架：接口契约、架构规范、JWT/SSE/上传、重启脚本生产级 Java 后端，frontend-request-skill 联动，Token 直线下降！