接入

凌云UI 是一套 uni-app 组件。

安装到应用

先挂 Pinia，再挂组件库。顺序不能反，否则 Toast / HUD 没有状态。

import { createSSRApp } from 'vue'
import App from './App.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 }
}

本仓库的 Pinia 在 src/stores 里创建，效果相同：先 app.use(pinia)，再 app.use(lingyunUi)。

页面壳

每个业务页用 lingyun-app-page 包住正文。它负责顶栏、滚动玻璃，以及 Toast / HUD 的宿主。

<lingyun-app-page title="首页" :show-back="false">
  <view>正文</view>
</lingyun-app-page>

有输入框的页面不要关闭页面级滚动（不要写 :page-scroll="false"）。

宽屏

窗口宽度达到 690 时，左侧出现宽 220 的导航，右侧是当前页。折叠屏展开（例如 OPPO Find 692、717×781）会进入这个布局；手机竖屏不会。

H5：app.use(lingyunUi) 时侧栏挂到 body，换页不会拆掉。
微信小程序：侧栏画在页面里，换页时记住滚动位置和选中项。

某一页不需要导航时：

<lingyun-app-page title="登录" :show-nav="false" />

左栏顶部默认是「凌云UI」，下面一行是「一套对齐 Apple Liquid Glass 的 uni-app 多端组件库」。名称和右侧顶栏对齐，介绍超出一行会省略。

组件演示列表在 /pages/demo/demo，固定读 LINGYUN_PAGE_NAV，不跟登录后的业务菜单走。首页「组件 Demo」也进这一页。

首页列表和宽屏左栏读同一份运行时目录，默认仍是 src/router/pageNav.ts。登录后把后台菜单和顶部资料写进来，这两处会跟着变：

import { setLingyunPageNavProfile, setLingyunPageNavSections } from '@/router/pageNav'

setLingyunPageNavSections(sections)
setLingyunPageNavProfile({
  avatar: user.avatar,
  name: user.name,
  subtitle: user.org,
})

某一页要换成自己的头像、名称或副标题时，用 nav-avatar、nav-name、nav-subtitle。插槽盖过上面的默认图片和文字。:nav-sections 只覆盖当前页的微信内嵌列，H5 侧栏读不到它。

标准页面

登录等可复用整页在独立包 lingyun-ui-page，见页面扩展。路由仍写在 pages.json，页面里只挂标签并处理提交、跳转。

手册里的手机预览

组件文档在宽窗口右侧有一个实时预览框，画面是对应的演示页，可以直接点。框下方可切换「手机」「宽屏」「iPhone Duo」：

手机：竖屏 390×844 / 横屏 844×390；
宽屏：717×781，用来查看宽屏左侧导航；
iPhone Duo：内屏竖、内屏竖半折、外屏竖、外屏横、内屏横、内屏横半折（Split View）。

Duo 状态通过 postMessage 设置演示应用的 setLingyunLayoutOverride，只影响预览框里的演示，不会改真实设备判断。本地写文档时需要同时开着 pnpm dev（默认 http://localhost:5175）；线上手册会自动指向演示站 https://demo.xinyicanyin.com（hash 模式）。窗口窄于 1180 时不显示，避免挡住正文。

接入

安装到应用

页面壳

宽屏

标准页面

屏幕

手册里的手机预览