更新记录

1.0.41（2026-11-06）下载此版本

新增底部日期切换器 lingyun-date-switcher：支持天 / 周 / 月 / 年 / 自定义日期段，前后切换、模式菜单、范围限制，change / center 统一返回 value 与 range。
lingyun-menu 新增 full-width、anchor 与默认插槽自定义内容；不传 actions 时菜单只负责弹出、定位、遮罩和动效，内容完全由页面接管。
lingyun-popover 新增 full-width / anchor，并在展开动画结束后发送内部事件，供内容重新测量。
lingyun-toolbars 新增顶部搜索模式（独立搜索钮、从右往左输入框过渡、关闭清空关键词、延迟聚焦）、下方 segments 分段控制、trailing-buttons 二维分组、trailing-buttons-hidden、trailing-menu-enabled、showThemeSwitch；点击事件返回 groupIndex / buttonIndex / 整组 anchor。
lingyun-app-page 透传搜索与分段配置，支持 v-model:searching / v-model:search-value / v-model:segment-value，新增 openSearch() / closeSearch() / toggleSearch() 方法及 search / search-input / search-cancel / segment-click / segment-change 事件。
修复 lingyun-segmented-control 在缩放浮层（菜单 / Sheet）内选中块测量错误：H5 使用布局尺寸，小程序在展开完成后重新测量。
lingyun-stepper 数值框宽度按数字位数自适应，多位数字完整显示。
主题菜单 / trailing-menu 改为按按钮组右上角定位；新增页面级 showThemeSwitch，局部隐藏不再修改全局主题钮状态。
demo 新增底部日期切换、顶部搜索、顶部分段、筛选菜单与 All In One 综合示例；同步设计规范与组件文档。

1.0.39（2026-10-30）下载此版本

宽屏（≥690）配置全局 tabs 后的 84 左侧窄栏改为通高固定材质：去掉悬浮玻璃卡片、外边距、圆角与侧边线，整列铺满左侧区域，底色使用与内容卡片相同的 grouped 背景，叠加固定的顶栏满玻璃同款 tint（浅色 #fff@0.42 / 暗黑 #fff@0.14），滚动时不再变色，与顶栏玻璃连接处不再出现竖线或色差。
侧栏为实底，不再读取顶栏滚动进度、不做 blur；未配置 tabs 的 220 完整目录不受影响。

1.0.36（2026-10-29）下载此版本

递增版本号，重新发布 1.0.35 的固定页面背景、图表 tooltip 外部关闭、Duo 工具栏与菜单动效等更新，确保 uni-app 插件市场识别最新内容；本版本内容与 1.0.35 一致。

平台兼容性

uni-app(4.05)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
×	√	√	√	√	√	√	√	√

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
√	√	√	√	√	√	√	√	√	√	√	√

uni-app x(5.26)

Chrome	Chrome插件版本	Safari	Safari插件版本	Android	Android插件版本	iOS	iOS插件版本	鸿蒙	鸿蒙插件版本	微信小程序	微信小程序插件版本
√	1.0.0	√	1.0.0	√	1.0.0	√	1.0.0	√	1.0.0	√	1.0.0

其他

多语言	暗黑模式	宽屏模式	蒸汽模式
×	√	√	×

凌云UI

凌云UI 组件库（uni_modules 单包多组件）。当前版本 1.0.41，变更见 changelog.md。

📖 使用手册（组件用法、属性、示例；右侧手机框实时预览）

📦 仓库 🐛 欢迎反馈：使用中遇到问题或有建议，请在仓库 Issues 提交，也欢迎 PR 共同完善。

UI 风格强制：Apple Liquid Glass → 仓库 design/UI_SPEC.md
主题色强制：System Colors → design/COLORS.md · Sketch
外观：浅色 / 暗黑 / 跟随系统，业务侧用 useThemeStore()（src/stores/theme.ts）。工具栏内置主题钮用 setLingyunThemeSwitchVisible(true) 开启。

页面直接写 lingyun-* 标签，走 easycom，不必逐个 import。

