@zfqh/uniapp 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.2](http://10.10.10.16/caoben/front-end/compare/@zfqh/uniapp@0.1.1...@zfqh/uniapp@0.1.2) (2026-06-01)
+
+**Note:** Version bump only for package @zfqh/uniapp
+
+
+
+
+
 ## 0.1.1 (2026-05-31)
 
 **Note:** Version bump only for package @zfqh/uniapp

package/docs/components/styles/base-styles.md

@@ -1,367 +1,239 @@
-# 工具样式类
-
-`@zfqh/uniapp` 内置一套静态 SCSS 工具类系统，命名风格与 UnoCSS / Tailwind CSS 一致。类名覆盖 Flex 布局、间距、尺寸、文字、背景、边框、定位、透明度、阴影和动画，支持 `px` 和 `rpx` 两种单位。
-
-## 引入方式
-
-在项目全局样式中导入一次即可激活全部工具类。放在 `App.vue` 的 `<style>` 块：
-
-```scss
-@import '@zfqh/uniapp/lib/styles/index.scss';
-```
-
-## 平台差异
-
-`index.scss` 内部使用 uni-app 条件编译区分平台：
-
-| 分类 | 全平台 | 仅非 nvue（H5、App-Vue、小程序） |
-| --- | --- | --- |
-| Flex 布局 | — | `.flex`、`.flex-row/col`、`.items-*`、`.justify-*` 等 |
-| 定位 | `.overflow-hidden`、`.top-*`、`.z-*` | `.relative`、`.absolute`、`.fixed`、`.sticky`、`.sticky-top` |
-| 尺寸 | `.w-{size}px/rpx`、`.h-{size}px/rpx` | `.w-full`、`.h-full`、`.w-{vw}`、`.h-{vh}` |
-| 文字 | `.text-{size}px/rpx`、`.text-{color}` | `.truncate`、`.line-clamp-*`、`.text-{8px..11px}`（zoom 缩小） |
-| 背景 | `.bg-{color}` | `.backdrop-blur-*` |
-| 动画 | `.origin-*` | `.transition-all-300` |
-
-nvue 平台提供独立的 flex、layout、text 子集，类名相同但实现适配 Weex。
-
-## Flex 布局
-
-::: warning 仅非 nvue 平台
-以下类在 H5、App-Vue 和小程序端可用，nvue 端有独立 flex 实现。
-:::
-
-`.flex` 默认设置为 `display: flex; flex-direction: row; align-items: center`。
-
-| 类名 | 效果 |
-| --- | --- |
-| `.flex` | flex 行布局，垂直居中 |
-| `.flex-inline` | inline-flex 行布局，垂直居中 |
-| `.flex-row` / `.flex-row-reverse` | 行方向 |
-| `.flex-col` / `.flex-col-reverse` | 列方向 |
-| `.flex-wrap` / `.flex-nowrap` / `.flex-wrap-reverse` | 换行控制 |
-| `.flex-0` ~ `.flex-5` | `flex: 0` ~ `flex: 5` |
-| `.flex-none` | `flex: 0` |
-| `.items-start` / `.items-center` / `.items-end` / `.items-stretch` / `.items-baseline` | align-items |
-| `.justify-start` / `.justify-center` / `.justify-end` / `.justify-between` / `.justify-around` | justify-content |
-
-## 间距（Margin / Padding）
-
-所有平台可用。支持 `px` 和 `rpx` 两种单位。
-
-### 取值范围
-
-| 特殊值 | 循环值 |
-| --- | --- |
-| `0`、`px`（1px） | 2px ~ 160px（步长 2），2rpx ~ 160rpx（步长 2） |
-
-### 命名规则
-
-```text
-.{m|p}{方向}-{值}{单位}
-```
-
-方向缩写：
-
-| 缩写 | 含义 |
-| --- | --- |
-| （无） | 四边 |
-| `x` | 左右 |
-| `y` | 上下 |
-| `t` | 上 |
-| `r` | 右 |
-| `b` | 下 |
-| `l` | 左 |
-
-示例：
-
-```text
-.m-16px      → margin: 16px
-.px-24rpx    → padding-left: 24rpx; padding-right: 24rpx
-.mt-8px      → margin-top: 8px
-.py-0        → padding-top: 0; padding-bottom: 0
-```
-
-### 负 Margin
-
-仅 margin 支持负值，在值前加 `-` 前缀：
-
-```text
-.-m-16px     → margin: -16px
-.-mx-8rpx    → margin-left: -8rpx; margin-right: -8rpx
-.-mt-4px     → margin-top: -4px
-```
-
-## 尺寸（Width / Height）
-
-### 全平台
-
-| 类名 | 说明 |
-| --- | --- |
-| `.w-0` / `.h-0` | 0 宽高 |
-| `.w-{2~160}px` / `.h-{2~160}px` | px 单位，步长 2 |
-| `.w-{2~160}rpx` / `.h-{2~160}rpx` | rpx 单位，步长 2 |
-
-### 仅非 nvue
-
-| 类名 | 说明 |
-| --- | --- |
-| `.w-full` / `.h-full` | `100%` |
-| `.w-{10~100}vw` / `.h-{10~100}vh` | 视口单位，步长 10 |
-| `.box-border` / `.box-content` | box-sizing |
-
-## 文字排版
-
-### 字号
-
-| 范围 | 单位 | 说明 |
-| --- | --- | --- |
-| `.text-{12~100}px` | px | 全平台，步长 2 |
-| `.text-{12~100}rpx` | rpx | 全平台，步长 2 |
-| `.text-{8px\|9px\|10px\|11px}` | px（zoom 缩放） | 仅非 nvue，用于小字号 |
-| `.text-{16rpx\|18rpx\|20rpx\|22rpx}` | rpx（zoom 缩放） | 仅非 nvue |
-
-### 语义色
-
-`.text-{color}` 系列，颜色值跟随主题配置：
-
-| 色组 | 可用类名 |
-| --- | --- |
-| primary | `.text-primary`、`.text-primary-dark`、`.text-primary-light`、`.text-primary-disabled` |
-| warning | `.text-warning`、`.text-warning-dark`、`.text-warning-light`、`.text-warning-disabled` |
-| success | `.text-success`、`.text-success-dark`、`.text-success-light`、`.text-success-disabled` |
-| error | `.text-error`、`.text-error-dark`、`.text-error-light`、`.text-error-disabled` |
-| info | `.text-info`、`.text-info-dark`、`.text-info-light`、`.text-info-disabled` |
-| UI 色 | `.text-main`、`.text-content`、`.text-tips`、`.text-light`、`.text-border`、`.text-disabled` |
-| 基础色 | `.text-white`、`.text-black`、`.text-transparent` |
-
-### 对齐与装饰
-
-| 类名 | 效果 |
-| --- | --- |
-| `.text-left` / `.text-center` / `.text-right` | text-align |
-| `.text-ellipsis` / `.text-clip` | text-overflow |
-| `.underline` / `.line-through` / `.no-underline` | text-decoration |
-
-### 字重与行高
-
-`.font-{name}` 和 `.font-{weight}`：
-
-| 类名 | 值 |
-| --- | --- |
-| `.font-sans` | `system-ui, sans-serif` |
-| `.font-thin` ~ `.font-black` | 100 ~ 900 |
-| `.font-100` ~ `.font-900` | 数字字重 |
-| `.italic` / `.not-italic` | font-style |
-| `.leading-none` / `.leading-tight` / `.leading-snug` / `.leading-normal` / `.leading-relaxed` / `.leading-loose` | 1 / 1.25 / 1.375 / 1.5 / 1.625 / 2 |
-
-### 文本截断（仅非 nvue）
-
-| 类名 | 效果 |
-| --- | --- |
-| `.truncate` | 单行截断（overflow ellipsis + nowrap） |
-| `.line-clamp-1` ~ `.line-clamp-5` | 多行截断（-webkit-line-clamp） |
-
-### 换行与空白（仅非 nvue）
-
-| 类名 | 效果 |
-| --- | --- |
-| `.break-normal` / `.break-all` / `.break-word` / `.break-keep` | word-break |
-| `.whitespace-normal` / `.whitespace-nowrap` / `.whitespace-pre` / `.whitespace-pre-line` / `.whitespace-pre-wrap` | white-space |
-| `.align-baseline` / `.align-top` / `.align-middle` / `.align-bottom` | vertical-align |
-
-## 背景色
-
-`.bg-{color}` 系列，颜色值跟随主题配置：
-
-| 类名 | 效果 |
-| --- | --- |
-| `.bg-transparent` / `.bg-white` / `.bg-black` | 基础背景色 |
-| `.bg-primary`、`.bg-primary-dark`、`.bg-primary-light`、`.bg-primary-disabled` | primary 系列 |
-| `.bg-warning`、`.bg-warning-dark`、`.bg-warning-light`、`.bg-warning-disabled` | warning 系列 |
-| `.bg-success`、`.bg-success-dark`、`.bg-success-light`、`.bg-success-disabled` | success 系列 |
-| `.bg-error`、`.bg-error-dark`、`.bg-error-light`、`.bg-error-disabled` | error 系列 |
-| `.bg-info`、`.bg-info-dark`、`.bg-info-light`、`.bg-info-disabled` | info 系列 |
-| `.bg-main`、`.bg-content`、`.bg-tips`、`.bg-light`、`.bg-border` | UI 语义色 |
-| `.bg` | 页面背景色 |
-| `.bg-disabled` | 禁用态背景 |
-
-### 背景模糊（仅非 nvue）
-
-| 类名 | 效果 |
-| --- | --- |
-| `.backdrop-blur-0` | `blur(0)` |
-| `.backdrop-blur-{10\|20\|30}px` | px 单位模糊 |
-| `.backdrop-blur-{10\|20\|30}rpx` | rpx 单位模糊 |
-
-## 边框
-
-### 基础边框
-
-| 类名 | 效果 |
-| --- | --- |
-| `.border` | 1px solid 边框色 |
-| `.border-half` | 0.5px solid 边框色 |
-| `.border-0` | 无边框 |
-| `.border-t` / `.border-r` / `.border-b` / `.border-l` | 单边 1px solid |
-| `.border-x` / `.border-y` | 双轴 1px solid |
-| `.border-t-0` / `.border-r-0` / `.border-b-0` / `.border-l-0` | 移除单边边框 |
-
-### 边框宽度
-
-| 范围 | 说明 |
-| --- | --- |
-| `.border-width-{2\|4\|6\|8}px/rpx` | 四边宽度 |
-| `.border-t-width-{size}`、`.border-r-width-{size}`、`.border-b-width-{size}`、`.border-l-width-{size}` | 单边宽度 |
-| `.border-x-width-{size}`、`.border-y-width-{size}` | 双轴宽度 |
-
-### 边框颜色
-
-`.border-{color}`：`primary`、`warning`、`success`、`error`、`info`、`main`、`light`、`content`、`transparent`
-
-### 边框样式
-
-`.border-solid`、`.border-dashed`、`.border-dotted`
-
-### 圆角
-
-| 范围 | 说明 |
-| --- | --- |
-| `.rounded-0` | 无圆角 |
-| `.rounded-full` | `9999px`（圆形） |
-| `.rounded-{2~100}px/rpx` | 四角圆角，步长 2 |
-| `.rounded-t-{size}`、`.rounded-b-{size}`、`.rounded-l-{size}`、`.rounded-r-{size}` | 两边圆角 |
-| `.rounded-tl-{size}`、`.rounded-tr-{size}`、`.rounded-bl-{size}`、`.rounded-br-{size}` | 单角圆角 |
-
-## 布局与定位
-
-### 全平台
-
-| 类名 | 效果 |
-| --- | --- |
-| `.overflow-hidden` | overflow: hidden |
-| `.inset-0` | top/right/bottom/left 全为 0 |
-| `.inset-x-0` / `.inset-y-0` | 双轴归零 |
-| `.top-{0~100}px/rpx` | top 定位，步长 2 |
-| `.right-{0~100}px/rpx` | right 定位 |
-| `.bottom-{0~100}px/rpx` | bottom 定位 |
-| `.left-{0~100}px/rpx` | left 定位 |
-| `.-top-{2~100}px/rpx` 等 | 负值定位 |
-| `.z-0` ~ `.z-10` | z-index |
-
-### 仅非 nvue
-
-| 类名 | 效果 |
-| --- | --- |
-| `.relative` | position: relative |
-| `.absolute` | position: absolute |
-| `.fixed` | position: fixed |
-| `.sticky` | position: sticky |
-| `.sticky-top` | sticky + `top: var(--window-top)` + z-index 9 |
-| `.sticky-bottom` | sticky + `bottom: var(--window-bottom)` + z-index 9 |
-| `.overflow-auto` / `.overflow-scroll` | overflow |
-
-## 透明度
-
-| 类名 | 值 |
-| --- | --- |
-| `.opacity-0` | 0 |
-| `.opacity-10` ~ `.opacity-100` | 0.1 ~ 1.0，步长 10 |
-
-## 阴影
-
-| 类名 | box-shadow |
-| --- | --- |
-| `.shadow-sm` | `0 1px 2px 0 rgba(0, 0, 0, 0.05)` |
-| `.shadow` | `0 1px 3px 0 rgba(0, 0, 0, 0.1)` |
-| `.shadow-md` | `0 4px 6px -1px rgba(0, 0, 0, 0.1)` |
-| `.shadow-lg` | `0 10px 15px -3px rgba(0, 0, 0, 0.1)` |
-
-## 动画与变换
-
-### 变换原点
-
-`.origin-{position}`：`center`、`top`、`top-right`、`right`、`bottom-right`、`bottom`、`bottom-left`、`left`、`top-left`
-
-### 过渡（仅非 nvue）
-
-| 类名 | 效果 |
-| --- | --- |
-| `.transition-all-300` | `transition: all 300ms` |
-
-## 常用组合示例
-
-卡片布局：
-
-```html
-<view class="flex flex-col p-16px bg-white rounded-8px shadow-sm">
-  <text class="text-32px font-semibold text-main">标题</text>
-  <text class="text-24px text-content mt-8px">描述内容</text>
-</view>
-```
-
-居加载中状态：
-
-```html
-<view class="flex justify-center items-center h-200px">
-  <text class="text-28px text-tips">加载中...</text>
-</view>
-```
-
-列表项（头像 + 文字）：
-
-```html
-<view class="flex items-center px-16px py-12px">
-  <image class="w-80rpx h-80rpx rounded-full" :src="avatar" />
-  <view class="flex-1 ml-12px">
-    <text class="text-28px text-main truncate">用户名</text>
-    <text class="text-24px text-tips">副标题</text>
-  </view>
-</view>
-```
-
-吸顶导航栏：
-
-```html
-<view class="sticky-top bg-white px-16px py-12px">
-  <text class="text-32px font-bold text-main">页面标题</text>
-</view>
-```
-
-表单区域：
-
-```html
-<view class="flex flex-col px-16px py-12px bg-white mt-8px">
-  <view class="flex justify-between items-center py-12px border-b">
-    <text class="text-28px text-main">标签</text>
-    <text class="text-28px text-content">值</text>
-  </view>
-</view>
-```
-
-两列等分布局：
-
-```html
-<view class="flex flex-wrap">
-  <view class="w-full flex" v-for="group in groups" :key="group.id">
-    <view class="flex-1 p-8px" v-for="item in group.items" :key="item.id">
-      <view class="bg-white rounded-8px p-16px">{{ item.name }}</view>
-    </view>
-  </view>
-</view>
-```
-
-底部固定操作栏：
-
-```html
-<view class="fixed bottom-0 left-0 right-0 bg-white px-16px py-12px z-5">
-  <view class="flex">
-    <view class="flex-1 mr-8px bg-error rounded-8px py-12px text-center">
-      <text class="text-white text-28px font-medium">取消</text>
-    </view>
-    <view class="flex-1 bg-primary rounded-8px py-12px text-center">
-      <text class="text-white text-28px font-medium">确认</text>
-    </view>
-  </view>
-</view>
-```
+# 工具样式类
+
+`@zfqh/uniapp` 内置一组静态 SCSS 工具类，仅覆盖 **平台差异类** 和 **使用 `$uv-*` SCSS 变量的语义色类**。间距、尺寸、字号、圆角、透明度、阴影等通用原子类需要配合 `@gmcb/vite` 提供的 unocss 插件在构建时动态生成，两者命名风格与 UnoCSS / Tailwind CSS 一致。
+
+## 前置依赖
+
+使用完整原子类能力前，需要在项目的 `vite.config.js` 中注册 unocss 插件，并传入 `blockList` 避免与内置静态类冲突：
+
+```js
+import { defineConfig } from '@gmcb/vite';
+import { unocss } from '@gmcb/vite/lib/plugins';
+import { blockList } from '@gmcb/vite/lib/unocss';
+
+export default defineConfig({
+  plugins: [
+    uni(),
+    unocss({
+      blockList,
+    }),
+  ],
+});
+```
+
+`blockList` 已预置全部内置静态类名，unocss 插件不会为这些类名生成重复 CSS。
+
+## 引入方式
+
+在项目全局样式中导入一次即可。放在 `App.vue` 的 `<style>` 块：
+
+```scss
+@import '@zfqh/uniapp/lib/styles/index.scss';
+```
+
+此入口同时导入 `@gmcb/uv-ui/index.scss`，无需再单独导入 uv-ui 基础样式。
+
+## 内置原子类
+
+### Flex 布局
+
+| 类名 | 效果 |
+| --- | --- |
+| `.flex` | flex 行布局 |
+| `.flex-inline` | inline-flex 行布局 |
+| `.flex-row` / `.flex-row-reverse` | 行方向 |
+| `.flex-col` / `.flex-col-reverse` | 列方向 |
+| `.flex-wrap` / `.flex-nowrap` / `.flex-wrap-reverse` | 换行控制 |
+| `.flex-0` ~ `.flex-8` | `flex: 0` ~ `flex: 8` |
+| `.flex-none` | `flex: 0` |
+| `.items-start` / `.items-end` / `.items-center` / `.items-stretch` / `.items-baseline` | align-items |
+| `.justify-start` / `.justify-end` / `.justify-center` / `.justify-between` / `.justify-around` | justify-content |
+
+::: info 平台差异
+- H5 平台下这些类包裹在 `page` 选择器内。
+- `.flex` / `.flex-inline` 的 `display: flex` / `display: inline-flex` 仅在非 APP-NVUE 平台生效，nvue 端省略 display 属性（Weex 默认 flex 布局）。
+:::
+
+### 背景色
+
+`.bg-{color}` 系列，颜色值读取 `$uv-*` SCSS 变量，跟随主题配置：
+
+| 色组 | 可用类名 |
+| --- | --- |
+| primary | `.bg-primary`、`.bg-primary-dark`、`.bg-primary-light`、`.bg-primary-disabled` |
+| warning | `.bg-warning`、`.bg-warning-dark`、`.bg-warning-light`、`.bg-warning-disabled` |
+| success | `.bg-success`、`.bg-success-dark`、`.bg-success-light`、`.bg-success-disabled` |
+| error | `.bg-error`、`.bg-error-dark`、`.bg-error-light`、`.bg-error-disabled` |
+| info | `.bg-info`、`.bg-info-dark`、`.bg-info-light`、`.bg-info-disabled` |
+
+基础背景：
+
+| 类名 | SCSS 变量 | 说明 |
+| --- | --- | --- |
+| `.bg` | `$uv-bg-color` | 页面背景色 |
+| `.bg-light` | `$uv-bg-light-color` | 浅色背景 |
+| `.bg-disabled` | `$uv-disabled-color` | 禁用态背景 |
+| `.bg-border` | `$uv-border-color` | 边框色背景 |
+
+### 文字颜色
+
+`.text-{color}` 系列，颜色值读取 `$uv-*` SCSS 变量：
+
+| 色组 | 可用类名 |
+| --- | --- |
+| primary | `.text-primary`、`.text-primary-dark`、`.text-primary-light`、`.text-primary-disabled` |
+| warning | `.text-warning`、`.text-warning-dark`、`.text-warning-light`、`.text-warning-disabled` |
+| success | `.text-success`、`.text-success-dark`、`.text-success-light`、`.text-success-disabled` |
+| error | `.text-error`、`.text-error-dark`、`.text-error-light`、`.text-error-disabled` |
+| info | `.text-info`、`.text-info-dark`、`.text-info-light`、`.text-info-disabled` |
+
+UI 语义色：
+
+| 类名 | SCSS 变量 | 说明 |
+| --- | --- | --- |
+| `.text-main` | `$uv-main-color` | 主要文字 |
+| `.text-content` | `$uv-content-color` | 正文文字 |
+| `.text-tips` | `$uv-tips-color` | 辅助提示 |
+| `.text-light` | `$uv-light-color` | 占位/水印 |
+| `.text-border` | `$uv-border-color` | 边框色文字 |
+| `.text-disabled` | `$uv-disabled-color` | 禁用态文字 |
+
+### 边框
+
+| 类名 | 效果 |
+| --- | --- |
+| `.border` | 1px solid 边框色（`$uv-border-color`） |
+| `.border-half` | 0.5px solid 边框色 |
+| `.border-t` / `.border-r` / `.border-b` / `.border-l` | 单边 1px solid 边框色 |
+| `.border-x` / `.border-y` | 双轴 1px solid 边框色 |
+
+语义色边框：
+
+| 类名 | SCSS 变量 |
+| --- | --- |
+| `.border-primary` | `$uv-primary` |
+| `.border-warning` | `$uv-warning` |
+| `.border-success` | `$uv-success` |
+| `.border-error` | `$uv-error` |
+| `.border-info` | `$uv-info` |
+
+### 定位
+
+| 类名 | 效果 |
+| --- | --- |
+| `.relative` | position: relative |
+| `.absolute` | position: absolute |
+| `.fixed` | position: fixed |
+| `.sticky` | position: sticky |
+
+::: info 平台差异
+H5 平台下这些类包裹在 `page` 选择器内，其他平台直接使用。
+:::
+
+### 文本截断
+
+**非 nvue 平台**（`text-vue.scss`）：
+
+| 类名 | 效果 |
+| --- | --- |
+| `.truncate` | 单行截断（overflow ellipsis + nowrap） |
+| `.line-clamp-1` ~ `.line-clamp-5` | 多行截断（`-webkit-line-clamp`） |
+
+**nvue 平台**（`text-nvue.scss`）：
+
+| 类名 | 效果 |
+| --- | --- |
+| `.truncate` | 单行截断（Weex `lines: 1`） |
+| `.line-clamp-1` ~ `.line-clamp-5` | 多行截断（Weex `lines: n`） |
+
+### 全局重置
+
+`reset-vue.scss` 在非 nvue 平台自动生效，不属于原子类，作用：
+
+- 设置 `:root` 下的 `--window-bottom`、`--window-top`（非 H5）、`--window-height`、`--window-width` CSS 自定义属性。
+- `page` 元素宽高 100%、`font-family: Microsoft YaHei`、颜色取 `$uv-main-color`、flex 列布局。
+- `view`、`text`、`image` 设置 `box-sizing: border-box`。
+- 修复 `.uni-scroll-view-refresher` 背景透明。
+- 调整 `.ql-editor.ql-blank:before` 占位文字样式。
+- 调整 `.uv-toast` 默认样式。
+
+除上述内置类外，其余原子类（间距、尺寸、字号、字重、行高、对齐、基础背景色、边框宽度/样式、圆角、overflow、top/right/bottom/left/inset/z-index、透明度、阴影、transform-origin、transition 等）均由 `@gmcb/vite` 的 unocss 插件在构建时根据模板扫描动态生成，命名风格与 UnoCSS / Tailwind CSS 一致，支持 `px` 和 `rpx` 两种单位。
+
+`blockList` 已预置全部内置静态类名，unocss 插件不会为这些类名生成重复 CSS。
+
+## 常用组合示例
+
+卡片布局：
+
+```html
+<view class="flex flex-col p-16px bg-white rounded-8px shadow-sm">
+  <text class="text-32px font-semibold text-main">标题</text>
+  <text class="text-24px text-tips mt-8px">描述内容</text>
+</view>
+```
+
+居加载中状态：
+
+```html
+<view class="flex justify-center items-center h-200px">
+  <text class="text-28px text-tips">加载中...</text>
+</view>
+```
+
+列表项（头像 + 文字）：
+
+```html
+<view class="flex items-center px-16px py-12px">
+  <image class="w-80rpx h-80rpx rounded-full" :src="avatar" />
+  <view class="flex-1 ml-12px">
+    <text class="text-28px text-main truncate">用户名</text>
+    <text class="text-24px text-tips">副标题</text>
+  </view>
+</view>
+```
+
+吸顶导航栏：
+
+```html
+<view class="sticky top-0 bg-light px-16px py-12px">
+  <text class="text-32px font-bold text-main">页面标题</text>
+</view>
+```
+
+表单区域：
+
+```html
+<view class="flex flex-col px-16px py-12px bg-white mt-8px">
+  <view class="flex justify-between items-center py-12px border-b">
+    <text class="text-28px text-main">标签</text>
+    <text class="text-28px text-content">值</text>
+  </view>
+</view>
+```
+
+两列等分布局：
+
+```html
+<view class="flex flex-wrap">
+  <view class="w-full flex" v-for="group in groups" :key="group.id">
+    <view class="flex-1 p-8px" v-for="item in group.items" :key="item.id">
+      <view class="bg-white rounded-8px p-16px">{{ item.name }}</view>
+    </view>
+  </view>
+</view>
+```
+
+底部固定操作栏：
+
+```html
+<view class="fixed bottom-0 left-0 right-0 bg-white px-16px py-12px z-5">
+  <view class="flex">
+    <view class="flex-1 mr-8px bg-error rounded-8px py-12px text-center">
+      <text class="text-white text-28px font-medium">取消</text>
+    </view>
+    <view class="flex-1 bg-primary rounded-8px py-12px text-center">
+      <text class="text-white text-28px font-medium">确认</text>
+    </view>
+  </view>
+</view>
+```