@zfqh/uniapp 0.1.1

package/docs/components/g-upload.md

@@ -0,0 +1,117 @@
+# g-upload 上传
+
+::: tip 组件名
+`g-upload`
+
+发布路径：`@zfqh/uniapp/lib/components/g-upload/g-upload.vue`
+:::
+
+图片/文件上传网格，支持选择、预览、删除、自定义上传、COS 压缩和 v-model:files。
+
+## 平台兼容性
+
+| App（vue） | App（nvue） | H5 | 小程序 | Vue 2 | Vue 3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | 依赖源码条件编译 | √ | √ | - | √ |
+
+## 使用前提
+
+- 已安装并注册 `@zfqh/uniapp` 插件。
+- 已按 [项目接入](./usage) 配置 easycom，或手动从构建产物导入组件。
+- 尺寸类属性通常支持数字或带单位字符串；数字值会在组件内部通过 `uni.$uv.addUnit` 转成样式单位。
+- 样式类属性中，`customStyle`、`xxxStyle` 接收对象，`customClass`、`xxxClass` 接收 class 字符串。
+
+## 基本使用
+
+```vue
+<template>
+  <g-upload
+    v-model="formData.tongueFiles"
+    size="294rpx"
+    close-size="40rpx"
+    icon-size="80rpx"
+    :col="2"
+    :gutter="['24rpx', '32rpx']"
+    :count="4"
+    :action="uploadFile"
+    @choose="onChoose"
+  />
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+
+const formData = reactive({ tongueFiles: [] });
+
+async function uploadFile(file) {
+  const { url } = await fileApi.upload(file);
+  return { url };
+}
+
+function onChoose(files) {
+  console.log('selected files', files);
+}
+</script>
+```
+
+## API
+
+### 上传 Props
+
+| 属性 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `files` | `Array` | `() => []` | 否 | 文件列表，g-upload 会通过 update:files 回写新数组。 |
+| `size` | `[String, Number]` | `70` | 否 | 组件尺寸。 |
+| `iconSize` | `[String, Number]` | `30` | 否 | 主图标尺寸，数字会按 uni.$uv.addUnit 转成 rpx/px。 |
+| `iconColor` | `String` | `() => color.borderColor` | 否 | icon 颜色。 |
+| `loadingSize` | `[String, Number]` | `20` | 否 | loading 尺寸。 |
+| `col` | `[String, Number]` | `4` | 否 | 列数。 |
+| `count` | `[String, Number]` | `8` | 否 | 最大可选文件数量。 |
+| `disabled` | `Boolean` | `false` | 否 | 是否禁用交互。 |
+| `custom` | `Boolean` | `false` | 否 | 自定义处理函数；存在时组件会优先调用它接管默认动作。 |
+| `border` | `Boolean` | `true` | 否 | 是否显示边框。 |
+| `borderStyle` | `String` | `'solid'` | 否 | 自定义 border 区域 style 对象。 |
+| `borderColor` | `String` | `() => color.borderColor` | 否 | border 颜色。 |
+| `borderRadius` | `[String, Number]` | `4` | 否 | 圆角。 |
+| `customStyle` | `Object` | `() => ({})` | 否 | 最外层自定义 style 对象。 |
+| `itemStyle` | `Object` | `() => ({})` | 否 | 自定义 item 区域 style 对象。 |
+| `gutter` | `[Array, Number, String]` | `() => 8` | 否 | 间距。 |
+| `bgColor` | `String` | `'#fff'` | 否 | 背景颜色。 |
+| `closeSize` | `[String, Number]` | `16` | 否 | close 尺寸。 |
+| `closeColor` | `String` | `() => color.contentColor` | 否 | close 颜色。 |
+| `closeStyle` | `Object` | `() => ({})` | 否 | 自定义 close 区域 style 对象。 |
+| `action` | `Function` | `() => {}` | 否 | 上传地址或上传行为配置。 |
+
+### 上传 Events
+
+| 事件 | 说明 |
+| --- | --- |
+| `update:files` | 文件列表变化时触发，用于 v-model:files。 |
+| `choose` | 选择文件完成后触发。 |
+
+### 上传 Slots
+
+| 插槽 | 说明 |
+| --- | --- |
+| `default` | 默认内容区域。 |
+
+### 上传 Methods
+
+| 方法 | 说明 |
+| --- | --- |
+| `compress(url)` | 对图片 URL 应用 COS 图片处理规则。 |
+| `previewImage({ path, url })` | 预览图片。 |
+| `removeFile(file, index)` | 从文件列表中删除指定文件。 |
+| `chooseSuccess({ tempFiles })` | 处理选择文件成功后的列表合并和上传。 |
+| `chooseImage()` | 组件内部公开方法 chooseImage()；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+
+### 上传 Internal State
+
+| 类型 | 名称 | 说明 |
+| --- | --- | --- |
+| computed | `_gutter` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `_customStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `_itemStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `_loadingStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `_closeStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| data | `list` | 内部响应式状态，通常不建议由外部直接依赖。 |