接入

createApp 里先挂 Pinia，再挂本包。Toast / HUD，以及 H5 宽屏侧栏，都从这里注册。

import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
import { lingyunUi } from '@/uni_modules/lingyun-ui'

export function createApp() {
  const app = createSSRApp(App)
  app.use(createPinia())
  app.use(lingyunUi)
  return { app }
}

业务页用 lingyun-app-page 当壳（自定义顶栏、滚动玻璃、反馈宿主）。含输入框的页面保持默认页面级滚动，见 design/TEXTFIELDS.md §5。

<lingyun-app-page title="Home" :show-back="false">
  <!-- 正文 -->
</lingyun-app-page>

命令式反馈（无需 import，页面须在 lingyun-app-page 内）：

uni.showLingyunToast({ text: 'Saved', type: 'success' })
uni.showLingyunHud('Loading…')
uni.hideLingyunHud()
const { confirm } = await uni.showLingyunAlert({ title: '删除？', showCancel: true })

宽屏

窗口宽度 ≥ 690 时，页面左侧停靠导航。未配置全局 tabs 时完整目录宽 220；配置 tabs 后（iPad / PC）收窄为 84 通高窄栏，图标在上、文字在下。整列铺满左侧区域（无外边距、无圆角、无侧边线），底色与内容卡片相同的 grouped 背景，叠加固定的顶栏同款 tint（浅色 #fff×0.42 / 暗黑 ×0.14，不随滚动变化），滚动后与顶栏玻璃同亮度；侧栏下方没有滚动内容，不做 blur。.lingyun-page-safe-left 保留兼容。全局 tabs 支持 children 二级菜单，二级项还可再带 children：二级是分组卡片标题，三级是卡片按钮，只有二级菜单时渲染无标题卡片；宽屏左侧（Web / 小程序一致）点击父项用 lingyun-menu 弹出（分组标题分隔），底部 / Duo 点击父项进入固定工作台页（workspaceUrl?tab=<key>）。手机仍用底部 Tab。折叠屏展开（如 OPPO Find 692、717×781）走 iPad/PC 窄栏；手机竖屏仍是单栏。顶栏和内容区跟随 --lingyun-page-nav-width，不会压住导航。

端	行为
H5	`app.use(lingyunUi)` 把侧栏挂到 `body`，只创建一次。换页不闪，滚动位置保持
微信小程序	侧栏常驻，右侧像 Tab 一样切换已登记组件，不增加页面栈

关掉某一页：<lingyun-app-page :show-nav="false">。Sheet / 带 Grabber 的页不显示这列。

后台菜单要在宽屏右侧直接加载，先用 registerLingyunPageView 登记路径，并在业务工程的 app-page-view-outlet.vue 静态导入组件；微信不支持从服务端 URL 动态加载组件。

默认目录来自业务工程 src/router/pageNav.ts（与首页列表共用）。要换目录，传 nav-sections。

<lingyun-app-page title="订单" :nav-sections="sections" />

一级导航（数据驱动）

一次配置，窄屏渲染底部玻璃 Tab，宽屏渲染左侧停靠导航。默认按窗口宽度 690 切换；手机横屏达到 690 也走侧栏。

import { setLingyunPageConfig } from '@/uni_modules/lingyun-ui'

setLingyunPageConfig({
  tabs: [
    { key: 'home', text: '首页', icon: 'home', url: '/pages/index/index' },
    { key: 'orders', text: '订单', icon: 'list', url: '/pages/orders/orders', badge: 3 },
  ],
  sidebarTitle: '主导航',
  pages: {
    '/pages/login/login': { hideTabbar: true, hideNav: true },
  },
})

