sky-ui-kit 0.1.1 → 0.1.2

package/docs/AI-GUIDE.md

@@ -2,8 +2,42 @@
 
 适用于 Vue 3 + TypeScript。此文件描述包的真实 API 和约束，不是自动执行的代理指令。AI 工具需要主动读取这些文档；安装包不会自动改变其上下文。
 
+预览站已移除“统一组件入口 / 组件入口与兼容”菜单与展示示例。安装和导入方式查看快速开始，组件效果查看各组件页面；此调整不改变组件包出口或 API。
+
+项目选择与时间展示为 AppSelect、TreeSelectPanel、TimeRangeQuickSelect、MapTimeline 分别提供查看代码与复制入口；各自代码从 src/examples.ts 同步生成，使用 sky-ui-kit 公开封装组件，包含状态与 change 事件处理。
+
+四个项目选择与时间组件分别由 AppSelectPreview.vue、TreeSelectPreview.vue、TimeRangePreview.vue、MapTimelinePreview.vue 展示。每个组件有独立卡片、导航锚点、状态和查看代码入口，不再使用 ProjectComponents 合并展示。
+
+分割线、链接、间距和文本均有独立效果页与完整复制代码。示例由对应 Demo.vue 原始源码生成，保留属性、默认插槽、链接图标与点击反馈；业务导航由应用接入，UiSpace 不新增业务事件。
+
+表单 UiForm / UiFormItem 提供测站配置独立示例，包含 model、rules、validate、resetFields、禁用状态、输入/选择/日期/数字/单选/多选/开关及文本域。FormDemo.vue 同步生成复制代码；提交仅显示本地数据，实际请求由应用接入。
+
+UiAutocomplete 提供独立站点搜索示例：fetch-suggestions 回调、聚焦建议、仅输入触发、图标、自定义建议插槽、选择/清空事件及禁用状态。原项目静态扫描未发现自动补全调用，此为站点搜索场景建议，非原页面复刻。AutocompleteDemo 源码同步生成网站复制代码与本文。
+
+预览左侧菜单不再单列“表单组件”，其组件入口合并到“基础组件”；组件、子组件关系、示例和公开 API 保留。底层组件目录元数据仍保留原分类，导航使用合并显示。
+
+选择、时间、级联、颜色、日期、数字、标签、验证码、评分、输入和折叠动画入口提供各自独立 Demo 与代码，不再只展示导入语句。示例演示本地状态和 change 反馈，实际请求由应用接入；面板使用对应 Panel 组件。
+
+已完成的基础及表单控件示例常驻同一长页面，每项独立展示、独立状态、独立代码入口；菜单点击滚动定位，避免复用顶部单一展示区。尚未完成的组件保留 API 索引入口。
+
+时间下拉选择、穿梭框、树选择器、上传、提及也有常驻独立示例与复制代码。上传演示使用 auto-upload=false，只处理本地文件选择/移除/数量限制，真实上传通过应用 http-request 接入；不虚构服务器上传成功。
+
+数据展示、导航、反馈、其他配置的主组件与服务/指令连续展示独立示例，子组件在父组件组合中展示，菜单定位父示例。UiPopper 是底层定位出口，页面通过 UiPopover 展示使用场景，不宣称提供完整底层交互示例。全部示例从 CatalogDemo 源码生成复制代码。
+
+项目 SVG 图标菜单定位到图标页面内的 SvgIcon 独立锚点，不再跳到 UiIcon 通用入口；两个菜单的 hash 分开，保持项目图标选择状态。
+
 ## 文档读取顺序
 
+安装或升级最新正式版使用 `npm install sky-ui-kit@latest`。latest 指向 npm 的正式发布标签，尚未发布的源码修改不在安装包内；依据当前已安装包的版本和文档使用组件。
+
+团队先读取 llms.txt，并结合 AI-CHANGELOG.md 了解模块变更及接入影响。后续所有代码、预览页面、样式和接入说明修改均同步相关 AI 文档，并运行 npm run docs:ai；快速开始代码与页面使用同一份源文件生成。
+
+预览站导航按“使用指南 / 团队专用组件 / 项目特色组件”分区；团队专用组件基于 Element Plus 封装。一级分类使用手风琴展开，二级列出主组件，结构子组件收在对应主组件下并可单独展开。搜索子组件时保留父组件上下文，选择后自动展开所在分类及父组件。
+
+预览站目录支持中文 / Ui 名称 / El 名称搜索及分类折叠。Element Plus 全部标准组件、服务和指令入口来自 src/element-plus-catalog.ts，每项提供导入名称与官方 API 索引；完整分类见 ELEMENT-PLUS-COVERAGE.md。API 索引不代表该组件已具备独立交互示例。“待补充”用于尚无页面的指南入口。SiteNavigation 仅用于预览网站，不属于组件包公开 API。
+
+基础层基准为 Element Plus 2.14.7，项目特色组件保留原名。结构子组件放在对应 Ui 父组件内部，不独立提供主题边界。UiLoading 使用 service(options) / directive，不提供 install；vUiInfiniteScroll、vUiPopover 保留官方指令语义。不要将内部工具函数作为 Ui 组件导入。
+
 1. llms.txt：入口和文档索引。
 2. components.json：完整公开组件、服务和指令清单；项目组件属性、事件、插槽、默认表达式。
 3. COMPONENT-API.md：项目组件精确 API 与类型定义。
@@ -12,6 +46,8 @@
 
 ## 生成代码的规则
 
+- 滚动条直接 `import { ElScrollbar } from 'element-plus'`，不定义 UiScrollbar 或从 sky-ui-kit 导入滚动条。预览目录保留滚动条入口以索引官方 API；它没有库包装层，样式取决于已有应用主题范围。
+
 - 在 main.ts 只引入一次 element-plus/dist/index.css 和 sky-ui-kit/style.css。
 - 按需从 sky-ui-kit 导入组件，不需要库主题 store、Pinia 或全局插件注册。项目已有插件注册继续保留。
 - style.css 默认隔离；global.css 是主动整站换肤入口，不能默认添加。
@@ -23,9 +59,39 @@
 - MapTools 的 context-change 返回布尔值；当前没有外部受控右键状态 prop，不要虚构 v-model:contextEnabled。
 - AtlasRightToggleButton 使用 open + toggle；不是 v-model:open。TreeSelectPanel 的 select 参数为 node, category，change 参数为 { node, category }。
 - MapTimeline 的 modelValue 是索引；change 返回 TimelinePoint。不要把日期字符串传给 modelValue。
-- 本包并不覆盖 Element Plus 全部组件。components.json 不存在的 Ui 名称不能假定可导入，例如链接和面包屑可直接导入 Element Plus。
+- 标准层覆盖基准版本的官方组件、服务与指令；以 components.json 核对实际出口，不假定导出内部工具或未来版本组件。链接与面包屑使用 UiLink / UiBreadcrumb / UiBreadcrumbItem。
 - 保留项目现有业务代码和注释，先局部迁移核对，不能用组件示例替换整个业务页面。
 
+## 按钮独立示例
+
+## 布局容器与目录
+
+布局容器及其四个子组件统一显示完整布局页；目录新增“地图业务布局”子项，直接定位 project-template-layout 示例。
+
+TemplateLayoutPreview 独立说明地图业务布局，TemplateLayoutDemo 提供可操作右栏、时间轴及避让轮廓；组合示例使用库按钮与应用侧 CSS，不假定 sky-ui-kit 导出 TemplateLayout。原地图实例、ui store、工具栏、图层和主题弹窗仍由应用维护。
+
+布局容器先展示顶栏、左侧栏、主体、底栏齐全的整体布局及代码，再依此顺序展示四个区域。整体示例 fullLayoutExample 同步网站和 AI 文档。
+
+点击任何布局子组件均同时显示侧栏、顶栏、底栏、主体四个独立示例，菜单定位各自锚点。演示使用明确外框、区域虚线和主色高亮；包装组件转发 class 时预览局部样式通过原生外框与 :deep 选择器匹配。示意边框为展示样式。
+
+UiAside、UiHeader、UiFooter、UiMain 的目录入口分别提供实际布局效果与独立可复制代码，由 ContainerPartPreview 展示；使用 UiContainer 保留上下文，分别演示 width、height 和主体剩余空间。结构组件无新增业务事件，使用默认插槽放置内容。
+
+全局融合以 GLOBAL-ADAPTATION.md 为准：原 main.ts VFit 1920×912 auto → App.vue 根 --cp-vfit-scale → cp 尺寸 token → 原 theme store 与布局 → 库组件。保留原 VFit 注册、两个 watch、高度链、中文 locale 和业务地图样式；库不注册 VFit，也不接管 resize。不要额外叠加 transform/zoom。布局页与下方生成代码共用 global-adaptation-examples.ts；body 浮层、地图/图表 resize 和窄屏重排由应用处理。
+
+布局示例共六种：系统侧栏、无菜单整宽、地图浮动、横向导航、双侧栏、上下分区。后三种由 LayoutVariants 演示，菜单切换、信息栏和过程区可操作，完整代码自动同步到本文。系统/无菜单/地图布局对应原项目，双侧栏和普通上下分区是组合建议，不宣称原项目已使用相同容器实现；Footer 为可选状态或过程区域。
+
+布局容器新增 BusinessLayoutExamples：系统页菜单切换、测站筛选与表格、无菜单整宽页，以及地图菜单/工具/图例/时间轴/测站面板组合。菜单、工具、测站与时间轴事件展示反馈；右面板开关改变工具和时间轴避让。可复制代码直接来自预览组件源码，AI 示例同步生成。业务地图宿主为示意背景，不接地图或请求；图例阈值颜色为业务示例，不作为通用主题变量。
+
+左侧移除 UiRow / UiCol（栅格行 / 栅格列）入口，仅调整预览目录，已有公开 API 保留。UiContainer 页面参考原项目 MainLayout、ContentLayoutSystem、MainLayoutMap、ContentLayoutMap、ContentLayoutNomenu 与 TemplateLayout，提供系统管理布局、地图浮动布局、侧栏收起和右面板避让示例；containerExample 为可复制基础容器示例，滚动直接使用 ElScrollbar。地图示意不创建地图实例。
+
+TemplateLayout 仍由原项目维护，不是 sky-ui-kit 出口；实际 props 为 rightPanelWidth / rightPanelDefaultOpen / rightPanelEnabled。插槽 top / toolbar / right / legend / timeline / content / right-toggle / map-toolbar-info，right-toggle 提供 open / toggle。地图、图层、区域定位、ui store、RouterView、权限和监听释放保留应用侧。部分原页面传 timeline-visible，但当前 TemplateLayout 没声明该 prop，实际时间轴依据 timeline 插槽是否存在；不要将它写入库 API。
+
+原地图布局为底层地图 + pointer-events:none 的覆盖层，只有工具、图例、面板恢复交互；迁移时保留该规则，避免透明层挡住地图。尺寸继承 --header-height / --sidebar-width / --rightpanel-width / --layout-gutter 和 VFit 变量；容器高度链及 min-width/min-height:0 要核对。
+
+## 按钮效果
+
+UiButton 页面提供语义色、plain、round、text/bg/link、图标/circle、尺寸、disabled/loading 和可结束的模拟保存。源例 buttonModuleExample 与下方生成代码同步。点击事件由应用处理，真实请求在 finally 中恢复 loading；纯图标按钮提供 aria-label。主题只来自已有变量，不增加业务请求或权限行为。
+
 ## 默认样式
 
 明亮六色：#ffffff / #1f2937 / #1677ff / #dbe3ef99 / #ffffffd9 / #ffffff。