package/docs/components/g-waterfall.md

@@ -0,0 +1,84 @@
+# g-waterfall 瀑布流
+
+::: tip 组件名
+`g-waterfall`
+
+发布路径：`@zfqh/uniapp/lib/components/g-waterfall/g-waterfall.vue`
+:::
+
+双列瀑布流数据分发容器，将 list 按高度/顺序拆到 left/right 插槽。
+
+## 平台兼容性
+
+| App（vue） | App（nvue） | H5 | 小程序 | Vue 2 | Vue 3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | 依赖源码条件编译 | √ | √ | - | √ |
+
+## 使用前提
+
+- 已安装并注册 `@zfqh/uniapp` 插件。
+- 已按 [项目接入](./usage) 配置 easycom，或手动从构建产物导入组件。
+- 尺寸类属性通常支持数字或带单位字符串；数字值会在组件内部通过 `uni.$uv.addUnit` 转成样式单位。
+- 样式类属性中，`customStyle`、`xxxStyle` 接收对象，`customClass`、`xxxClass` 接收 class 字符串。
+
+## 基本使用
+
+```vue
+<template>
+  <g-waterfall :list="goodsList" gutter="24rpx">
+    <template #left="{ data }">
+      <goods-card v-for="item in data" :key="item.id" :data="item" />
+    </template>
+
+    <template #right="{ data }">
+      <goods-card v-for="item in data" :key="item.id" :data="item" />
+    </template>
+  </g-waterfall>
+</template>
+
+<script setup>
+const goodsList = [
+  { id: 1, name: '黄芪养生茶', image: 'https://static.example.com/a.png' },
+  { id: 2, name: '艾草足浴包', image: 'https://static.example.com/b.png' },
+];
+</script>
+```
+
+## API
+
+### 瀑布流 Props
+
+| 属性 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `list` | `Array` | `() => []` | 否 | 数据列表。具体 item 字段由组件或字段映射 props 决定。 |
+| `gutter` | `[String, Number]` | `16` | 否 | 间距。 |
+| `props` | `Object` | `() => ({})` | 否 | 组件公开属性 props，用于控制该组件对应的渲染、交互或业务参数。 |
+
+### 瀑布流 Events
+
+无显式组件事件。
+
+### 瀑布流 Slots
+
+| 插槽 | 说明 |
+| --- | --- |
+| `left` | 导航栏左侧区域；g-page-container 中可替换返回/首页按钮。 |
+| `right` | 导航栏右侧操作区。 |
+
+### 瀑布流 Methods
+
+| 方法 | 说明 |
+| --- | --- |
+| `calc(data)` | 组件内部公开方法 calc(data)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `push(list)` | 组件内部公开方法 push(list)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `clear()` | 清空内部数据或输入值。 |
+| `update(list)` | 组件内部公开方法 update(list)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+
+### 瀑布流 Internal State
+
+| 类型 | 名称 | 说明 |
+| --- | --- | --- |
+| computed | `marginStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| data | `leftList` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `rightList` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `tempList` | 内部响应式状态，通常不建议由外部直接依赖。 |

package/docs/components/index.md

@@ -0,0 +1,109 @@
+# 组件
+
+`@zfqh/uniapp` 提供一组以 `g-` 开头的 uni-app 公共组件，风格上参考 `uv-ui` 文档组织：每个组件都有独立页面，页面内包含组件名、适用平台、基础用法、Props、Events、Slots、Methods 和内部状态说明。
+
+## 使用方式
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^g-(.*)": "@zfqh/uniapp/lib/components/g-$1/g-$1.vue"
+    }
+  }
+}
+```
+
+配置后可直接在页面中使用：
+
+```vue
+<template>
+  <g-page-container title="页面标题">
+    <g-search v-model="keyword" @search="loadData" />
+  </g-page-container>
+</template>
+```
+
+## 平台兼容性
+
+| App（vue） | App（nvue） | H5 | 小程序 | Vue 2 | Vue 3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | 依赖组件条件编译 | √ | √ | - | √ |
+
+## Store 用法
+
+组件属于 Vue 上下文，业务组件或二次封装组件中读取 Vuex 时请使用组件入口：
+
+```ts
+import { useStore } from 'vuex';
+
+const store = useStore();
+```
+
+Options API 组件可使用 `this.$store`。`uni.$store` 主要给请求、导航、权限、webview 消息等普通 TS 模块使用，不建议作为组件 setup 或 hooks 的首选入口。
+
+## 组件分类
+
+### 布局容器
+
+| 组件 | 说明 |
+| --- | --- |
+| [`g-container`](./g-container) | 页面基础容器，统一处理背景、内容区、底部固定栏、安全区、加载态和 tabBar 底部间距。 |
+| [`g-page-container`](./g-page-container) | 完整页面骨架，包含导航栏、下拉刷新、滚动区、底部栏、安全区、背景层和返回/首页按钮。 |
+| [`g-refresh-view`](./g-refresh-view) | 滚动刷新容器，封装 scroll-view refresher，并统一下拉状态事件。 |
+| [`g-data-list`](./g-data-list) | 分页数据加载容器，把 request、page/pageSize、加载状态和 loadmore 插槽集中管理。 |
+| [`g-waterfall`](./g-waterfall) | 双列瀑布流数据分发容器，将 list 按高度/顺序拆到 left/right 插槽。 |
+
+### 展示组件
+
+| 组件 | 说明 |
+| --- | --- |
+| [`g-icon`](./g-icon) | 图标字体适配组件，统一 type、font、name、size、color、bold 等图标属性。 |
+| [`g-money`](./g-money) | 金额格式化展示组件，把符号、整数、小数、前后缀和字号拆分渲染。 |
+| [`g-dot-text`](./g-dot-text) | 圆点加文本的状态展示组件，可用于标签、图例、提示项和行内说明。 |
+| [`g-more`](./g-more) | “查看更多”行内入口，支持文字、箭头图标、颜色和顶部间距。 |
+| [`g-grid-image`](./g-grid-image) | 固定列数图片网格，负责计算间距、高度、圆角和点击回传。 |
+| [`g-grid-swiper`](./g-grid-swiper) | 宫格轮播组件，把列表按行列切页，支持自定义指示器和点击跳转。 |
+| [`g-render-image`](./g-render-image) | 把页面 DOM/插槽内容渲染成图片并保存或返回路径的分享海报辅助组件。 |
+| [`g-skeleton`](./g-skeleton) | 骨架屏容器，提供统一背景和高度。 |
+| [`g-skeleton-view`](./g-skeleton-view) | 骨架屏块，用于组合出头像、标题、段落等占位结构。 |
+| [`g-polyline-view`](./g-polyline-view) | 简单折线段渲染组件，根据数据点生成多段连线。 |
+| [`g-polyline-chat`](./g-polyline-chat) | 柱状/折线组合趋势视图，用 bars 与 data 渲染聊天或统计类走势图。 |
+
+### 反馈与浮层
+
+| 组件 | 说明 |
+| --- | --- |
+| [`g-popup`](./g-popup) | 通用弹窗，封装 uv-popup 的标题、内容、底部按钮、关闭、确认和样式配置。 |
+| [`g-mask`](./g-mask) | 遮罩层组件，支持层级、缩放动画、点击关闭能力和默认插槽内容。 |
+| [`g-float`](./g-float) | 悬浮操作按钮，滚动时可自动淡出，点击后可跳转或抛出 goto 事件。 |
+| [`g-permission-popup`](./g-permission-popup) | 权限申请辅助弹层，监听 requestPermission 事件展示授权原因。 |
+| [`g-back-button`](./g-back-button) | 自定义返回/首页按钮，适合透明导航栏、沉浸式页面或小程序胶囊左侧区域。 |
+
+### 表单与业务
+
+| 组件 | 说明 |
+| --- | --- |
+| [`g-search`](./g-search) | 搜索框组件，支持输入、清空、搜索按钮、边框/圆角/占位样式和插槽扩展。 |
+| [`g-checkbox-list`](./g-checkbox-list) | 轻量选择列表，支持单选/多选、禁用、重复点击取消和字段映射。 |
+| [`g-tag-editor`](./g-tag-editor) | 标签输入/搜索/选择编辑器，支持标签模式、输入模式、禁用、分隔符、候选项和自定义列表。 |
+| [`g-upload`](./g-upload) | 图片/文件上传网格，支持选择、预览、删除、自定义上传、COS 压缩和 v-model:files。 |
+| [`g-timer`](./g-timer) | 计时器组件，从 start 起算并每秒抛出格式化时间。 |
+
+### 分享与音视频
+
+| 组件 | 说明 |
+| --- | --- |
+| [`g-share-photo`](./g-share-photo) | 保存图片到相册的分享入口，可走默认保存流程或 custom 自定义逻辑。 |
+| [`g-share-view`](./g-share-view) | 分享操作面板，聚合保存图片和微信分享按钮，并展示分享引导。 |
+| [`g-share-weixin`](./g-share-weixin) | 微信分享入口，适配 App/WebView 场景并通过 confirm 事件回传分享数据。 |
+| [`g-trtc`](./g-trtc) | 腾讯实时音视频底层组件，管理 pusher/player、进退房、前后摄像头和音频状态。 |
+| [`g-trtc-room`](./g-trtc-room) | 音视频房间 UI 组件，包装 g-trtc、来电铃声、缩小悬浮和房间头部信息。 |
+| [`g-trtc-tui`](./g-trtc-tui) | 基于腾讯 TUIChatEngine 的通话邀请层，处理接听、挂断、消息监听和房间状态。 |
+
+### 运行时
+
+| 组件 | 说明 |
+| --- | --- |
+| [`g-env`](./g-env) | 环境切换入口，主要给 H5/Electron 调试环境使用，用于查看和切换当前 env。 |

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

@@ -0,0 +1,367 @@
+# 工具样式类
+
+`@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>
+```