选中态从当前路由推导；详情页可用 match 归入某个 Tab。
窄屏由首页 / 目录宿主页页内切换一级 Tab，页面栈不增长；H5 地址保持为宿主路由的 ?tab=<key>，刷新或从子页返回按这个 key 恢复。微信宽屏优先走常驻宿主切换，不增加页面栈。从其他页面直接进入工作台时仍走一次路由。
优先级：组件 props > pages[path] 页面覆盖 > layout > 宽度自动规则。可用 nav-mode、show-tabbar、show-nav 覆盖。
页面壳默认不接管底部 Tab：只有一级 Tab 根页或工作台页渲染底部 Tab，并写入 --lingyun-app-page-inset-bottom；子页/详情页/首页默认没有 Tab，也不留底部空间。其他页面需要 Tab 请自行使用 lingyun-tabbars。页面不要再手写 padding-bottom，否则设 :auto-bottom-inset="false"。
带商品底栏 / 底部搜索条的页面请配置 pages[path].hideTabbar = true。
小程序 Tab 指向内嵌视图时仍须静态登记，见上面的 registerLingyunPageView。

iPhone Duo

设备识别：lingyun.formFactor === 'duo'，姿态见 lingyun.duoPose（外屏/内屏、横竖、半折）。
接入宿主已有型号判断：

import { configureLingyunLayout } from '@/uni_modules/lingyun-ui'

configureLingyunLayout({
  getFormFactor: () => yourFormFactor(),
  getDuoPose: () => yourDuoPose(),
})

P1 支持内屏竖屏：顶部 lingyun-duo-toolbar（84 高；Leading 48、标题 17/22 左对齐、右侧 164×48 玻璃工具组、最右预留 134）+ 底部 Duo Tab（95 高）；半折时屏幕中心显示 40px 横向折痕安全带。页面用 duo-tools 插槽放 1~3 个 36×36 工具项。
P2 支持外屏竖屏 / 外屏横屏 / 内屏横屏：右侧 lingyun-duo-rail（84 宽，工具组、仅图标 Tab、可选搜索；外屏横屏自动用「…」溢出）。页面用 duo-tools 插槽放工具按钮，监听 duo-search / duo-overflow。独立页隐藏 Tab / 搜索，只在摄像头 / 状态栏下方显示返回；搜索需配置 tabbar.search = true。
P3 支持内屏横屏折叠/半折 Split View：顶部 84 高 Duo Toolbar、右侧 84 返回列、左主栏 + 40 折痕带 + 右详情栏；Tab 隐藏。页面用 split-primary / split-detail 插槽，右侧返回触发 back。
H5 与微信小程序都进入 Duo 分支；宿主可用 setLingyunDuoSupported(false) 关闭。

屏幕

当前窗口档、操作系统、折叠状态和硬件类型见使用手册屏幕。模板里可写 lingyun.os == 'ios'，脚本里 import { lingyun } from '@/uni_modules/lingyun-ui'。

窄屏和宽屏分成两个组件。窗口宽度小于 690 显示 lingyun-mobile，达到 690 的平板和电脑显示 lingyun-pc。

<lingyun-mobile>
  <lingyun-section title="手机上的内容" />
</lingyun-mobile>
<lingyun-pc>
  <lingyun-section title="平板和电脑上的内容" />
</lingyun-pc>

布局

24 分栏用 lingyun-row 和 lingyun-col，参数对齐 Element Plus Layout。说明见使用手册布局。

<lingyun-row :gutter="12">
  <lingyun-col :span="16"><view>16</view></lingyun-col>
  <lingyun-col :span="8"><view>8</view></lingyun-col>
</lingyun-row>

硬规则

*所有 `lingyun-组件只放在本包下**，路径固定为components/<组件名>/<组件名>.vue`。
禁止再建无关的 src/uni_modules/lingyun-xxx 包。例外：图表 lingyun-ui-charts，标准页面 lingyun-ui-page。
禁止把 lingyun-* 放到 src/components/。
目录与文件名必须一致，便于 easycom 自动扫描。
样式扩展统一走 styles/；控件层必须使用 $lingyun-glass-*，禁止组件内私造第二套模糊参数。选型见 styles/README.md 与 design/UI_SPEC.md §6.2：
- 透底控件 / Toolbar / 一切浮层面板（Alert / Sheet / Toast / HUD / Action Sheet…） → @include lingyun-glass-surface（+ 全端 blur；见 UI_SPEC §6.2-A.1）
- 仅极端无遮罩实霜浮层 → @include lingyun-glass-regular
尺寸一律 px（Sketch 1pt = 1px）。❌ 禁止 rpx。
必须兼容微信小程序（mp-weixin）：样式须通过 WXSS 编译（禁止通用选择器 * 等）；不得只在 H5 验证。见仓库 .cursor/rules/mp-weixin-compat.mdc 与 AGENTS.md。
每个组件交付前对照 design/UI_SPEC.md §8 自检清单（含 §6.2）。