@@ -40,9 +106,401 @@
 ## 主题与业务示例
 
 以下完整代码由预览站示例生成；公共入口完成后，各页面不重复引入 CSS。
-
+
+## 图标模块
+
+自有 SVG 必须按下方“图标安装 / Vite 配置 / 入口注册 / 页面配置”完成接入：安装 vite-plugin-svg-icons，合并 Vite plugins，在 main.ts 导入 virtual:svg-icons-register，SvgIcon 传 prefix="icon-"。新项目推荐 icon-[dir]-[name]；原项目已配置 icon-[name]，迁移首轮保留规则。库内置资源自动注册不需要该插件。两种来源不能混淆。
+
+## 原项目使用依据与适配
+
+COMPONENT-USAGE.md / component-usage.json 为 2026-10-12 只读扫描结果，覆盖 590 个 Vue / TS / JS 文件、57 种 EP 模板组件、3 种显式服务导入和 56 个公共 Vue 组件。频次是引用文件数；动态、别名、自动注册和间接调用可能漏计。含原工作区未提交源码，仅作为参考。ADAPTATION.md 给出逐模块方案、业务边界、SVG 路由转换、依赖、主题、VFit、浮层和验证顺序。原项目接入页展示当前清单与方案，不再是占位页。
+
+生成业务替换代码前先核对 COMPONENT-USAGE.md 的原路径和 ADAPTATION.md：基础 Ui 成组迁移；common 组件沿用实际 props/events；菜单/地图工具经应用薄适配层接路由、权限、请求；TableLayout、图表、图层、图例、用户权限等尚未公开的组件仍留在应用。原项目 EP 声明 ^2.14.2 不代表实际安装低于 2.14.7，检查 lockfile 与已安装版本再决定升级。
+
+UiIcon 保留 ElIcon 的 size、color、默认插槽；通用图标从 @element-plus/icons-vue 导入。SvgIcon 是项目 SVG 组件，274 个内置图标来自原项目 src/assets/icons。projectIcons 提供 name、category、source、followsColor、svg 清单；ProjectIconName 是内置名称类型。内置图标在挂载及名称变化时按需注册，无需使用方安装 Vite SVG 插件。registerProjectIcons(names?, document?) 可显式注册指定名称，不传 names 注册全部；SSR 导入安全，SVG sprite 在客户端创建。
+
+SvgIcon 保留 name、size、title、decorative，新增 color 和 prefix。默认 prefix 为 sky-icon-，防止与原项目 icon- 冲突；原项目已有 sprite 或使用方自定义 sprite 可传 prefix="icon-"。此时资源注册由使用方负责，库不覆盖图标。数字尺寸按 --cp-font-1（默认 1px）缩放。属性及原生事件透传 SVG，无内容插槽。未知名称不显示图形。固定色和多色 SVG 保留原配色，color 只影响使用 currentColor 的路径。子目录图标采用目录前缀（如 threeDivision-measure），以 projectIcons 清单为准。
+
+菜单和工具栏的 icon 属性仍接收 Vue 组件，项目图标可用 () => h(SvgIcon, { name: 'ii_rain' }) 绑定。不要把项目名称字符串直接传给 Element Plus 的 icon 属性。地图点位 PNG、Logo 等业务图片未纳入 SVG 组件。
+
+维护 SVG 快照：node scripts/sync-project-icons.mjs "原项目/src/assets/icons"，仅只读读取参考项目；生成后核对重复名称与配色并运行 npm run docs:ai。
+
 <!-- GENERATED EXAMPLES -->
 
