小程序业务 Blocks

这里不做展示墙，而是沉淀可直接复制的业务块：每个 block 都包含真实移动端需求、组件依赖、H5 写法和小程序写法。复制后可以先替换字段、接口和样式，再放入业务项目里继续封装。

REGISTRY BLOCKS

先看界面，再生成源码

每张卡片都来自真实小程序 Block：Headless 负责状态与交互，Base Kit 负责视觉。确认界面后，复制一条命令即可生成源码和递归依赖。

13 BLOCKS

搜索

显示 13 个 Block预览图为 Weapp 实际运行界面

WeappH5

login-form

登录表单

business

手机号、密码、记住状态、错误与加载反馈。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/login-form

查看代码与使用方法展开

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/login-form.vue

<script setup lang="ts">
import LoginForm from '@/components/blocks/login-form.vue'

function handleLogin(credentials: unknown) {
  console.log(credentials)
}
</script>

<template>
  <LoginForm @submit="handleLogin" />
</template>

WeappH5

profile-card

用户资料卡

business

头像、身份状态、统计信息与编辑动作。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/profile-card

查看代码与使用方法展开

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/profile-card.vue

<script setup lang="ts">
import ProfileCard from '@/components/blocks/profile-card.vue'

const user = { name: 'Varo User', status: 'Active' }
const stats = [{ label: 'Orders', value: 12 }]
function openEditor() {}
</script>

<template>
  <ProfileCard :user="user" :stats="stats" @edit="openEditor" />
</template>

WeappH5

profile-edit

资料编辑

business

姓名、手机号、城市搜索、简介与提交状态。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/profile-edit

查看代码与使用方法展开

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/profile-edit.vue

<script setup lang="ts">
import ProfileEdit from '@/components/blocks/profile-edit.vue'

const cities = [{ label: '杭州', value: 'hangzhou' }]
function saveProfile(profile: unknown) {
  console.log(profile)
}
</script>

<template>
  <ProfileEdit :cities="cities" @submit="saveProfile" />
</template>

WeappH5

product-list

商品列表

business

商品、库存、价格、空状态、选择与加购动作。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/product-list

查看代码与使用方法展开

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/product-list.vue

<script setup lang="ts">
import ProductList from '@/components/blocks/product-list.vue'

const products = []
function addToCart(payload: unknown) {
  console.log(payload)
}
</script>

<template>
  <ProductList :items="products" @add-to-cart="addToCart" />
</template>

WeappH5

order-filter

订单筛选

business

多状态选择、金额区间校验、重置与应用事件。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/order-filter

查看代码与使用方法展开

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/order-filter.vue

<script setup lang="ts">
import OrderFilter from '@/components/blocks/order-filter.vue'

function loadOrders(filters: unknown) {
  console.log(filters)
}
</script>

<template>
  <OrderFilter :result-count="128" @apply="loadOrders" />
</template>

WeappH5

agent-chat

Agent 对话

agent

增量 Markdown、工具状态、审批与输入组合。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/agent-chat

查看代码与使用方法展开

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/agent-chat.vue

<script setup lang="ts">
import AgentChat from '@/components/blocks/agent-chat.vue'

const messages = [{ id: 'welcome', role: 'assistant', content: '你好' }]
function runAgent(prompt: string) {
  console.log(prompt)
}
</script>

<template>
  <AgentChat :messages="messages" @submit="runAgent" />
</template>

Weapp

retail-home

零售首页

retail

搜索、分类、精选商品与购物车入口。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-home

查看代码与使用方法展开

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/retail-home.vue

<script setup lang="ts">
import RetailHome from '@/components/blocks/retail-home.vue'

const categories = []
const products = []
</script>

<template>
  <RetailHome :categories="categories" :products="products" />
</template>

Weapp

retail-category

零售分类

retail

双栏分类导航、商品网格与加购动作。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-category

查看代码与使用方法展开

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/retail-category.vue

<script setup lang="ts">
import { shallowRef } from 'wevu'
import RetailCategory from '@/components/blocks/retail-category.vue'

const activeId = shallowRef('women')
const categories = []
const products = []
</script>

<template>
  <RetailCategory v-model:active-id="activeId" :categories="categories" :products="products" />
</template>

Weapp

retail-cart

购物车

retail

商品选择、数量、合计、空状态与结算。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-cart

查看代码与使用方法展开

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/retail-cart.vue

<script setup lang="ts">
import RetailCart from '@/components/blocks/retail-cart.vue'

const cartItems = []
const total = 0
function checkout() {}
</script>

<template>
  <RetailCart :items="cartItems" :total="total" @checkout="checkout" />
</template>

Weapp

retail-product-detail

商品详情

retail

商品主图、价格、库存、数量、加购与购买。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-product-detail

查看代码与使用方法展开

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/retail-product-detail.vue

<script setup lang="ts">
import { shallowRef } from 'wevu'
import RetailProductDetail from '@/components/blocks/retail-product-detail.vue'

const quantity = shallowRef(1)
const product = {}
</script>

<template>
  <RetailProductDetail v-model:quantity="quantity" :product="product" />
</template>

Weapp

retail-checkout

结算确认

retail

地址、商品、优惠、发票、金额与提交订单。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-checkout

查看代码与使用方法展开

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/retail-checkout.vue

<script setup lang="ts">
import RetailCheckout from '@/components/blocks/retail-checkout.vue'

const address = {}
const items = []
const total = 0
function submitOrder() {}
</script>

<template>
  <RetailCheckout :address="address" :items="items" :total="total" @submit="submitOrder" />
</template>

Weapp

retail-order-list

订单列表

retail

订单状态、商品摘要与履约操作。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-order-list

查看代码与使用方法展开

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/retail-order-list.vue

<script setup lang="ts">
import RetailOrderList from '@/components/blocks/retail-order-list.vue'

const orders = []
function handleOrder(order: unknown) {
  console.log(order)
}
</script>

<template>
  <RetailOrderList :orders="orders" @action="handleOrder" />
</template>

Weapp

retail-profile

会员中心

retail

会员信息、订单、地址、优惠券与售后入口。

Weapppnpm dlx @varo-ui/cli add --target weapp blocks/retail-profile

查看代码与使用方法展开

一键生成在项目根目录执行，CLI 会递归写入 Block 与所需组件源码。

使用示例src/components/blocks/retail-profile.vue

<script setup lang="ts">
import RetailProfile from '@/components/blocks/retail-profile.vue'

const orderCounts = {}
</script>

<template>
  <RetailProfile name="Varo User" :points="2680" :order-counts="orderCounts" />
</template>

小程序构建链路

• weapp-vite 负责小程序产物构建、组件 JSON、复杂列表 key 与类型声明输出
• wevu 是 @varo-ui/weapp 的小程序运行时 peer；@varo-ui/headless 不绑定 Vue/Wevu
• weapp-tailwindcss 接入 weapp-vite 插件链，提供 class 转译能力；小程序按最新默认移除无效交互伪类，组件使用原生 hover-class 表达按压反馈
• 如果要继续做企业内部设计系统，优先从 @varo-ui/headless 向上封装，再把 blocks 作为业务模板沉淀

相关文档

• Button 文档
• Input 文档
• Dialog 文档
• 色彩系统
• 主题配置