lingyun-ui/
├── package.json          # 1.0.41
├── readme.md
├── changelog.md
├── index.ts              # app.use(lingyunUi)
├── utils/feedback.ts     # uni.showLingyunToast / Hud / Alert
├── styles/               # variables、theme、Liquid Glass mixin
└── components/
    ├── lingyun-app-page/ # 页面壳；宽屏时为左侧导航留位
    ├── lingyun-mobile/   # 窄屏才显示
    ├── lingyun-pc/       # 平板和电脑才显示
    ├── lingyun-row/      # 24 分栏的行
    ├── lingyun-col/      # 24 分栏的列
    ├── lingyun-page-nav/ # 宽屏目录。H5 挂载见 mountLingyunPageNav.ts
    ├── lingyun-toolbars/
    ├── lingyun-fab/
    ├── lingyun-goods-nav/
    ├── lingyun-table/    # 小程序滚动同步见 table-sync.wxs；筛选类型与匹配见 table-filter.ts
    ├── lingyun-table-filter/ # 表格列的排序与筛选面板（窄屏 Sheet / 宽屏 Popover），由 lingyun-table 内部打开
    ├── lingyun-table-filter-form/ # 筛选面板的表单内容，由 lingyun-table-filter 使用
    ├── lingyun-grid/
    ├── lingyun-grid-item/
    ├── lingyun-indexed-list/
    └── lingyun-*/        # 其余组件：目录名 = 文件名

新增组件：在 components/ 下建 lingyun-<name>/lingyun-<name>.vue，样式走 styles/，并更新本文件与 changelog.md。

示例

<lingyun-button variant="glass" size="large" text="Continue" @click="onSubmit" />
<lingyun-button variant="borderedProminent" text="Save" />
<lingyun-button variant="glass" role="destructive" text="Delete" />

<lingyun-fab
  :content="[
    { icon: 'compose', text: '新建' },
    { icon: 'camera', text: '拍照' },
  ]"
  @trigger="onFab"
/>

<lingyun-goods-nav
  :options="[
    { icon: 'shop', text: '店铺' },
    { icon: 'cart', text: '购物车', info: 2 },
  ]"
  :button-group="[{ text: '加入购物车' }, { text: '立即购买' }]"
  @button-click="onBuy"
/>

<lingyun-grid :column="4" @change="onGrid">
  <lingyun-grid-item :index="0" icon="shop" text="店铺" />
  <lingyun-grid-item :index="1" icon="cart" text="购物车" :info="2" />
</lingyun-grid>

<lingyun-grid
  background="transparent"
  :icon-size="40"
  :items="[{ icon: 'image', text: '相册', link: '/pages/demo/images' }]"
/>

<lingyun-indexed-list
  :options="[{ letter: 'A', data: ['阿坝', '安庆'] }, { letter: 'B', data: ['北京'] }]"
  @click="onIndex"
/>

<lingyun-toolbars title="Title" @back="onBack" />
<lingyun-toolbars placement="sheet" title="Title" @close="onClose" />
<lingyun-toolbars title-style="large" title="Title" />

<lingyun-sheets v-model:show="open" title="Sheet" detent="medium">
  <view>内容</view>
</lingyun-sheets>