+### 快速开始：安装最新正式版本
+
+```sh
+# 安装或升级到 npm 已发布的最新正式版本
+npm install sky-ui-kit@latest
+
+# 项目缺少这些依赖时再安装（Vue 3 项目）
+npm install "element-plus@^2.14.7" @element-plus/icons-vue motion-v
+```
+
+### 快速开始：公共入口
+
+```ts
+// main.ts：公共样式只引入一次
+import { createApp } from 'vue'
+import App from './App.vue'
+import 'element-plus/dist/index.css'
+import 'sky-ui-kit/style.css'
+
+// 已有项目保留原插件注册、路由和挂载逻辑
+createApp(App).mount('#app')
+```
+
+### 快速开始：首个组件
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, AppSelect, UiMessage } from 'sky-ui-kit'
+const station = ref('hankou')
+const options = [
+  { label: '汉口站', value: 'hankou' },
+  { label: '宜昌站', value: 'yichang' }
+]
+function confirm() { UiMessage.success('当前站点：' + station.value) }
+</script>
+<template>
+  <AppSelect v-model="station" :options="options" />
+  <UiButton type="primary" @click="confirm">确认选择</UiButton>
+</template>
+```
+
+### 快速开始：团队 AI 读取提示
+
+```text
+请先读取 node_modules/sky-ui-kit/llms.txt，并按索引读取：
+- components.json：当前已安装版本的公开组件与 API 清单
+- docs/AI-GUIDE.md：使用规则和完整示例
+- docs/AI-CHANGELOG.md：模块变更及接入影响
+- docs/COMPONENT-API.md：属性、事件、插槽与类型
+- docs/CSS-THEME.md：主题变量、样式隔离与浮层限制
+- docs/INTEGRATION.md：原项目替换和业务接线
+- docs/COMPONENT-USAGE.md：原项目实际使用的组件与调用位置
+- docs/ADAPTATION.md：逐模块替换、Vite 图标配置、主题及业务适配方案
+
+请依据当前已安装包的版本与文档生成代码，不要虚构组件名称或 API。
+公共 CSS 仅在 main.ts 引入一次；业务请求、路由、权限由应用接入。
+```
+
+### 图标安装：内置与自有资源
+
+```sh
+# 仅使用库内置 SVG：安装组件库即可
+npm install sky-ui-kit@latest
+
+# 项目要维护自己的 src/assets/icons/*.svg 时，再安装 Vite 插件
+npm install -D vite-plugin-svg-icons
+```
+
+### 自有 SVG：Vite 配置
+
+```js
+// vite.config.js / vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import path from 'node:path'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    // 合并到现有 plugins；保留原来的自动导入、代理、别名等配置。
+    createSvgIconsPlugin({
+      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+      symbolId: 'icon-[dir]-[name]',
+      svgoOptions: false,
+    }),
+  ],
+})
+```
+
+### 自有 SVG：入口注册
+
+```ts
+// main.ts：各资源只引入一次；保留原路由、Pinia、VFit 等注册。
+import 'virtual:svg-icons-register'
+import 'element-plus/dist/index.css'
+import 'sky-ui-kit/style.css'
+// TypeScript 虚拟模块声明放在 src/vite-env.d.ts，见下一段。
+```
+
+### 自有 SVG：TypeScript 虚拟模块声明
+
+```ts
+// src/vite-env.d.ts：已有文件追加此声明，不覆盖原有声明。
+declare module 'virtual:svg-icons-register'
+```
+
+### 自有 SVG：页面配置
+
+```vue
+<script setup lang="ts">
+import { SvgIcon } from 'sky-ui-kit'
+</script>
+<template>
+  <!-- 库内置图标：自动注册，无需 Vite SVG 插件 -->
+  <SvgIcon name="ii_rain" size="24px" />
+  <!-- 使用方 src/assets/icons/company.svg -->
+  <SvgIcon name="company" prefix="icon-" size="24px" />
+  <!-- 使用方 src/assets/icons/weather/rain.svg -->
+  <SvgIcon name="weather-rain" prefix="icon-" title="降水" :decorative="false" />
+</template>
+```
+
+### 原项目 SVG 命名适配
+
+```js
+// 原业务项目已有配置：保留即可，无需重复安装和注册。
+createSvgIconsPlugin({
+  iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+  symbolId: 'icon-[name]',
+  svgoOptions: false,
+})
+
+// 替换原 SvgIcon 的 import 后，原 sprite 用 prefix="icon-"：
+// <SvgIcon name="ii_rain" prefix="icon-" />
+// 若切换为库内置图标：<SvgIcon name="ii_rain" />
+// 新项目推荐 icon-[dir]-[name]，同名子目录不会冲突。
+// 旧项目改命名规则前必须检查所有 name 和路由 meta.icon。
+```
+
+### 全局适配：fitBridgeExample
+
+```ts
+// 原项目 App.vue 已有这段桥接，直接保留。
+import { watch, onBeforeUnmount } from 'vue'
+import { useFitScale } from 'vfit'
+import { useThemeStore } from '@/stores/theme'
+const fitScale = useFitScale()
+const theme = useThemeStore()
+const stopScaleWatch = watch(fitScale, scale => {
+  document.documentElement.style.setProperty('--cp-vfit-scale', String(scale))
+}, { immediate: true })
+const stopThemeWatch = watch(() => theme.$state, () => theme.applyCssVars(), {
+  immediate: true, deep: true,
+})
+onBeforeUnmount(() => {
+  stopScaleWatch()
+  stopThemeWatch()
+  document.documentElement.style.removeProperty('--cp-vfit-scale')
+})
+```
+
+### 全局适配：fitEntryExample
+
+```ts
+// 原项目 main.ts 已配置，融合时保留，不重复 app.use。
+import { createFitScale } from 'vfit'
+import 'vfit/style.css'
+import 'element-plus/dist/index.css'
+import './styles/theme.css'
+import './styles/base.css'
+import 'sky-ui-kit/style.css'
+
+// 放在现有 app 注册链中；路由和 Pinia 等注册保留。
+app.use(createFitScale({
+  target: '#app',
+  designWidth: 1920,
+  designHeight: 912,
+  scaleMode: 'auto',
+}))
+```
+
+### 全局适配：fitLayoutExample
+
+```css
+/* 应用侧布局样式；全局 reset 仍留在原 base.css。 */
+html, body, #app { height: 100%; margin: 0; }
+.app-shell { height: 100%; min-width: 0; overflow: hidden; }
+.workspace {
+  position: relative;
+  height: calc(100% - var(--header-height, calc(58px * var(--cp-vfit-scale, 1))));
+  min-width: 0;
+  min-height: 0;
+}
+.page-content { min-width: 0; min-height: 0; overflow: hidden; }
+.business-panel {
+  width: var(--rightpanel-width, calc(320px * var(--cp-vfit-scale, 1)));
+  padding: var(--layout-gutter, calc(10px * var(--cp-vfit-scale, 1)));
+  font-size: var(--font-size-body, calc(14px * var(--cp-vfit-scale, 1)));
+}
+/* 不再对这些已消费缩放变量的组件添加第二套 transform:scale / zoom。 */
+```
+
+### UiAsideExample
+
+```vue
+<script setup lang="ts">
+import { UiContainer, UiAside, UiHeader, UiFooter, UiMain } from 'sky-ui-kit'
+</script>
+<template>
+  <UiContainer direction="horizontal" class="layout-demo">
+    <UiAside width="160px" class="focus-region">业务菜单</UiAside>
+    <UiMain>内容区域</UiMain>
+  </UiContainer>
+</template>
+<style scoped>
+.layout-demo { height: 240px; border: 2px solid var(--color-border, #c5d2e5); border-radius: 8px; overflow: hidden; }
+.layout-demo :deep(.el-main), .layout-demo :deep(.el-aside), .layout-demo :deep(.el-header), .layout-demo :deep(.el-footer) { display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px dashed var(--color-border, #c5d2e5); padding: 16px; }
+.layout-demo :deep(.focus-region) { color: var(--color-primary, #1677ff); background: color-mix(in srgb, var(--color-primary, #1677ff) 14%, var(--color-panel, white)); border: 2px solid var(--color-primary, #1677ff); font-weight: 700; }
+</style>
+```
+
+### UiFooterExample
+
+```vue
+<script setup lang="ts">
+import { UiContainer, UiAside, UiHeader, UiFooter, UiMain } from 'sky-ui-kit'
+</script>
+<template>
+  <UiContainer direction="vertical" class="layout-demo">
+    <UiMain>内容区域</UiMain>
+    <UiFooter height="48px" class="focus-region">状态与辅助信息</UiFooter>
+  </UiContainer>
+</template>
+<style scoped>
+.layout-demo { height: 240px; border: 2px solid var(--color-border, #c5d2e5); border-radius: 8px; overflow: hidden; }
+.layout-demo :deep(.el-main), .layout-demo :deep(.el-aside), .layout-demo :deep(.el-header), .layout-demo :deep(.el-footer) { display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px dashed var(--color-border, #c5d2e5); padding: 16px; }
+.layout-demo :deep(.focus-region) { color: var(--color-primary, #1677ff); background: color-mix(in srgb, var(--color-primary, #1677ff) 14%, var(--color-panel, white)); border: 2px solid var(--color-primary, #1677ff); font-weight: 700; }
+</style>
+```
+
+### UiHeaderExample
+
+```vue
+<script setup lang="ts">
+import { UiContainer, UiAside, UiHeader, UiFooter, UiMain } from 'sky-ui-kit'
+</script>
+<template>
+  <UiContainer direction="vertical" class="layout-demo">
+    <UiHeader height="56px" class="focus-region">顶部导航</UiHeader>
+    <UiMain>内容区域</UiMain>
+  </UiContainer>
+</template>
+<style scoped>
+.layout-demo { height: 240px; border: 2px solid var(--color-border, #c5d2e5); border-radius: 8px; overflow: hidden; }
+.layout-demo :deep(.el-main), .layout-demo :deep(.el-aside), .layout-demo :deep(.el-header), .layout-demo :deep(.el-footer) { display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px dashed var(--color-border, #c5d2e5); padding: 16px; }
+.layout-demo :deep(.focus-region) { color: var(--color-primary, #1677ff); background: color-mix(in srgb, var(--color-primary, #1677ff) 14%, var(--color-panel, white)); border: 2px solid var(--color-primary, #1677ff); font-weight: 700; }
+</style>
+```
+
+### UiMainExample
+
+```vue
+<script setup lang="ts">
+import { UiContainer, UiAside, UiHeader, UiFooter, UiMain } from 'sky-ui-kit'
+</script>
+<template>
+  <UiContainer direction="horizontal" class="layout-demo">
+    <UiAside width="120px">侧栏</UiAside>
+    <UiMain  class="focus-region">页面内容</UiMain>
+  </UiContainer>
+</template>
+<style scoped>
+.layout-demo { height: 240px; border: 2px solid var(--color-border, #c5d2e5); border-radius: 8px; overflow: hidden; }
+.layout-demo :deep(.el-main), .layout-demo :deep(.el-aside), .layout-demo :deep(.el-header), .layout-demo :deep(.el-footer) { display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px dashed var(--color-border, #c5d2e5); padding: 16px; }
+.layout-demo :deep(.focus-region) { color: var(--color-primary, #1677ff); background: color-mix(in srgb, var(--color-primary, #1677ff) 14%, var(--color-panel, white)); border: 2px solid var(--color-primary, #1677ff); font-weight: 700; }
+</style>
+```
+
+### appSelectExample
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { AppSelect } from 'sky-ui-kit'
+const selected = ref('hankou')
+const multiple = ref(['hankou'])
+const options = [{ label: '汉口站', value: 'hankou' }, { label: '宜昌站', value: 'yichang' }, { label: '维护中的站点', value: 'disabled', disabled: true }]
+const message = ref('尚未操作')
+// 将事件接入应用自己的查询或地图逻辑。
+</script>
+<template>
+  <AppSelect v-model="selected" :options="options" filterable clearable placeholder="搜索站点" @change="message = '单选：' + String($event)" />
+  <AppSelect v-model="multiple" :options="options" multiple collapse-tags placeholder="选择多个站点" @change="message = '多选：' + String($event)" />
+  <AppSelect model-value="hankou" :options="options" disabled />
+  <AppSelect :options="[]" placeholder="暂无可选站点" />
+  <p role="status">{{ message }}</p>
+</template>
+```
+
+### buttonModuleExample
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Search, Plus, Download, Delete } from '@element-plus/icons-vue'
+import { UiButton } from 'sky-ui-kit'
+const saving = ref(false)
+const message = ref('尚未操作')
+function save() { saving.value = true; message.value = '正在保存' }
+function finish() { saving.value = false; message.value = '保存完成' }
+</script>
+<template>
+  <UiButton @click="message = '取消'">取消</UiButton>
+  <UiButton type="primary" :icon="Search" @click="message = '查询'">查询</UiButton>
+  <UiButton type="success" plain>确认</UiButton>
+  <UiButton type="warning">提醒</UiButton>
+  <UiButton type="info">详情</UiButton>
+  <UiButton type="primary" plain>主色描边</UiButton>
+  <UiButton type="primary" round>圆角按钮</UiButton>
+  <UiButton type="primary" text>文字操作</UiButton>
+  <UiButton type="primary" text bg>文字带背景</UiButton>
+  <UiButton type="primary" link>查看详情</UiButton>
+  <UiButton :icon="Plus" @click="message = '新增'">新增</UiButton>
+  <UiButton :icon="Download" @click="message = '导出'">导出</UiButton>
+  <UiButton type="danger" :icon="Delete" circle aria-label="删除记录" @click="message = '删除'" />
+  <UiButton size="small">小按钮</UiButton><UiButton>默认按钮</UiButton><UiButton size="large">大按钮</UiButton>
+  <UiButton disabled>禁用</UiButton><UiButton type="primary" disabled>禁用主按钮</UiButton>
+  <UiButton loading>加载中</UiButton>
+  <UiButton type="primary" :loading="saving" @click="save">保存配置</UiButton>
+  <UiButton :disabled="!saving" @click="finish">完成模拟保存</UiButton>
+  <p role="status">{{ message }}</p>
+</template>
+```
+
+### completeElementPlusExample
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { DataAnalysis, Location } from '@element-plus/icons-vue'
+import { UiAvatar, UiBreadcrumb, UiBreadcrumbItem, UiButton, UiCarousel, UiCarouselItem, UiIcon, UiInputTag, UiMenu, UiMenuItem, UiSegmented, UiSkeleton, UiSpace, UiStatistic, UiStep, UiSteps, UiSubMenu, UiText, UiTimeline, UiTimelineItem, UiTimePicker } from 'sky-ui-kit'
+const menu = ref('stations')
+const segment = ref('实况')
+const tags = ref(['汉口站', '宜昌站'])
+const time = ref<Date>()
+const step = ref(1)
+</script>
+<template>
+  <UiMenu :default-active="menu" @select="menu = $event">
+    <UiMenuItem index="stations"><UiIcon><Location /></UiIcon><span>站点管理</span></UiMenuItem>
+    <UiSubMenu index="analysis">
+      <template #title><UiIcon><DataAnalysis /></UiIcon><span>数据分析</span></template>
+      <UiMenuItem index="rain">降雨分析</UiMenuItem>
+      <UiMenuItem index="flow">径流分析</UiMenuItem>
+    </UiSubMenu>
+  </UiMenu>
+  <p>菜单选择事件：{{ menu }}</p>
+  <UiBreadcrumb separator="/"><UiBreadcrumbItem>监测中心</UiBreadcrumbItem><UiBreadcrumbItem>站点管理</UiBreadcrumbItem></UiBreadcrumb>
+  <UiSegmented v-model="segment" :options="['实况', '预报', '历史']" />
+  <p>当前模式：{{ segment }}</p>
+  <UiInputTag v-model="tags" placeholder="添加站点标签" />
+  <UiTimePicker v-model="time" placeholder="选择观测时间" />
+  <UiSteps :active="step" finish-status="success"><UiStep title="选择数据" /><UiStep title="配置分析" /><UiStep title="查看结果" /></UiSteps>
+  <UiButton @click="step = (step + 1) % 4">下一步</UiButton>
+  <UiTimeline><UiTimelineItem timestamp="08:00" type="primary">接收观测数据</UiTimelineItem><UiTimelineItem timestamp="09:00" type="success">完成质量检查</UiTimelineItem><UiTimelineItem timestamp="10:00">生成分析结果</UiTimelineItem></UiTimeline>
+  <UiSpace><UiAvatar>水</UiAvatar><UiText type="primary">实时监测</UiText></UiSpace>
+  <UiStatistic title="正常站点" :value="128" />
+  <UiSkeleton :rows="2" animated />
+  <UiCarousel height="100px" :autoplay="false"><UiCarouselItem v-for="label in ['实时监测', '趋势分析', '预报产品']" :key="label"><div style="display: grid; place-items: center; height: 100%">{{ label }}</div></UiCarouselItem></UiCarousel>
+</template>
+```
+
 ### componentsExample
 
 ```vue
@@ -74,6 +532,107 @@ const ranges = [{ key: '1h', label: '近1小时' }, { key: '24h', label: '近24
 <!-- 这些组件保留 v-model 交互；可通过 @change 接收值变化。 -->
 ```
 
+### containerExample
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElScrollbar } from 'element-plus'
+import { UiContainer, UiHeader, UiAside, UiMain, UiButton } from 'sky-ui-kit'
+const collapsed = ref(false)
+</script>
+<template>
+  <UiContainer direction="vertical" class="app-layout">
+    <UiHeader height="var(--header-height, 58px)">应用导航</UiHeader>
+    <UiContainer>
+      <UiAside :width="collapsed ? '64px' : 'var(--sidebar-width, 244px)'">业务菜单</UiAside>
+      <UiMain>
+        <UiButton @click="collapsed = !collapsed">切换侧栏</UiButton>
+        <ElScrollbar height="200px"><p v-for="index in 10" :key="index">页面内容 {{ index }}</p></ElScrollbar>
+        <!-- 业务项目可在此放 RouterView，保留自己的路由和权限。 -->
+      </UiMain>
+    </UiContainer>
+  </UiContainer>
+</template>
+<style scoped>
+.app-layout { min-height: 300px; color: var(--color-text, #1f2937); background: var(--color-panel, white); }
+.app-layout :deep(.el-main) { min-width: 0; min-height: 0; }
+.app-layout :deep(.el-header), .app-layout :deep(.el-aside) { background: var(--surface-control, #eef5ff); }
+</style>
+```
+
+### fullLayoutExample
+
+```vue
+<script setup lang="ts">
+import { UiContainer, UiHeader, UiAside, UiMain, UiFooter } from 'sky-ui-kit'
+</script>
+<template>
+  <UiContainer direction="vertical" class="full-layout">
+    <UiHeader height="56px">顶栏 · 顶部导航</UiHeader>
+    <UiContainer class="content-row">
+      <UiAside width="160px">左侧栏 · 业务菜单</UiAside>
+      <UiMain>主体 · 页面内容</UiMain>
+    </UiContainer>
+    <UiFooter height="48px">底栏 · 状态信息</UiFooter>
+  </UiContainer>
+</template>
+<style scoped>
+.full-layout { height: 320px; border: 2px solid var(--color-border, #c5d2e5); border-radius: 8px; overflow: hidden; }
+.full-layout :deep(.content-row) { flex: 1; min-height: 0; }
+.full-layout :deep(.el-header), .full-layout :deep(.el-footer), .full-layout :deep(.el-aside), .full-layout :deep(.el-main) { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--color-border, #c5d2e5); box-sizing: border-box; }
+.full-layout :deep(.el-header), .full-layout :deep(.el-footer) { background: color-mix(in srgb, var(--color-primary, #1677ff) 14%, var(--color-panel, white)); }
+.full-layout :deep(.el-aside) { background: var(--color-surface, #f4f7fb); }
+.full-layout :deep(.el-main) { background: var(--color-panel, white); }
+</style>
+```
+
+### iconsExample
+
+```vue
+<script setup lang="ts">
+import { ref, h } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import { UiIcon, UiButton, SvgIcon, MapSideMenu } from 'sky-ui-kit'
+const active = ref('rain')
+const message = ref('尚未操作')
+// 菜单 icon 接收 Vue 组件，用 h 绑定项目 SVG 名称。
+const RainIcon = () => h(SvgIcon, { name: 'ii_rain' })
+const items = [{ key: 'rain', label: '降水', icon: RainIcon }]
+</script>
+<template>
+  <UiIcon :size="24" color="var(--color-primary, #1677ff)"><Search /></UiIcon>
+  <SvgIcon name="ii_rain" :size="24" :decorative="false" title="降水" />
+  <UiButton :icon="Search" @click="message = '搜索事件由业务方处理'">搜索</UiButton>
+  <UiButton @click="message = '查看降水'"><SvgIcon name="ii_rain" />查看降水</UiButton>
+  <UiButton disabled :icon="Search">不可用</UiButton>
+  <UiButton loading>加载中</UiButton>
+  <MapSideMenu v-model:active="active" :items="items" @select="message = '选择：' + $event.label" />
+  <p role="status">{{ message }}</p>
+</template>
+```
+
+### mapTimelineExample
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MapTimeline } from 'sky-ui-kit'
+const frame = ref(6)
+const playing = ref(false)
+const message = ref('尚未操作')
+// 将事件接入应用自己的查询或地图逻辑。
+</script>
+<template>
+  <MapTimeline v-model="frame" v-model:playing="playing"
+    start-time="2026-10-08T08:00:00+08:00" time-zone="Asia/Shanghai"
+    :past-steps="6" :future-steps="12" :page-size="18"
+    @change="message = '当前时间：' + $event.label" />
+  <p>当前帧：{{ frame }} · {{ playing ? '播放中' : '已暂停' }}</p>
+  <p role="status">{{ message }}</p>
+</template>
+```
+
 ### mapToolsExample
 
 ```vue
@@ -165,3 +724,2126 @@ function onSelect(item: { key: string; label: string }) {
 <!-- 纵向菜单在每个菜单项的 icon 位置渲染图标；横向菜单为文字样式。 -->
 <!-- MapSideMenu 的搜索、分组收起和图标模式切换由组件内部完成。 -->
 ```
+
+### timeRangeExample
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TimeRangeQuickSelect } from 'sky-ui-kit'
+const range = ref('24h')
+const options = [{ key: '1h', label: '近1小时' }, { key: '24h', label: '近24小时' }, { key: '3d', label: '近3天' }, { key: '7d', label: '近7天' }]
+const message = ref('尚未操作')
+// 将事件接入应用自己的查询或地图逻辑。
+</script>
+<template>
+  <TimeRangeQuickSelect v-model="range" :options="options" @change="message = '切换范围：' + $event.label" />
+  <p>当前范围：{{ range }}</p>
+  <p role="status">{{ message }}</p>
+</template>
+```
+
+### treeSelectExample
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TreeSelectPanel } from 'sky-ui-kit'
+const region = ref<string | number | null>('hubei')
+const dark = ref(false)
+const categories = [
+  { type: 'region', label: '行政区', children: [{ id: 'hubei', label: '湖北省', children: [{ id: 'wuhan', label: '武汉市', tag: '市' }] }, { id: 'hunan', label: '湖南省' }] },
+  { type: 'basin', label: '流域', children: [{ id: 'yangtze', label: '长江流域', children: [{ id: 'dongting', label: '洞庭湖', tag: '湖区' }] }] }
+]
+const message = ref('尚未操作')
+// 将事件接入应用自己的查询或地图逻辑。
+</script>
+<template>
+  <TreeSelectPanel v-model="region" :categories="categories" :dark="dark" close-on-select
+    @change="message = $event.category.label + '：' + $event.node.label" />
+  <p>当前节点：{{ region }}</p>
+  <p role="status">{{ message }}</p>
+</template>
+```
+
+### 完整项目布局组合示例
+
+```vue
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { ElScrollbar } from 'element-plus'
+import { UiContainer, UiHeader, UiAside, UiMain, UiButton, UiInput, UiTable, UiTableColumn, ProjectMenu, MapSideMenu, MapTools, MapTimeline, SvgIcon } from 'sky-ui-kit'
+const page = ref('stations')
+const collapsed = ref(false)
+const keyword = ref('')
+const rightOpen = ref(true)
+const activeLayer = ref('rain')
+const tool = ref('layers')
+const frame = ref(0)
+const message = ref('请选择菜单或工具')
+const navigation = [{ key: 'stations', label: '测站管理' }, { key: 'users', label: '用户管理' }]
+const layers = [{ key: 'rain', label: '降水' }, { key: 'water', label: '水位' }]
+const rows = [{ name: '汉口站', region: '长江流域', value: 28.6 }, { name: '宜昌站', region: '长江流域', value: 42.3 }, { name: '城陵矶站', region: '洞庭湖流域', value: 16.8 }]
+const filtered = computed(() => rows.filter(row => `${row.name}${row.region}`.includes(keyword.value)))
+const startTime = '2026-10-12T00:00:00+08:00'
+</script>
+<template>
+  <h3>项目系统页：导航、查询与数据列表</h3>
+  <UiContainer direction="vertical" class="business-system">
+    <UiHeader height="58px" class="system-header"><strong>一体化平台</strong><span>数据维护 / {{ page === 'stations' ? '测站管理' : '用户管理' }}</span><UiButton size="small" @click="collapsed = !collapsed">{{ collapsed ? '展开菜单' : '收起菜单' }}</UiButton></UiHeader>
+    <UiContainer><UiAside :width="collapsed ? '0px' : '160px'" class="system-aside"><ProjectMenu direction="vertical" :groups="[{ label: '数据维护', items: navigation }]" v-model:active="page" /></UiAside><UiMain class="system-main"><ElScrollbar height="260px"><template v-if="page === 'stations'"><h4>测站管理</h4><div class="query-row"><UiInput v-model="keyword" clearable placeholder="输入测站或流域名称" /><UiButton type="primary" @click="message = '查询结果：' + filtered.length + ' 个测站'">查询</UiButton><UiButton @click="keyword = ''">重置</UiButton></div><UiTable :data="filtered" empty-text="没有匹配测站"><UiTableColumn prop="name" label="测站" /><UiTableColumn prop="region" label="流域" /><UiTableColumn prop="value" label="水位 (m)" /></UiTable></template><template v-else><h4>用户管理</h4><p>此区域由应用的 RouterView 渲染；用户、角色和权限继续由业务项目管理。</p><UiButton @click="page = 'stations'">返回测站</UiButton></template></ElScrollbar></UiMain></UiContainer>
+  </UiContainer>
+  <h3>项目无菜单页：顶部导航与整宽内容</h3>
+  <UiContainer direction="vertical" class="no-menu"><UiHeader height="58px" class="system-header"><strong>一体化平台</strong><span>专题概览</span></UiHeader><UiMain><h4>专题内容</h4><p>对应 MainLayoutNoMenu / ContentLayoutNomenu，内容不预留左栏宽度，保留原路由和主题。</p></UiMain></UiContainer>
+  <h3>项目地图页：菜单、工具、图例、时间轴与业务面板</h3>
+  <p class="muted">参考降水页面的 content / legend / timeline / right 插槽组合。底层为示意背景；真实地图实例和数据查询由应用接入。</p>
+  <div class="business-map" :class="{ 'with-right': rightOpen }">
+    <div class="map-host">地图宿主 · 当前图层：{{ activeLayer === 'rain' ? '降水' : '水位' }}</div>
+    <div class="map-overlay">
+      <header class="map-header"><strong>实况（测站）</strong><UiButton size="small" @click="rightOpen = !rightOpen">{{ rightOpen ? '收起业务面板' : '展开业务面板' }}</UiButton></header>
+      <div class="map-menu"><MapSideMenu title="监测要素" :items="layers" v-model:active="activeLayer" @select="message = '已选择：' + $event.label" /></div>
+      <div class="map-tools"><MapTools v-model:active="tool" @tool-click="message = '地图工具：' + $event" @context-change="message = '右键菜单：' + ($event ? '开启' : '关闭')" /></div>
+      <aside v-if="rightOpen" class="map-panel"><h4>测站数据</h4><ElScrollbar height="200px"><button v-for="row in rows" :key="row.name" class="station-row" @click="message = '定位请求由应用处理：' + row.name"><SvgIcon name="ii_water" />{{ row.name }}<strong>{{ row.value }} m</strong></button></ElScrollbar><p>点击测站查看事件反馈</p></aside>
+      <div class="map-legend"><strong>降水图例（mm）</strong><span v-for="(level, index) in ['0–10', '10–25', '25–50']" :key="level"><i :style="{ background: ['#b8e7ff', '#4aa3df', '#2563a7'][index] }" />{{ level }}</span></div>
+      <div class="map-timeline"><MapTimeline v-model="frame" :start-time="startTime" :steps="12" @change="message = '时间帧：' + $event.index" /></div>
+    </div>
+  </div>
+  <p role="status">{{ message }}</p>
+</template>
+<style scoped>
+.business-system, .no-menu { border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow: hidden; margin: 16px 0 28px; background: var(--color-panel, white); }
+.system-header { display: flex; align-items: center; gap: 16px; background: var(--surface-control, #eef5ff); border-bottom: 1px solid var(--color-border, #dbe3ef); }
+.system-header span { flex: 1; } .system-aside { background: var(--app-sidebar-bg, #eef5ff); overflow: hidden; } .system-main { min-width: 0; min-height: 0; } .query-row { display: flex; gap: 8px; margin-bottom: 16px; }
+.business-map { height: 560px; position: relative; overflow: hidden; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; --preview-right: 0px; }
+.business-map.with-right { --preview-right: 220px; } .map-host { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-muted, #64748b); background: var(--surface-control, #eef5ff); }
+.map-overlay { position: absolute; inset: 0; pointer-events: none; } .map-overlay > * { pointer-events: auto; }
+.map-header { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; align-items: center; }
+.map-menu { position: absolute; left: 12px; top: 64px; width: 160px; } .map-tools { position: absolute; top: 64px; right: calc(var(--preview-right) + 12px); }
+.map-panel { position: absolute; right: 12px; top: 64px; width: 196px; padding: 10px; border-radius: 8px; background: var(--color-panel, white); box-sizing: border-box; }
+.station-row { display: flex; gap: 8px; align-items: center; width: 100%; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--color-border, #dbe3ef); background: transparent; color: var(--color-text, #1f2937); cursor: pointer; } .station-row strong { margin-left: auto; }
+.map-legend { position: absolute; left: 12px; bottom: 138px; padding: 10px; background: var(--color-panel, white); border-radius: 8px; display: grid; gap: 6px; } .map-legend i { display: inline-block; width: 20px; height: 8px; margin-right: 8px; }
+.map-timeline { position: absolute; left: 12px; right: calc(var(--preview-right) + 12px); bottom: 12px; background: var(--color-panel, white); border-radius: 8px; overflow: auto; padding: 8px; }
+@media (max-width: 700px) { .business-map { height: 740px; } .business-map.with-right { --preview-right: 0px; } .map-panel { top: 350px; } .map-legend { bottom: 150px; } .system-header { flex-wrap: wrap; gap: 6px; font-size: 12px; } .query-row { flex-wrap: wrap; } }
+</style>
+
+```
+
+### 布局变体：横向导航、双侧栏与上下分区
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiContainer, UiHeader, UiAside, UiMain, UiFooter, UiButton, ProjectMenu } from 'sky-ui-kit'
+const active = ref('overview')
+const rightOpen = ref(true)
+const bottomOpen = ref(true)
+const items = [{ key: 'overview', label: '运行概览' }, { key: 'data', label: '数据维护' }, { key: 'analysis', label: '分析报表' }]
+</script>
+<template>
+  <h3>横向导航布局：顶部菜单 + 整宽工作区</h3>
+  <p class="muted">参考原 Header 的横向应用菜单；适合导航较少的专题与工作台。ProjectMenu 只负责菜单展示，select 由业务方接路由。</p>
+  <UiContainer direction="vertical" class="variant"><UiHeader height="auto" class="top"><strong>一体化平台</strong><ProjectMenu :items="items" v-model:active="active" /></UiHeader><UiMain><h4>{{ items.find(item => item.key === active)?.label }}</h4><p>整宽内容区域，不预留左侧菜单。</p></UiMain><UiFooter height="40px" class="foot">可选状态栏 · 当前模块 {{ active }}</UiFooter></UiContainer>
+  <h3>双侧栏布局：功能导航 + 主内容 + 信息面板</h3>
+  <p class="muted">适合列表与详情并列、参数配置与结果展示。右侧是普通信息区；地图浮动业务面板使用上方地图布局。</p>
+  <UiButton size="small" @click="rightOpen = !rightOpen">{{ rightOpen ? '隐藏信息栏' : '显示信息栏' }}</UiButton>
+  <UiContainer direction="vertical" class="variant"><UiHeader height="58px" class="top">数据分析工作台</UiHeader><UiContainer><UiAside width="130px" class="side">功能导航<br>测站 / 数据 / 分析</UiAside><UiMain><h4>主工作区</h4><p>查询结果、业务表格或图表。</p></UiMain><UiAside v-if="rightOpen" width="170px" class="side">信息与参数<br>当前测站：汉口站<br>业务详情由页面传入</UiAside></UiContainer></UiContainer>
+  <h3>上下分区布局：主视图 + 底部过程区</h3>
+  <p class="muted">参考地图页的过程图/时间轴位置；用于主视图与辅助结果分区。这里采用普通文档布局，底部开关由页面控制。</p>
+  <UiButton size="small" @click="bottomOpen = !bottomOpen">{{ bottomOpen ? '收起过程区' : '展开过程区' }}</UiButton>
+  <UiContainer direction="vertical" class="variant"><UiHeader height="58px" class="top">监测分析</UiHeader><UiMain class="main-view"><h4>主视图</h4><p>地图、图表或数据概览宿主</p></UiMain><UiFooter v-if="bottomOpen" height="100px" class="bottom"><strong>过程区</strong><p>时间轴 / 过程曲线 / 结果摘要</p></UiFooter></UiContainer>
+</template>
+<style scoped>
+.variant { margin: 16px 0 28px; overflow: hidden; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; background: var(--color-panel, white); color: var(--color-text, #1f2937); }
+.top { display: flex; align-items: center; gap: 16px; padding: 14px; background: var(--surface-control, #eef5ff); border-bottom: 1px solid var(--color-border, #dbe3ef); }
+.side { padding: 16px; line-height: 2; background: var(--app-sidebar-bg, #eef5ff); }
+.foot, .bottom { padding: 12px; background: var(--surface-control, #eef5ff); border-top: 1px solid var(--color-border, #dbe3ef); }
+.main-view { min-height: 180px; } .variant :deep(.el-main) { min-width: 0; min-height: 0; }
+@media (max-width: 600px) { .top { flex-wrap: wrap; } .variant :deep(.el-container) { flex-wrap: wrap; } .side { max-width: 30%; padding: 8px; font-size: 12px; } }
+</style>
+
+```
+
+### 地图业务布局轮廓示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton } from 'sky-ui-kit'
+const rightOpen = ref(true)
+const timelineVisible = ref(true)
+</script>
+<template>
+  <div class="template-demo" :class="{ 'right-open': rightOpen }">
+    <div class="map-placeholder">地图宿主（由 MainLayoutMap 提供）</div>
+    <div class="top-region">top · 标题 / 查询条件</div>
+    <div class="toolbar-region"><span>toolbar · 地图工具</span><UiButton size="small" @click="rightOpen = !rightOpen">{{ rightOpen ? '收起右栏' : '展开右栏' }}</UiButton><UiButton size="small" @click="timelineVisible = !timelineVisible">切换时间轴</UiButton></div>
+    <aside v-if="rightOpen" class="right-region">right · 业务面板<br>测站详情 / 过程数据</aside>
+    <div class="content-region">content · 业务浮层</div>
+    <div class="legend-region" :class="{ 'above-timeline': timelineVisible }">legend · 图例</div>
+    <div v-if="timelineVisible" class="timeline-region">timeline · 实况 / 预报时间轴</div>
+  </div>
+</template>
+<style scoped>
+.template-demo { position: relative; height: 360px; overflow: hidden; border: 2px solid var(--color-border, #c5d2e5); border-radius: 8px; --demo-panel-width: min(220px, 30%); --demo-right-offset: 12px; }
+.right-open { --demo-right-offset: calc(var(--demo-panel-width) + 24px); }
+.map-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-muted, #748096); background-color: var(--color-surface, #f4f7fb); background-image: linear-gradient(var(--color-border, #dbe3ef) 1px, transparent 1px), linear-gradient(90deg, var(--color-border, #dbe3ef) 1px, transparent 1px); background-size: 32px 32px; }
+.top-region, .toolbar-region, .right-region, .content-region, .legend-region, .timeline-region { position: absolute; padding: 12px; box-sizing: border-box; border: 1px solid var(--color-primary, #1677ff); border-radius: 6px; background: var(--color-panel, white); color: var(--color-text, #1f2937); }
+.top-region { top: 12px; left: 12px; }
+.toolbar-region { top: 64px; right: var(--demo-right-offset); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: 65%; }
+.right-region { top: 12px; right: 12px; bottom: 12px; width: var(--demo-panel-width); }
+.content-region { top: 124px; left: 12px; }
+.legend-region { bottom: 12px; right: var(--demo-right-offset); }
+.legend-region.above-timeline { bottom: 76px; }
+.timeline-region { bottom: 12px; left: 12px; right: var(--demo-right-offset); text-align: center; }
+</style>
+
+```
+
+### UiDivider 独立使用示例
+
+```vue
+<script setup lang="ts">
+import { UiDivider } from 'sky-ui-kit'
+</script>
+<template>
+  <p>测站基础信息</p><UiDivider /><p>监测数据</p>
+  <UiDivider content-position="left">左侧标题</UiDivider>
+  <UiDivider>居中标题</UiDivider>
+  <UiDivider content-position="right" border-style="dashed">虚线分隔</UiDivider>
+  <div>实况<UiDivider direction="vertical" />预报<UiDivider direction="vertical" />历史</div>
+</template>
+
+```
+
+### UiLink 独立使用示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { View } from '@element-plus/icons-vue'
+import { UiLink, UiSpace } from 'sky-ui-kit'
+const message = ref('尚未操作')
+</script>
+<template>
+  <UiSpace wrap :size="16">
+    <UiLink @click="message = '查看测站详情'">默认链接</UiLink>
+    <UiLink v-for="type in ['primary', 'success', 'warning', 'danger', 'info'] as const" :key="type" :type="type" @click="message = type">{{ type }}</UiLink>
+    <UiLink disabled>禁用链接</UiLink>
+    <UiLink type="primary" :underline="false" :icon="View" @click="message = '查看详情'">查看详情</UiLink>
+    <UiLink href="https://element-plus.org/" target="_blank" rel="noopener noreferrer">外部文档</UiLink>
+  </UiSpace>
+  <p role="status">{{ message }}</p>
+</template>
+
+```
+
+### UiSpace 独立使用示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiSpace, UiButton } from 'sky-ui-kit'
+const gap = ref(16)
+</script>
+<template>
+  <UiButton @click="gap = gap === 16 ? 32 : 16">切换间距：{{ gap }} px</UiButton>
+  <h3>水平排列与自动换行</h3>
+  <UiSpace wrap :size="gap"><UiButton v-for="name in ['查询', '重置', '导出']" :key="name">{{ name }}</UiButton></UiSpace>
+  <h3>垂直排列</h3>
+  <UiSpace direction="vertical" alignment="start" :size="gap"><span>测站信息</span><span>监测数据</span><span>更新时间</span></UiSpace>
+</template>
+
+```
+
+### UiText 独立使用示例
+
+```vue
+<script setup lang="ts">
+import { UiText, UiSpace } from 'sky-ui-kit'
+</script>
+<template>
+  <UiSpace wrap :size="16">
+    <UiText>默认正文</UiText>
+    <UiText v-for="type in ['primary', 'success', 'warning', 'danger', 'info'] as const" :key="type" :type="type">{{ type }} 文本</UiText>
+  </UiSpace>
+  <p><UiText size="small">小号文本</UiText> <UiText>默认尺寸</UiText> <UiText size="large">大号文本</UiText></p>
+  <p><UiText tag="b">重要说明</UiText> <UiText tag="i">辅助说明</UiText></p>
+  <div style="width: 180px"><UiText truncated>汉口站实时监测数据与历史过程信息，超出宽度省略</UiText></div>
+  <div style="width: 220px"><UiText :line-clamp="2">多行数据说明：这里展示测站监测情况、更新时间和数据来源，超出两行的内容将自动省略。</UiText></div>
+</template>
+
+```
+
+### UiForm 独立使用示例
+
+```vue
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { Search } from '@element-plus/icons-vue'
+import { UiForm, UiFormItem, UiInput, UiSelect, UiOption, UiDatePicker, UiInputNumber, UiRadioGroup, UiRadio, UiCheckboxGroup, UiCheckbox, UiSwitch, UiButton } from 'sky-ui-kit'
+const formRef = ref<FormInstance>()
+const disabled = ref(false)
+const result = ref('填写表单后提交，查看校验和数据反馈')
+const model = reactive({ name: '', basin: '', date: '', threshold: 20, mode: 'observed', elements: ['rain'], enabled: true, remark: '' })
+const rules: FormRules = {
+  name: [{ required: true, message: '请输入测站名称', trigger: 'blur' }],
+  basin: [{ required: true, message: '请选择流域', trigger: 'change' }],
+}
+async function submit() {
+  if (!formRef.value) return
+  const valid = await formRef.value.validate().catch(() => false)
+  result.value = valid ? '模拟提交：' + JSON.stringify(model) : '校验未通过，请补全必填项'
+  // 实际保存请求由业务方接入。
+}
+function reset() { formRef.value?.resetFields(); result.value = '表单已重置' }
+</script>
+<template>
+  <UiSwitch v-model="disabled" active-text="禁用表单" />
+  <UiForm ref="formRef" :model="model" :rules="rules" :disabled="disabled" label-width="100px" class="station-form" @submit.prevent="submit">
+    <UiFormItem label="测站名称" prop="name"><UiInput v-model="model.name" clearable placeholder="请输入测站名称" /></UiFormItem>
+    <UiFormItem label="所属流域" prop="basin"><UiSelect v-model="model.basin" clearable placeholder="选择流域"><UiOption label="长江流域" value="yangtze" /><UiOption label="黄河流域" value="yellow" /></UiSelect></UiFormItem>
+    <UiFormItem label="观测日期" prop="date"><UiDatePicker v-model="model.date" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" /></UiFormItem>
+    <UiFormItem label="预警阈值" prop="threshold"><UiInputNumber v-model="model.threshold" :min="0" :max="200" :step="5" /></UiFormItem>
+    <UiFormItem label="数据类型" prop="mode"><UiRadioGroup v-model="model.mode"><UiRadio value="observed">实况</UiRadio><UiRadio value="forecast">预报</UiRadio></UiRadioGroup></UiFormItem>
+    <UiFormItem label="监测要素" prop="elements"><UiCheckboxGroup v-model="model.elements"><UiCheckbox value="rain">降雨</UiCheckbox><UiCheckbox value="water">水位</UiCheckbox></UiCheckboxGroup></UiFormItem>
+    <UiFormItem label="启用监测" prop="enabled"><UiSwitch v-model="model.enabled" /></UiFormItem>
+    <UiFormItem label="备注" prop="remark"><UiInput v-model="model.remark" type="textarea" :rows="3" maxlength="200" show-word-limit /></UiFormItem>
+    <UiFormItem><UiButton type="primary" :icon="Search" native-type="submit">校验并提交</UiButton><UiButton @click="reset">重置</UiButton></UiFormItem>
+  </UiForm>
+  <p role="status" class="form-result">{{ result }}</p>
+</template>
+<style scoped>
+.station-form { max-width: 640px; margin-top: 20px; }
+.form-result { overflow-wrap: anywhere; padding: 12px; background: var(--color-surface, #f4f7fb); border: 1px solid var(--color-border, #dbe3ef); border-radius: 6px; }
+</style>
+
+```
+
+### UiAutocomplete 独立使用示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import { UiAutocomplete } from 'sky-ui-kit'
+const station = ref('')
+const onInputStation = ref('')
+const message = ref('输入站名或流域，选择建议项')
+const stations = [
+  { value: '汉口站', basin: '长江流域', id: 'hankou' },
+  { value: '宜昌站', basin: '长江流域', id: 'yichang' },
+  { value: '城陵矶站', basin: '洞庭湖流域', id: 'chenglingji' },
+]
+function suggestions(query: string, callback: (items: typeof stations) => void) {
+  const keyword = query.trim().toLowerCase()
+  callback(stations.filter(item => (item.value + item.basin).toLowerCase().includes(keyword)))
+  // 实际远程查询由应用提供，查询结束后调用 callback。
+}
+function selected(item: Record<string, any>) { message.value = '已选择：' + item.value + ' · ' + item.basin + ' · ' + item.id }
+</script>
+<template>
+  <h3>站点搜索 · 聚焦显示建议</h3>
+  <UiAutocomplete v-model="station" :fetch-suggestions="suggestions" :prefix-icon="Search" clearable
+    placeholder="输入汉口、宜昌或长江" @select="selected" @clear="message = '已清空站点'">
+    <template #default="{ item }"><strong>{{ item.value }}</strong><span class="basin-label">{{ item.basin }}</span></template>
+  </UiAutocomplete>
+  <p role="status">{{ message }}</p>
+  <h3>仅输入后显示建议</h3>
+  <UiAutocomplete v-model="onInputStation" :fetch-suggestions="suggestions" :trigger-on-focus="false" clearable placeholder="输入站点关键词" @select="selected" />
+  <h3>禁用状态</h3>
+  <UiAutocomplete model-value="汉口站" :fetch-suggestions="suggestions" disabled />
+</template>
+<style scoped>
+.basin-label { margin-left: 16px; color: var(--color-muted, #748096); }
+</style>
+
+```
+
+### UiTimePicker 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiTimePicker } from 'sky-ui-kit'
+const value = ref<Date>()
+const message = ref('尚未操作')
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiTimePicker v-model="value" placeholder="选择观测时间" clearable @change="record" />
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiSelect 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiSelect, UiOption } from 'sky-ui-kit'
+const value = ref('rain')
+const message = ref('尚未操作')
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiSelect v-model="value" filterable clearable placeholder="选择要素" @change="record"><UiOption label="降雨" value="rain" /><UiOption label="水位" value="water" /><UiOption label="不可用" value="disabled" disabled /></UiSelect>
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiCheckbox 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiCheckbox, UiCheckboxGroup } from 'sky-ui-kit'
+const value = ref(['rain'])
+const message = ref('尚未操作')
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiCheckboxGroup v-model="value" @change="record"><UiCheckbox value="rain">降雨</UiCheckbox><UiCheckbox value="water">水位</UiCheckbox><UiCheckbox value="disabled" disabled>禁用</UiCheckbox></UiCheckboxGroup>
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiRadio 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiRadio, UiRadioGroup } from 'sky-ui-kit'
+const value = ref('observed')
+const message = ref('尚未操作')
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiRadioGroup v-model="value" @change="record"><UiRadio value="observed">实况</UiRadio><UiRadio value="forecast">预报</UiRadio><UiRadio value="disabled" disabled>禁用</UiRadio></UiRadioGroup>
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiCascaderPanel 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiCascaderPanel } from 'sky-ui-kit'
+const value = ref<string[]>([])
+const message = ref('尚未操作')
+const options = [{ value: 'hubei', label: '湖北省', children: [{ value: 'wuhan', label: '武汉市', children: [{ value: 'hankou', label: '汉口站' }] }] }]
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiCascaderPanel v-model="value" :options="options" @change="record" />
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiCascader 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiCascader } from 'sky-ui-kit'
+const value = ref<string[]>([])
+const message = ref('尚未操作')
+const options = [{ value: 'hubei', label: '湖北省', children: [{ value: 'wuhan', label: '武汉市', children: [{ value: 'hankou', label: '汉口站' }] }] }]
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiCascader v-model="value" :options="options" filterable clearable placeholder="选择区域与测站" @change="record" />
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiColorPickerPanel 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiColorPickerPanel } from 'sky-ui-kit'
+const value = ref('#1677ff')
+const message = ref('尚未操作')
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiColorPickerPanel v-model="value" show-alpha @change="record" /><div :style="{ background: value, height: '32px', width: '120px' }">颜色效果</div>
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiColorPicker 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiColorPicker } from 'sky-ui-kit'
+const value = ref('#1677ff')
+const message = ref('尚未操作')
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiColorPicker v-model="value" show-alpha @change="record" /><div :style="{ background: value, height: '32px', width: '120px' }">颜色效果</div>
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiDatePickerPanel 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiDatePickerPanel } from 'sky-ui-kit'
+const value = ref<Date>()
+const message = ref('尚未操作')
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiDatePickerPanel v-model="value" type="date" @change="record" />
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiDatePicker 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiDatePicker } from 'sky-ui-kit'
+const value = ref('')
+const message = ref('尚未操作')
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiDatePicker v-model="value" type="date" value-format="YYYY-MM-DD" clearable placeholder="选择日期" @change="record" />
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiInputNumber 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiInputNumber } from 'sky-ui-kit'
+const value = ref(20)
+const message = ref('尚未操作')
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiInputNumber v-model="value" :min="0" :max="100" :step="5" @change="record" />
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiInputTag 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiInputTag } from 'sky-ui-kit'
+const value = ref(['汉口站', '宜昌站'])
+const message = ref('尚未操作')
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiInputTag v-model="value" clearable placeholder="输入站名后按回车" @change="record" />
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiInputOtp 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiInputOtp } from 'sky-ui-kit'
+const value = ref('')
+const message = ref('尚未操作')
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiInputOtp v-model="value" :length="6" @change="record" />
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiRate 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiRate } from 'sky-ui-kit'
+const value = ref(3)
+const message = ref('尚未操作')
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiRate v-model="value" show-score @change="record" />
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiInput 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiInput } from 'sky-ui-kit'
+const value = ref('')
+const message = ref('尚未操作')
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiInput v-model="value" clearable placeholder="输入测站名称" @change="record" /><UiInput model-value="禁用状态" disabled />
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiCollapseTransition 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiCollapseTransition, UiButton } from 'sky-ui-kit'
+const value = ref(true)
+const message = ref('尚未操作')
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiButton @click="value = !value">展开 / 收起</UiButton><UiCollapseTransition><div v-show="value" class="collapse-content">测站信息 · 点击按钮查看折叠过渡效果</div></UiCollapseTransition>
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.collapse-content { padding: 24px; background: var(--color-surface, #eef5ff); margin-top: 12px; }
+</style>
+
+```
+
+### UiTimeSelect 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiTimeSelect } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const value = ref('09:00')
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiTimeSelect v-model="value" start="08:00" step="00:30" end="18:00" clearable placeholder="选择时间" @change="record" />
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+</style>
+
+```
+
+### UiTransfer 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiTransfer } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const value = ref([1])
+const data = [{ key: 1, label: '汉口站' }, { key: 2, label: '宜昌站' }, { key: 3, label: '城陵矶站' }, { key: 4, label: '维护站点', disabled: true }]
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiTransfer v-model="value" :data="data" filterable :titles="['可选测站', '已选测站']" @change="record" />
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+</style>
+
+```
+
+### UiTreeSelect 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiTreeSelect } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const value = ref('hankou')
+const data = [{ value: 'yangtze', label: '长江流域', children: [{ value: 'hankou', label: '汉口站' }, { value: 'yichang', label: '宜昌站' }] }, { value: 'dongting', label: '洞庭湖流域', children: [{ value: 'chenglingji', label: '城陵矶站' }] }]
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiTreeSelect v-model="value" :data="data" filterable clearable placeholder="搜索测站" @change="record" />
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+</style>
+
+```
+
+### UiMention 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiMention } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const value = ref('')
+const options = [{ value: 'zhang', label: '张工' }, { value: 'li', label: '李工' }, { value: 'wang', label: '王工' }]
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiMention v-model="value" :options="options" type="textarea" placeholder="输入 @ 选择团队成员" @select="record" />
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+</style>
+
+```
+
+### UiUpload 独立交互示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { UploadUserFile, UploadProps } from 'element-plus'
+import { Upload } from '@element-plus/icons-vue'
+import { UiUpload, UiButton } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const files = ref<UploadUserFile[]>([])
+const value = ref('尚未选择文件')
+const changed: UploadProps['onChange'] = file => { value.value = file.name; message.value = '已选择本地文件：' + file.name }
+function record(next: unknown) { message.value = '变化：' + JSON.stringify(next) }
+</script>
+<template>
+  <div class="control-demo">
+    <UiUpload v-model:file-list="files" :auto-upload="false" :on-change="changed" multiple accept=".csv,.xlsx" :limit="3" :on-exceed="() => message = '最多选择 3 个文件'" :on-remove="() => message = '已移除文件'">
+      <UiButton type="primary" :icon="Upload">选择数据文件</UiButton>
+      <template #tip><p>支持 CSV / XLSX，最多 3 个文件。演示仅选择和移除文件；真实上传由应用配置 http-request。</p></template>
+    </UiUpload>
+    <p>当前值：{{ value }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.control-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+</style>
+
+```
+
+### UiAffix 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiAffix, UiButton } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <div class="scroll-host"><div style="height: 500px"><UiAffix target=".affix-example-host" :offset="20"><UiButton>固定操作</UiButton></UiAffix><p>滚动页面观察固定效果</p></div></div>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiAlert 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiAlert } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiAlert title="数据已更新" type="success" show-icon @close="message = '提示已关闭'" /><UiAlert title="部分测站数据缺失" type="warning" show-icon />
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiPopper 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiPopover } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <p>UiPopper 为浮层底层定位组件，应用通常通过 UiPopover / UiTooltip 使用。</p><UiPopover content="通过公开浮层组件使用定位能力" trigger="click"><template #reference><UiButton>查看定位效果</UiButton></template></UiPopover>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiTooltip 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiTooltip } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiTooltip content="查询最新监测数据" placement="top"><UiButton>悬停查看说明</UiButton></UiTooltip>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiAvatar 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiAvatar, UiAvatarGroup } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiAvatar>张</UiAvatar><UiAvatar :size="48">团队</UiAvatar><UiAvatarGroup><UiAvatar>李</UiAvatar><UiAvatar>王</UiAvatar></UiAvatarGroup>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiBacktop 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiBacktop } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <div class="backtop-host" style="height: 160px; overflow: auto"><div style="height: 600px">在这里向下滚动<UiBacktop target=".backtop-host" :visibility-height="60" :right="40" :bottom="40" /></div></div>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiBadge 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiBadge, UiButton } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiBadge :value="12"><UiButton>消息</UiButton></UiBadge>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiBreadcrumb 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiBreadcrumb, UiBreadcrumbItem } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiBreadcrumb separator="/"><UiBreadcrumbItem>平台</UiBreadcrumbItem><UiBreadcrumbItem>数据维护</UiBreadcrumbItem><UiBreadcrumbItem>测站管理</UiBreadcrumbItem></UiBreadcrumb>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiConfigProvider 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiConfigProvider, UiRadio, UiRadioGroup } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const size = ref<'small' | 'default' | 'large'>('default')
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiConfigProvider :size="size"><UiRadioGroup v-model="size"><UiRadio value="small">小</UiRadio><UiRadio value="default">默认</UiRadio><UiRadio value="large">大</UiRadio></UiRadioGroup><UiButton>跟随配置尺寸</UiButton></UiConfigProvider>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiTag 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiTag } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const tags = ref(['降雨', '水位'])
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiTag v-for="tag in tags" :key="tag" closable @close="tags = tags.filter(item => item !== tag)">{{ tag }}</UiTag>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiCalendar 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiCalendar } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const date = ref(new Date())
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiCalendar v-model="date" />
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiCard 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiCard } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiCard><template #header>测站信息</template>汉口站 · 长江流域<template #footer>更新于 08:00</template></UiCard>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiCarousel 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiCarousel, UiCarouselItem } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiCarousel height="160px" :autoplay="false"><UiCarouselItem v-for="name in ['实况', '预报', '历史']" :key="name"><div class="demo-block">{{ name }}</div></UiCarouselItem></UiCarousel>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiCheckTag 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiCheckTag } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const checked = ref(true)
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiCheckTag :checked="checked" @change="checked = $event">降雨图层</UiCheckTag>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiCollapse 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiCollapse, UiCollapseItem } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const active = ref(['station'])
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiCollapse v-model="active"><UiCollapseItem title="测站信息" name="station">汉口站 · 长江流域</UiCollapseItem><UiCollapseItem title="监测数据" name="data">水位 28.6 m</UiCollapseItem></UiCollapse>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiStatistic 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiStatistic } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiStatistic title="监测站数量" :value="128" />
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiCountdown 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiCountdown } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const deadline = Date.now() + 3600000
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiCountdown title="下次更新" :value="deadline" @finish="message = '倒计时结束'" />
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiDescriptions 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiDescriptions, UiDescriptionsItem } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiDescriptions title="测站档案" :column="2" border><UiDescriptionsItem label="测站">汉口站</UiDescriptionsItem><UiDescriptionsItem label="流域">长江流域</UiDescriptionsItem></UiDescriptions>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiDialog 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiDialog } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiButton @click="open = true">打开对话框</UiButton><UiDialog v-model="open" title="测站详情" width="480px"><p>汉口站 · 水位 28.6 m</p><template #footer><UiButton @click="open = false">关闭</UiButton></template></UiDialog>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiDrawer 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiDrawer } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiButton @click="open = true">打开抽屉</UiButton><UiDrawer v-model="open" title="测站详情" size="320px">汉口站 · 长江流域</UiDrawer>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiDropdown 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiDropdown, UiDropdownItem, UiDropdownMenu } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiDropdown @command="message = '操作：' + $event"><UiButton>更多操作</UiButton><template #dropdown><UiDropdownMenu><UiDropdownItem command="export">导出</UiDropdownItem><UiDropdownItem command="refresh">刷新</UiDropdownItem></UiDropdownMenu></template></UiDropdown>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiEmpty 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiEmpty } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiEmpty description="暂无监测数据"><UiButton @click="message = '刷新事件由应用接入'">刷新</UiButton></UiEmpty>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiImageViewer 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiImageViewer } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+const imageUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="360" height="200"><rect width="360" height="200" fill="#e8f2ff"/><path d="M0 150L90 60L180 120L270 40L360 150" fill="none" stroke="#1677ff" stroke-width="6"/></svg>')
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiButton @click="open = true">打开图片预览</UiButton><UiImageViewer v-if="open" :url-list="[imageUrl]" @close="open = false" />
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiImage 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiImage } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+const imageUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="360" height="200"><rect width="360" height="200" fill="#e8f2ff"/><path d="M0 150L90 60L180 120L270 40L360 150" fill="none" stroke="#1677ff" stroke-width="6"/></svg>')
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiImage style="width: 180px; height: 100px" :src="imageUrl" :preview-src-list="[imageUrl]" fit="cover" />
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiMenu 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiMenu, UiMenuItem, UiSubMenu } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiMenu default-active="station" @select="message = $event"><UiMenuItem index="station">测站管理</UiMenuItem><UiSubMenu index="data"><template #title>数据管理</template><UiMenuItem index="rain">降雨数据</UiMenuItem></UiSubMenu></UiMenu>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiPageHeader 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiPageHeader } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiPageHeader @back="message = '返回列表事件'"><template #content>测站详情</template></UiPageHeader>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiPagination 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiPagination } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const page = ref(1)
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiPagination v-model:current-page="page" :page-size="10" :total="100" layout="prev, pager, next, total" @current-change="message = '页码：' + $event" />
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiPopconfirm 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiPopconfirm } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiPopconfirm title="确认删除该记录？" @confirm="message = '已确认删除（演示）'" @cancel="message = '已取消'"><template #reference><UiButton type="danger">删除记录</UiButton></template></UiPopconfirm>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiProgress 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiProgress } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const percent = ref(40)
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiProgress :percentage="percent" /><UiProgress type="circle" :percentage="percent" /><UiButton @click="percent = (percent + 10) % 110">更新进度</UiButton>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiResult 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiResult } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiResult icon="success" title="保存完成" sub-title="测站配置已更新"><template #extra><UiButton @click="message = '返回列表'">返回</UiButton></template></UiResult>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiSkeleton 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiSkeleton, UiSkeletonItem, UiSwitch } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const loading = ref(true)
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiSwitch v-model="loading" active-text="加载状态" /><UiSkeleton :loading="loading" animated><template #template><UiSkeletonItem variant="text" /></template><template #default>汉口站数据已加载</template></UiSkeleton>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiSteps 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiStep, UiSteps } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const step = ref(1)
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiSteps :active="step" finish-status="success"><UiStep title="选择测站" /><UiStep title="配置数据" /><UiStep title="完成" /></UiSteps><UiButton @click="step = (step + 1) % 4">下一步</UiButton>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiTable 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiTable, UiTableColumn } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+const rows = [{ id: '1', name: '汉口站', value: 28.6 }, { id: '2', name: '宜昌站', value: 42.3 }]
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiTable :data="rows" stripe @row-click="message = $event.name"><UiTableColumn prop="name" label="测站" /><UiTableColumn prop="value" label="水位 (m)" /></UiTable>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiTableV2 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiTableV2 } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const columns = [{ key: 'name', dataKey: 'name', title: '测站', width: 300 }, { key: 'value', dataKey: 'value', title: '水位', width: 300 }]
+const rows = [{ id: '1', name: '汉口站', value: 28.6 }, { id: '2', name: '宜昌站', value: 42.3 }]
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiTableV2 :columns="columns" :data="rows" :width="600" :height="220" />
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiTabs 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiTabPane, UiTabs } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const tab = ref('observed')
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiTabs v-model="tab"><UiTabPane label="实况" name="observed">实况监测数据</UiTabPane><UiTabPane label="预报" name="forecast">预报数据</UiTabPane></UiTabs>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiTimeline 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiTimeline, UiTimelineItem } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiTimeline><UiTimelineItem timestamp="08:00">收到监测数据</UiTimelineItem><UiTimelineItem timestamp="09:00" type="success">完成数据校验</UiTimelineItem></UiTimeline>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiTree 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiTree } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+const tree = [{ id: 'basin', label: '长江流域', children: [{ id: 'hankou', label: '汉口站' }] }]
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiTree :data="tree" node-key="id" show-checkbox @node-click="message = $event.label" />
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiTreeV2 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiTreeV2 } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+const tree = [{ id: 'basin', label: '长江流域', children: [{ id: 'hankou', label: '汉口站' }] }]
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiTreeV2 :data="tree" :height="180" show-checkbox @node-click="message = $event.label" />
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiWatermark 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiWatermark } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiWatermark content="一体化平台"><div class="demo-block">监测数据 · 水印区域</div></UiWatermark>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiTour 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiTour, UiTourStep } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const tourTarget = ref()
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiButton ref="tourTarget" @click="open = true">开始引导</UiButton><UiTour v-model="open"><UiTourStep :target="tourTarget?.$el" title="数据查询" description="通过这里查询测站数据" /></UiTour>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiAnchor 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiAnchor, UiAnchorLink } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiAnchor><UiAnchorLink href="#anchor-demo-one" title="测站信息" /><UiAnchorLink href="#anchor-demo-two" title="监测数据" /></UiAnchor><div id="anchor-demo-one" class="demo-block">测站信息</div><div id="anchor-demo-two" class="demo-block">监测数据</div>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiSegmented 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiSegmented } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const selected = ref('实况')
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiSegmented v-model="selected" :options="['实况', '预报', '历史']" /><p>当前：{{ selected }}</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiSplitter 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiSplitter, UiSplitterPanel } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiSplitter style="height: 200px"><UiSplitterPanel size="30%"><div class="demo-block">拖动分隔条 · 左栏</div></UiSplitterPanel><UiSplitterPanel><div class="demo-block">主体</div></UiSplitterPanel></UiSplitter>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiPopover 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiPopover } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiPopover title="测站信息" content="汉口站 · 长江流域" trigger="click"><template #reference><UiButton>点击查看浮层</UiButton></template></UiPopover>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiMessage 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiMessage } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiButton @click="UiMessage.success('保存成功')">成功消息</UiButton><UiButton @click="UiMessage.warning('请检查数据')">警告消息</UiButton>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiMessageBox 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiMessage, UiMessageBox } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+async function confirm() { try { await UiMessageBox.confirm('确认更新测站数据？', '操作确认'); message.value = '已确认' } catch { message.value = '已取消' } }
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiButton @click="confirm">打开确认框</UiButton>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiNotification 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiNotification } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiButton @click="UiNotification({ title: '数据更新', message: '监测数据已刷新', type: 'success' })">显示通知</UiButton>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### UiLoading 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiLoading } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const loadingTarget = ref<HTMLElement>()
+async function showLoading() { const instance = UiLoading.service({ target: loadingTarget.value, text: '正在加载' }); try { await new Promise(resolve => setTimeout(resolve, 1000)) } finally { instance.close() } }
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiButton @click="showLoading">显示加载服务</UiButton><div ref="loadingTarget" class="demo-block">加载目标区域</div>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### vUiLoading 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiSwitch, vUiLoading } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const loading = ref(false)
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiSwitch v-model="loading" active-text="切换加载" /><div v-ui-loading="loading" class="demo-block">数据内容</div>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### vUiInfiniteScroll 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { vUiInfiniteScroll } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const count = ref(8)
+function loadMore() { count.value = Math.min(30, count.value + 4) }
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <div style="height: 160px; overflow: auto"><ul v-ui-infinite-scroll="loadMore" :infinite-scroll-disabled="count >= 30"><li v-for="n in count" :key="n">测站记录 {{ n }}</li></ul></div><p>最多演示 30 条</p>
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```
+
+### vUiPopover 分类独立示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UiButton, UiPopover, vUiPopover } from 'sky-ui-kit'
+const message = ref('尚未操作')
+const open = ref(false)
+const popoverRef = ref()
+
+</script>
+<template>
+  <div class="catalog-demo affix-example-host">
+    <UiButton v-ui-popover="popoverRef">指令绑定浮层</UiButton><UiPopover ref="popoverRef" trigger="click" title="测站说明" content="汉口站 · 长江流域" />
+    <p role="status">{{ message }}</p>
+  </div>
+</template>
+<style scoped>
+.catalog-demo { padding: 20px; border: 1px solid var(--color-border, #dbe3ef); border-radius: 8px; overflow-x: auto; }
+.demo-block { min-height: 140px; display: grid; place-items: center; background: var(--color-surface, #eef5ff); padding: 16px; }
+.scroll-host { height: 180px; overflow: auto; }
+</style>
+
+```