<!-- 点遮罩是否关闭：maskClosable，默认 true；false 时点遮罩抖动 + 短震动，仍可用关闭钮 / 下滑收起 -->
<lingyun-sheets v-model:show="locked" title="必选" :mask-closable="false">
  <view>点遮罩不关闭</view>
</lingyun-sheets>

<!-- 顶栏右侧内置按钮（蓝色 Prominent）：icon + 最多 2 个字；只传 trailing-icon 时显示为圆钮 -->
<lingyun-sheets v-model:show="detail" title="详情" trailing-icon="upload" trailing-text="分享" @trailing="onShare">
  <view>内容</view>
</lingyun-sheets>

<!-- 宽屏居中卡片尺寸（≥690 生效）：width / height，px；0 用默认上限 936×770 -->
<lingyun-sheets v-model:show="form" title="筛选" :width="520" :height="420">
  <view>宽屏小卡片</view>
</lingyun-sheets>

<!-- 底部日期切换条：date / week / month / year / range；fixed 默认固定底部；modes 控制模式菜单，showModeSwitch=false 隐藏模式钮 -->
<lingyun-date-switcher v-model="date" mode="week" :modes="['date', 'week', 'month', 'year', 'range']" @change="onDateChange" />

<lingyun-action-sheet
  v-model:show="asOpen"
  title="Select an option"
  :actions="[{ text: 'Edit' }, { text: 'Delete', role: 'destructive' }]"
  @action="onAction"
/>

<lingyun-activity-view
  v-model:show="shareOpen"
  detent="half"
  title="Title"
  :contacts="[{ name: 'Ashley Kamin', badge: 'chat' }]"
  :apps="[{ name: 'Messages', icon: 'chat', color: '#34c759' }]"
  :groups="[{ actions: [{ text: 'Copy', icon: 'paperclip' }] }]"
  @select="onShare"
/>

<lingyun-alert
  v-model:show="visible"
  title="A Short Title Is Best"
  message="A message should be a short, complete sentence."
  :actions="[
    { text: 'Secondary', role: 'cancel' },
    { text: 'Primary', primary: true },
  ]"
  @action="onAction"
/>

<lingyun-sidebar v-model:show="open" v-model:current="key" title="Library" :sections="sections" />

<lingyun-form-item name="name" label="姓名">
  <lingyun-text-field v-model="form.name" placeholder="请输入" />
</lingyun-form-item>
<lingyun-text-field v-model="name" label="Name" placeholder="Placeholder" clearable />
<lingyun-text-field v-model="pwd" label="Password" secure />

<lingyun-list header="Header" header-type="extraProminent" footer="Footer">
  <lingyun-list-item title="Title" note="Subtitle" />
  <lingyun-list-item title="Title" detail="Detail" accessory="disclosure" />
  <lingyun-list-item title="Title" accessory="toggle" v-model:switch-checked="on" />
</lingyun-list>

<lingyun-swipe-action>
  <lingyun-swipe-action-item
    :right-options="[
      { text: 'Flag', role: 'orange' },
      { text: 'Delete', role: 'destructive' },
    ]"
    @click="onSwipe"
  >
    <lingyun-list-item title="Inbox" detail="12" accessory="disclosure" />
  </lingyun-swipe-action-item>
</lingyun-swipe-action>

<lingyun-tabbars
  v-model="current"
  :items="[
    { key: 'home', text: 'Home', icon: '⌂' },
    { key: 'search', role: 'search' },
  ]"
/>
<lingyun-search-bar v-model="query" placeholder="Search" @confirm="onSearch" />
<lingyun-segmented-control v-model="current" :items="['Day', 'Week', 'Month', 'Year']" />

<lingyun-badge text="247" />
<lingyun-badge color="green" text="3" />
<lingyun-badge dot />
<lingyun-activity-indicator size="large" />
<lingyun-progress :percent="40" show-info />
<lingyun-empty variant="plain" title="No Notes" description="Start by adding a note." />

<lingyun-section title="Variant" hint="Sketch Style">
  <view class="lingyun-section-row">
    <lingyun-button variant="glass" text="Glass" />
  </view>
</lingyun-section>