sky-ui-kit 0.1.1 → 0.1.2

package/llms-full.txt

@@ -1,11 +1,18 @@
 # sky-ui-kit
 
-> Vue 3 components compatible with Element Plus, project menus, timeline and map tools. Version 0.1.1. AI tools must explicitly load these files.
+> Vue 3 components compatible with Element Plus, project menus, timeline and map tools. Version 0.1.2. AI tools must explicitly load these files.
 
 ## Documentation
 
 - [AI guide](docs/AI-GUIDE.md): setup, examples, icon/event bindings and limits.
 - [Component API](docs/COMPONENT-API.md): props, defaults, events, slots and types.
+- [AI module changes](docs/AI-CHANGELOG.md): module updates and integration impact.
+- [Project usage](docs/COMPONENT-USAGE.md): current source usage counts and call sites.
+- [Global adaptation](docs/GLOBAL-ADAPTATION.md): VFit, root variables, theme, layout, resize and overlays.
+- [Adaptation plan](docs/ADAPTATION.md): module mapping, business boundaries, icons, theme and rollout.
+- [Usage data](docs/component-usage.json): full static reference paths and dependencies.
+- [Full Element Plus coverage](docs/ELEMENT-PLUS-COVERAGE.md): complete standard component, service and directive mapping.
+- [Project component guide](docs/COMPONENT-GUIDE.md): use cases and behavior.
 - [Component catalog](components.json): public components/services/directives.
 - [CSS theme](docs/CSS-THEME.md): isolated style.css and optional global.css.
 - [Compatibility](docs/COMPONENT-LIBRARY.md): component mapping.
@@ -19,8 +26,42 @@ Import element-plus/dist/index.css then sky-ui-kit/style.css once in main.ts. Im
 
 适用于 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 与类型定义。
@@ -29,6 +70,8 @@ Import element-plus/dist/index.css then sky-ui-kit/style.css once in main.ts. Im
 
 ## 生成代码的规则
 
+- 滚动条直接 `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 是主动整站换肤入口，不能默认添加。
@@ -40,9 +83,39 @@ Import element-plus/dist/index.css then sky-ui-kit/style.css once in main.ts. Im
 - 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。
@@ -57,9 +130,401 @@ Import element-plus/dist/index.css then sky-ui-kit/style.css once in main.ts. Im
 ## 主题与业务示例
 
 以下完整代码由预览站示例生成；公共入口完成后，各页面不重复引入 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
@@ -91,6 +556,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
@@ -183,45 +749,2326 @@ function onSelect(item: { key: string; label: string }) {
 <!-- MapSideMenu 的搜索、分组收起和图标模式切换由组件内部完成。 -->
 ```
 
-# Component API reference
+### timeRangeExample
 
-Generated from Vue/TypeScript source; defaultExpression is source text, not evaluated JSON. Types refer to declarations below. Unlisted props must not be invented. For Element Plus components use upstream documentation and shipped typings.
+```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>
+```
 
-## AppSelect
+### treeSelectExample
 
-### Props
+```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>
+```
 
-| Name | Type | Required | Default expression |
-|---|---|---|---|
-| modelValue | AppSelectValue | false | undefined |
-| options | AppSelectOption[] | false | () => [] |
-| emptyLabel | string | false | '暂无可选项' |
-| popperClass | string | false | '' |
-| teleported | boolean | false | false |
+### 完整项目布局组合示例
 
-### Events
+```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>
 
-- `update:modelValue` — `[value: AppSelectValue]`
-- `change` — `[value: AppSelectValue]`
+```
 
-Slots: No declared content slots.
+### 布局变体：横向导航、双侧栏与上下分区
+
+```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>
 
-```ts
-export type AppSelectValue = string | number | boolean | Record<string, unknown> | AppSelectValue[] | null | undefined
-export type AppSelectOption = {
-  label: string
-  value: AppSelectValue
-  disabled?: boolean
-} | string | number
 ```
 
-## MapTimeline
+### 地图业务布局轮廓示例
 
-### Props
+```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>
 
-| Name | Type | Required | Default expression |
-|---|---|---|---|
-| modelValue | number | false | 0 |
+```
+
+### 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>
+
+```
+
+# 团队 AI 模块变更记录
+
+本文件记录源码模块调整与接入影响，不作为 npm 发布完成的依据。团队使用安装包时以包内文档及 package.json 版本为准；使用当前源码时读取仓库中的同名文档。
+
+## 2026-10-13 · 0.1.2 发布准备
+
+- 核对并重新生成组件 API、AI 指南、llms 索引和完整文档，包含项目图标、全局适配、独立常驻示例和导航调整。
+- 修正 README 默认 CSS 作用域描述；版本更新为 0.1.2。发布是否完成以 npm 注册表为准。
+
+## 2026-10-13 · 修正项目图标定位
+
+- 移除 SvgIcon 到 UiIcon 的导航重映射，给项目 SVG 图库添加独立锚点，点击项目菜单直接定位项目图标。
+
+## 2026-10-13 · 四类连续展示
+
+- 数据展示、导航、反馈和其他配置主入口补充独立常驻示例、代码和交互；结构子组件跟随父示例。
+- 菜单只定位，不替换同一展示区，源码同步 AI 文档。
+
+## 2026-10-13 · 补全五项独立示例
+
+- 时间下拉选择、穿梭框、树选择器、上传和提及补充常驻效果、事件反馈及各自代码。
+- 上传只选择本地文件，不发起请求；示例源码同步生成团队 AI 文档。
+
+## 2026-10-13 · 示例连续展示
+
+- 已完成的基础和表单示例全部常驻页面，每项保留独立交互状态及代码入口；菜单只定位，不再替换顶部示例。
+
+## 2026-10-13 · 补全控件独立示例
+
+- 为截图中的时间、选择、单复选、级联、颜色、日期、数字、标签、验证码、评分及折叠动画补充各自效果、状态反馈与复制代码。
+- 每项 Demo 源码同步生成 AI 示例，公开组件 API 不变。
+
+## 2026-10-13 · 合并表单导航分组
+
+- 移除左侧“表单组件”独立分组，将相关入口合并到“基础组件”；原有示例、子组件关系及公开 API 保留。
+
+## 2026-10-13 · 自动补全效果
+
+- 自动补全入口替换为真实 UiAutocomplete 示例，支持站点/流域筛选、建议选择、清空、禁用、输入触发和自定义建议插槽。
+- 源码同步生成可复制代码与 AI 示例；远程查询仍由应用接入。
+
+## 2026-10-13 · 表单交互示例
+
+- UiForm 和 UiFormItem 入口展示完整测站配置表单，提供必填校验、重置、禁用及提交数据反馈。
+- 示例保留控件状态和图标绑定，源码同步代码展示与 AI 指南，真实请求由使用方接入。
+
+## 2026-10-13 · 基础组件使用示例
+
+- 分割线补充方向、标题位置和虚线；链接补充类型、禁用、图标与点击反馈；间距补充换行、垂直排列与间距切换；文本补充类型、尺寸与省略。
+- 四个独立展示页共用真实 Demo 源码生成复制代码和 AI 示例，公开 API 不变。
+
+## 2026-10-13 · 地图业务布局入口
+
+- 布局容器下新增地图业务布局子项；顶栏、侧栏、主体、底栏统一进入完整布局页，避免切换后看不到地图布局示例。
+
+## 2026-10-13 · 地图业务布局说明
+
+- 新增 TemplateLayout 独立布局说明及交互轮廓示例，展示 top、toolbar、right、legend、timeline、content 区域与右栏避让。
+- 记录真实 props、默认值和作用域插槽，明确原组件及业务依赖仍在应用侧；不新增库 API。
+
+## 2026-10-13 · 整体布局优先
+
+- 布局容器先展示四区完整结构，再按顶栏、左侧栏、主体、底栏排列独立示例；补充完整布局复制代码。
+
+## 2026-10-13 · 布局区域轮廓与完整展示
+
+- 布局子组件页面同时展示四个独立区域示例，菜单按锚点定位。
+- 添加外框、区域分隔和主色高亮，修复包装组件下局部演示样式匹配，复制代码同步轮廓样式。
+
+## 2026-10-13 · 布局子组件效果
+
+- 侧栏、顶栏、底栏、主体入口补充真实封装组件效果和各自代码，替代仅有导入与 API 索引的展示。
+- 示例在 UiContainer 内演示宽高和剩余空间，代码同步 AI 指南；公开 API 不变。
+
+## 2026-10-13 · 项目组件独立展示
+
+- 将四个项目选择与时间组件拆成独立 Vue 预览模块，每个模块拥有独立展示卡片、导航锚点、状态和代码入口。
+- 移除合并展示模块，保持原导航地址和组件包 API。
+
+## 2026-10-13 · 项目选择与时间示例代码
+
+- 四个展示模块各自增加查看代码和复制代码，替代页面底部唯一的组合示例入口。
+- 示例包含公开组件导入、单选多选和禁用空状态、分类树数据、时间范围与时间轴状态，以及 change 事件；代码同步到 AI 指南。
+
+## 2026-10-13 · 移除统一组件入口展示
+
+- 删除开发指南中的组件入口与兼容菜单及统一组件入口展示组件，同时移除组件索引页的相关跳转链接。
+- 安装和导入方式继续查看快速开始，组件效果放在对应模块；组件库出口与 API 保留。
+
+## 2026-10-12 · 开发指南 / 快速开始
+
+- 安装和升级命令统一为 `npm install sky-ui-kit@latest`，移除固定 0.1.1 和“等待注册表处理”的过时描述。latest 表示 npm 已发布的最新正式版本，不包含尚未发布的工作区修改。
+- 新增团队可复制的 AI 文档读取提示，涵盖公开组件、API、主题及业务接入规则。
+- 网站与 AI 文档共用 src/quick-start-examples.ts；文档生成会同步安装、入口、首个组件示例和 AI 读取提示。
+- 每次后续模块修改均需更新相关说明、本变更记录及生成文档；仓库 AGENTS.md 保存此约定。
+
+## 2026-10-12 · 预览站 / 左侧导航
+
+- 分区名称为“使用指南 / 团队专用组件 / 项目特色组件”。团队专用组件基于 Element Plus 封装。
+- 一级分类采用手风琴展开，二级为主组件，子组件收在对应主组件下；搜索保留父级上下文。
+- 此调整只影响预览网站，不改变组件包 API。
+
+## 2026-10-12 · 团队专用组件 / 完整目录
+
+- 源码以 Element Plus 2.14.7 为基准，提供 111 个主 / 子组件、4 个服务出口和 3 个指令；保留 10 个项目特色组件。
+- 完整映射见 ELEMENT-PLUS-COVERAGE.md。组件出口与 API 索引覆盖不代表全部独立示例及视觉状态已验证。
+- 新增组件使用方需要 Element Plus 至少 2.14.7；业务请求、路由和权限仍由应用接入。
+# 2026-10-12 按钮、滚动条与图标
+
+## 按钮独立示例
+
+- 读取原 main.ts / App.vue / base.css / VFit token / 地图布局，新增 GLOBAL-ADAPTATION.md；布局页加入全局适配链路、入口/变量桥接/尺寸代码与浮层、resize、窄屏边界，AI 文档同步。
+
+- 布局页扩展为六种结构，新增横向导航、双侧栏及上下分区，保留业务边界并提供共享源码及 AI 示例。
+
+- 布局容器补充实际组件组合：系统查询表格、菜单切换、无菜单页、地图菜单/工具/图例/时间轴/右面板与操作反馈；完整示例代码与 AI 文档共用源码。
+
+- 左侧去掉栅格行 / 栅格列；布局容器补充原系统、无菜单与地图布局对应关系、插槽和业务边界，新增侧栏/右面板交互和共享示例；原业务项目未修改。
+
+- 按用户要求移除按钮页的按钮组效果和对应可复制代码，保留其他按钮示例。
+
+- UiButton 页面新增语义色、描边、圆角、文字/链接、图标、尺寸、禁用和加载示例；保存交互带操作反馈，源码可复制并生成到 AI 文档。
+
+## 滚动条直接使用约定
+
+- 滚动条页面、菜单名称、导入示例改为 ElScrollbar，直接从 element-plus 导入。
+- 删除 UiScrollbar 包装出口；同步生成目录、API、使用清单与 AI 文档。滚动条沿用应用现有样式范围，不新增主题包装层。
+
+## 图标与业务适配
+
+- 补齐自有 SVG 插件安装、Vite 配置、main.ts 注册、TS 声明、页面 prefix 与原项目命名规则适配；共享示例保证页面与 AI 文档一致。
+- 重扫原项目：590 个 Vue / TS / JS 文件、57 种 EP 模板组件、3 种服务、56 个公共 Vue 组件；新增 COMPONENT-USAGE.md / component-usage.json 与 ADAPTATION.md。
+- 原项目接入页新增实际清单、使用位置和适配边界；同步 npm 文档文件及 llms 索引。静态扫描不等于业务运行验收。
+
+- 新增 SvgIcon、projectIcons、ProjectIconName、registerProjectIcons；导入 274 个业务 SVG，子目录名称加前缀，隔离 sprite 和内部 ID。
+- UiIcon 页面补充 Element Plus 全量图标、业务 SVG 分类搜索、名称复制、尺寸颜色、按钮状态和菜单绑定示例；项目特色组件新增 SVG 入口。
+- 同步生成 API、AI 示例、主题及原项目反向接入说明。未构建、发布或提交，原业务项目未修改。
+
+
+# Component API reference
+
+Generated from Vue/TypeScript source; defaultExpression is source text, not evaluated JSON. Types refer to declarations below. Unlisted props must not be invented. For Element Plus components use upstream documentation and shipped typings.
+
+## SvgIcon
+
+### Props
+
+| Name | Type | Required | Default expression |
+|---|---|---|---|
+| name | string | true | undefined / no declared default |
+| size | number &#124; string | false | '1em' |
+| title | string | false | undefined / no declared default |
+| decorative | boolean | false | true |
+| color | string | false | undefined / no declared default |
+| prefix | string | false | 'sky-icon-' |
+
+### Events
+
+No declared events.
+
+Slots: No declared content slots.
+
+## AppSelect
+
+### Props
+
+| Name | Type | Required | Default expression |
+|---|---|---|---|
+| modelValue | AppSelectValue | false | undefined |
+| options | AppSelectOption[] | false | () => [] |
+| emptyLabel | string | false | '暂无可选项' |
+| popperClass | string | false | '' |
+| teleported | boolean | false | false |
+
+### Events
+
+- `update:modelValue` — `[value: AppSelectValue]`
+- `change` — `[value: AppSelectValue]`
+
+Slots: No declared content slots.
+
+```ts
+export type AppSelectValue = string | number | boolean | Record<string, unknown> | AppSelectValue[] | null | undefined
+export type AppSelectOption = {
+  label: string
+  value: AppSelectValue
+  disabled?: boolean
+} | string | number
+```
+
+## MapTimeline
+
+### Props
+
+| Name | Type | Required | Default expression |
+|---|---|---|---|
+| modelValue | number | false | 0 |
 | startTime | TimelineTimeInput | false | () => new Date() |
 | points | TimelinePoint[] | false | () => [] |
 | steps | number | false | 24 |
@@ -338,367 +3185,1260 @@ export type TimeRangeQuickOption = {
 }
 ```
 
-## ProjectMenu
+## ProjectMenu
+
+### Props
+
+| Name | Type | Required | Default expression |
+|---|---|---|---|
+| direction | 'horizontal' &#124; 'vertical' | false | 'horizontal' |
+| active | string | false | '' |
+| items | ProjectMenuItem[] | false | () => [] |
+| groups | ProjectMenuGroup[] | false | () => [] |
+
+### Events
+
+- `update:active` — `[key: string]`
+- `select` — `[item: ProjectMenuItem]`
+
+Slots: No declared content slots.
+
+```ts
+export interface ProjectMenuItem { key: string; label: string; disabled?: boolean; icon?: Component }
+export interface ProjectMenuGroup { label: string; items: ProjectMenuItem[] }
+```
+
+## MapSideMenu
+
+### Props
+
+| Name | Type | Required | Default expression |
+|---|---|---|---|
+| title | string | false | '实况(测站)' |
+| active | string | false | 'rain' |
+| dark | boolean | false | false |
+| compact | boolean | false | false |
+| items | MapMenuItem[] | false | () => [
+    { key: 'rain', label: '降水', icon: Pouring },
+    { key: 'reservoir-level', label: '水库水位', icon: List },
+    { key: 'reservoir-flow', label: '水库径流', icon: TrendCharts },
+    { key: 'river-level', label: '河道水位', icon: List },
+    { key: 'river-flow', label: '河道径流', icon: TrendCharts },
+    { key: 'temperature', label: '气温', icon: Sunny },
+    { key: 'wind', label: '风速', icon: WindPower }
+  ] |
+
+### Events
+
+- `update:active` — `[key: string]`
+- `update:compact` — `[value: boolean]`
+- `select` — `[item: MapMenuItem]`
+
+Slots: No declared content slots.
+
+```ts
+export interface MapMenuItem { key: string; label: string; icon?: Component }
+```
+
+## MapTools
+
+### Props
+
+| Name | Type | Required | Default expression |
+|---|---|---|---|
+| active | string | false | 'layers' |
+| horizontal | boolean | false | false |
+| icons | Record<string, Component> | false | () => ({}) |
+
+### Events
+
+- `update:active` — `[key: string]`
+- `tool-click` — `[key: string]`
+- `context-change` — `[enabled: boolean]`
+
+Slots: No declared content slots.
+
+## AtlasMapTitle
+
+### Props
+
+| Name | Type | Required | Default expression |
+|---|---|---|---|
+| title | string | true | undefined / no declared default |
+| subtitle | string | false | '' |
+| rightOpen | boolean | false | false |
+
+### Events
+
+No declared events.
+
+Slots: No declared content slots.
+
+## AtlasRightToggleButton
+
+### Props
+
+| Name | Type | Required | Default expression |
+|---|---|---|---|
+| open | boolean | false | false |
+| openTitle | string | false | '展开右侧面板' |
+| closeTitle | string | false | '收起右侧面板' |
+
+### Events
+
+- `toggle` — `[]`
+
+Slots: No declared content slots.
+
+## ProcessDataTable
+
+### Props
+
+| Name | Type | Required | Default expression |
+|---|---|---|---|
+| times | string[] | true | undefined / no declared default |
+| series | { name: string; data: (number &#124; null)[] }[] | true | undefined / no declared default |
+| loading | boolean | false | undefined / no declared default |
+
+### Events
+
+No declared events.
+
+Slots: No declared content slots.
+
+## UiAffix
+
+固钉 · 导航组件. Original: ElAffix. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/affix.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiIcon
+
+图标 · 基础组件. Original: ElIcon. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/icon.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiAlert
+
+警告提示 · 反馈组件. Original: ElAlert. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/alert.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiForm
+
+表单 · 表单组件. Original: ElForm. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/form.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiFormItem
+
+表单项 · 表单组件. Original: ElFormItem. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/form.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiPopper
+
+底层浮层 · 其他与配置. Original: ElPopper. Import from: sky-ui-kit. [API](https://github.com/element-plus/element-plus/tree/2.14.7/packages/components/popper). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## UiTooltip
+
+文字提示 · 反馈组件. Original: ElTooltip. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/tooltip.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiInput
+
+输入框 · 表单组件. Original: ElInput. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/input.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## ElScrollbar
+
+滚动条 · 基础组件. Original: ElScrollbar. Import from: element-plus. [API](https://element-plus.org/zh-CN/component/scrollbar.html). See element-plus/es/components/scrollbar/index.d.ts.
+
+Import ElScrollbar directly from element-plus. No sky-ui-kit wrapper or alias export; styles follow its existing application scope.
+
+## UiAutocomplete
+
+自动补全 · 表单组件. Original: ElAutocomplete. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/autocomplete.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiAvatar
+
+头像 · 数据展示. Original: ElAvatar. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/avatar.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiAvatarGroup
+
+头像组 · 数据展示. Original: ElAvatarGroup. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/avatar.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiBacktop
+
+回到顶部 · 导航组件. Original: ElBacktop. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/backtop.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiBadge
+
+徽标 · 数据展示. Original: ElBadge. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/badge.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiBreadcrumb
+
+面包屑 · 导航组件. Original: ElBreadcrumb. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/breadcrumb.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiBreadcrumbItem
+
+面包屑项 · 导航组件. Original: ElBreadcrumbItem. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/breadcrumb.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiConfigProvider
+
+全局配置 · 其他与配置. Original: ElConfigProvider. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/config-provider.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## UiButton
+
+按钮 · 基础组件. Original: ElButton. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/button.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiButtonGroup
+
+按钮组 · 基础组件. Original: ElButtonGroup. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/button.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiTimePicker
+
+时间选择器 · 表单组件. Original: ElTimePicker. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/time-picker.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiTag
+
+标签 · 数据展示. Original: ElTag. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/tag.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiSelect
+
+选择器 · 表单组件. Original: ElSelect. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/select.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiOption
+
+选项 · 表单组件. Original: ElOption. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/select.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## UiOptionGroup
+
+选项组 · 表单组件. Original: ElOptionGroup. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/select.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## UiCalendar
+
+日历 · 数据展示. Original: ElCalendar. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/calendar.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiCard
+
+卡片 · 数据展示. Original: ElCard. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/card.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiCarousel
+
+轮播 · 数据展示. Original: ElCarousel. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/carousel.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiCarouselItem
+
+轮播项 · 数据展示. Original: ElCarouselItem. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/carousel.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## UiCheckbox
+
+复选框 · 表单组件. Original: ElCheckbox. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/checkbox.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-### Props
+## UiCheckboxButton
 
-| Name | Type | Required | Default expression |
-|---|---|---|---|
-| direction | 'horizontal' &#124; 'vertical' | false | 'horizontal' |
-| active | string | false | '' |
-| items | ProjectMenuItem[] | false | () => [] |
-| groups | ProjectMenuGroup[] | false | () => [] |
+复选按钮 · 表单组件. Original: ElCheckboxButton. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/checkbox.html). See dist/components/element-plus.d.ts.
 
-### Events
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-- `update:active` — `[key: string]`
-- `select` — `[item: ProjectMenuItem]`
+## UiCheckboxGroup
 
-Slots: No declared content slots.
+复选框组 · 表单组件. Original: ElCheckboxGroup. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/checkbox.html). See dist/components/element-plus.d.ts.
 
-```ts
-export interface ProjectMenuItem { key: string; label: string; disabled?: boolean; icon?: Component }
-export interface ProjectMenuGroup { label: string; items: ProjectMenuItem[] }
-```
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-## MapSideMenu
+## UiRadio
 
-### Props
+单选框 · 表单组件. Original: ElRadio. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/radio.html). See dist/components/element-plus.d.ts.
 
-| Name | Type | Required | Default expression |
-|---|---|---|---|
-| title | string | false | '实况(测站)' |
-| active | string | false | 'rain' |
-| dark | boolean | false | false |
-| compact | boolean | false | false |
-| items | MapMenuItem[] | false | () => [
-    { key: 'rain', label: '降水', icon: Pouring },
-    { key: 'reservoir-level', label: '水库水位', icon: List },
-    { key: 'reservoir-flow', label: '水库径流', icon: TrendCharts },
-    { key: 'river-level', label: '河道水位', icon: List },
-    { key: 'river-flow', label: '河道径流', icon: TrendCharts },
-    { key: 'temperature', label: '气温', icon: Sunny },
-    { key: 'wind', label: '风速', icon: WindPower }
-  ] |
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-### Events
+## UiRadioButton
 
-- `update:active` — `[key: string]`
-- `update:compact` — `[value: boolean]`
-- `select` — `[item: MapMenuItem]`
+单选按钮 · 表单组件. Original: ElRadioButton. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/radio.html). See dist/components/element-plus.d.ts.
 
-Slots: No declared content slots.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-```ts
-export interface MapMenuItem { key: string; label: string; icon?: Component }
-```
+## UiRadioGroup
 
-## MapTools
+单选框组 · 表单组件. Original: ElRadioGroup. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/radio.html). See dist/components/element-plus.d.ts.
 
-### Props
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-| Name | Type | Required | Default expression |
-|---|---|---|---|
-| active | string | false | 'layers' |
-| horizontal | boolean | false | false |
-| icons | Record<string, Component> | false | () => ({}) |
+## UiCascaderPanel
 
-### Events
+级联面板 · 表单组件. Original: ElCascaderPanel. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/cascader.html). See dist/components/element-plus.d.ts.
 
-- `update:active` — `[key: string]`
-- `tool-click` — `[key: string]`
-- `context-change` — `[enabled: boolean]`
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Slots: No declared content slots.
+## UiCascader
 
-## AtlasMapTitle
+级联选择器 · 表单组件. Original: ElCascader. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/cascader.html). See dist/components/element-plus.d.ts.
 
-### Props
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-| Name | Type | Required | Default expression |
-|---|---|---|---|
-| title | string | true | undefined / no declared default |
-| subtitle | string | false | '' |
-| rightOpen | boolean | false | false |
+## UiCheckTag
 
-### Events
+可选标签 · 数据展示. Original: ElCheckTag. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/check-tag.html). See dist/components/element-plus.d.ts.
 
-No declared events.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Slots: No declared content slots.
+## UiRow
 
-## AtlasRightToggleButton
+栅格行 · 基础组件. Original: ElRow. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/layout.html). See dist/components/element-plus.d.ts.
 
-### Props
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-| Name | Type | Required | Default expression |
-|---|---|---|---|
-| open | boolean | false | false |
-| openTitle | string | false | '展开右侧面板' |
-| closeTitle | string | false | '收起右侧面板' |
+## UiCol
 
-### Events
+栅格列 · 基础组件. Original: ElCol. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/layout.html). See dist/components/element-plus.d.ts.
 
-- `toggle` — `[]`
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Slots: No declared content slots.
+## UiCollapseTransition
 
-## ProcessDataTable
+折叠动画 · 基础组件. Original: ElCollapseTransition. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/transition.html). See dist/components/element-plus.d.ts.
 
-### Props
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
 
-| Name | Type | Required | Default expression |
-|---|---|---|---|
-| times | string[] | true | undefined / no declared default |
-| series | { name: string; data: (number &#124; null)[] }[] | true | undefined / no declared default |
-| loading | boolean | false | undefined / no declared default |
+## UiCollapse
 
-### Events
+折叠面板 · 数据展示. Original: ElCollapse. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/collapse.html). See dist/components/element-plus.d.ts.
 
-No declared events.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Slots: No declared content slots.
+## UiCollapseItem
 
-## UiAlert
+折叠项 · 数据展示. Original: ElCollapseItem. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/collapse.html). See dist/components/element-plus.d.ts.
 
-Original: ElAlert. [API](https://element-plus.org/en-US/component/alert.html). See dist/components/element-plus.d.ts.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-## UiBadge
+## UiColorPickerPanel
 
-Original: ElBadge. [API](https://element-plus.org/en-US/component/badge.html). See dist/components/element-plus.d.ts.
+颜色面板 · 表单组件. Original: ElColorPickerPanel. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/color-picker-panel.html). See dist/components/element-plus.d.ts.
 
-## UiButton
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiColorPicker
 
-Original: ElButton. [API](https://element-plus.org/en-US/component/button.html). See dist/components/element-plus.d.ts.
+颜色选择器 · 表单组件. Original: ElColorPicker. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/color-picker.html). See dist/components/element-plus.d.ts.
 
-## UiButtonGroup
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElButtonGroup. [API](https://element-plus.org/en-US/component/button-group.html). See dist/components/element-plus.d.ts.
+## UiContainer
 
-## UiCard
+布局容器 · 基础组件. Original: ElContainer. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/container.html). See dist/components/element-plus.d.ts.
 
-Original: ElCard. [API](https://element-plus.org/en-US/component/card.html). See dist/components/element-plus.d.ts.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-## UiCarousel
+## UiAside
 
-Original: ElCarousel. [API](https://element-plus.org/en-US/component/carousel.html). See dist/components/element-plus.d.ts.
+侧栏 · 基础组件. Original: ElAside. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/container.html). See dist/components/element-plus.d.ts.
 
-## UiCarouselItem
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElCarouselItem. [API](https://element-plus.org/en-US/component/carousel-item.html). See dist/components/element-plus.d.ts.
+## UiFooter
 
-## UiCascader
+底栏 · 基础组件. Original: ElFooter. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/container.html). See dist/components/element-plus.d.ts.
 
-Original: ElCascader. [API](https://element-plus.org/en-US/component/cascader.html). See dist/components/element-plus.d.ts.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-## UiCheckbox
+## UiHeader
 
-Original: ElCheckbox. [API](https://element-plus.org/en-US/component/checkbox.html). See dist/components/element-plus.d.ts.
+顶栏 · 基础组件. Original: ElHeader. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/container.html). See dist/components/element-plus.d.ts.
 
-## UiCol
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElCol. [API](https://element-plus.org/en-US/component/col.html). See dist/components/element-plus.d.ts.
+## UiMain
 
-## UiCollapse
+主体 · 基础组件. Original: ElMain. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/container.html). See dist/components/element-plus.d.ts.
 
-Original: ElCollapse. [API](https://element-plus.org/en-US/component/collapse.html). See dist/components/element-plus.d.ts.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-## UiCollapseItem
+## UiStatistic
 
-Original: ElCollapseItem. [API](https://element-plus.org/en-US/component/collapse-item.html). See dist/components/element-plus.d.ts.
+统计数值 · 数据展示. Original: ElStatistic. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/statistic.html). See dist/components/element-plus.d.ts.
 
-## UiColorPicker
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElColorPicker. [API](https://element-plus.org/en-US/component/color-picker.html). See dist/components/element-plus.d.ts.
+## UiCountdown
 
-## UiConfigProvider
+倒计时 · 数据展示. Original: ElCountdown. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/statistic.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiDatePickerPanel
+
+日期面板 · 表单组件. Original: ElDatePickerPanel. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/date-picker-panel.html). See dist/components/element-plus.d.ts.
 
-Original: ElConfigProvider. [API](https://element-plus.org/en-US/component/config-provider.html). See dist/components/element-plus.d.ts.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiDatePicker
 
-Original: ElDatePicker. [API](https://element-plus.org/en-US/component/date-picker.html). See dist/components/element-plus.d.ts.
+日期选择器 · 表单组件. Original: ElDatePicker. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/date-picker.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiDescriptions
 
-Original: ElDescriptions. [API](https://element-plus.org/en-US/component/descriptions.html). See dist/components/element-plus.d.ts.
+描述列表 · 数据展示. Original: ElDescriptions. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/descriptions.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiDescriptionsItem
 
-Original: ElDescriptionsItem. [API](https://element-plus.org/en-US/component/descriptions-item.html). See dist/components/element-plus.d.ts.
+描述项 · 数据展示. Original: ElDescriptionsItem. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/descriptions.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiDialog
 
-Original: ElDialog. [API](https://element-plus.org/en-US/component/dialog.html). See dist/components/element-plus.d.ts.
+对话框 · 反馈组件. Original: ElDialog. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/dialog.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiDivider
+
+分割线 · 基础组件. Original: ElDivider. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/divider.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiDrawer
 
-Original: ElDrawer. [API](https://element-plus.org/en-US/component/drawer.html). See dist/components/element-plus.d.ts.
+抽屉 · 反馈组件. Original: ElDrawer. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/drawer.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiDropdown
 
-Original: ElDropdown. [API](https://element-plus.org/en-US/component/dropdown.html). See dist/components/element-plus.d.ts.
+下拉菜单 · 导航组件. Original: ElDropdown. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/dropdown.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiDropdownItem
 
-Original: ElDropdownItem. [API](https://element-plus.org/en-US/component/dropdown-item.html). See dist/components/element-plus.d.ts.
+下拉菜单项 · 导航组件. Original: ElDropdownItem. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/dropdown.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiDropdownMenu
 
-Original: ElDropdownMenu. [API](https://element-plus.org/en-US/component/dropdown-menu.html). See dist/components/element-plus.d.ts.
+下拉菜单面板 · 导航组件. Original: ElDropdownMenu. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/dropdown.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiEmpty
 
-Original: ElEmpty. [API](https://element-plus.org/en-US/component/empty.html). See dist/components/element-plus.d.ts.
+空状态 · 数据展示. Original: ElEmpty. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/empty.html). See dist/components/element-plus.d.ts.
 
-## UiFooter
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElFooter. [API](https://element-plus.org/en-US/component/footer.html). See dist/components/element-plus.d.ts.
+## UiImageViewer
 
-## UiForm
+图片预览 · 数据展示. Original: ElImageViewer. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/image.html). See dist/components/element-plus.d.ts.
 
-Original: ElForm. [API](https://element-plus.org/en-US/component/form.html). See dist/components/element-plus.d.ts.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-## UiFormItem
+## UiImage
 
-Original: ElFormItem. [API](https://element-plus.org/en-US/component/form-item.html). See dist/components/element-plus.d.ts.
+图片 · 数据展示. Original: ElImage. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/image.html). See dist/components/element-plus.d.ts.
 
-## UiIcon
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElIcon. [API](https://element-plus.org/en-US/component/icon.html). See dist/components/element-plus.d.ts.
+## UiInputNumber
 
-## UiImage
+数字输入框 · 表单组件. Original: ElInputNumber. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/input-number.html). See dist/components/element-plus.d.ts.
 
-Original: ElImage. [API](https://element-plus.org/en-US/component/image.html). See dist/components/element-plus.d.ts.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-## UiInput
+## UiInputTag
 
-Original: ElInput. [API](https://element-plus.org/en-US/component/input.html). See dist/components/element-plus.d.ts.
+标签输入框 · 表单组件. Original: ElInputTag. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/input-tag.html). See dist/components/element-plus.d.ts.
 
-## UiInputNumber
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElInputNumber. [API](https://element-plus.org/en-US/component/input-number.html). See dist/components/element-plus.d.ts.
+## UiInputOtp
 
-## UiMessage
+验证码输入框 · 表单组件. Original: ElInputOtp. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/input-otp.html). See dist/components/element-plus.d.ts.
 
-Original: ElMessage. [API](https://element-plus.org/en-US/component/message.html). See dist/components/element-plus.d.ts.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-## UiMessageBox
+## UiLink
 
-Original: ElMessageBox. [API](https://element-plus.org/en-US/component/message-box.html). See dist/components/element-plus.d.ts.
+链接 · 基础组件. Original: ElLink. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/link.html). See dist/components/element-plus.d.ts.
 
-## UiNotification
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElNotification. [API](https://element-plus.org/en-US/component/notification.html). See dist/components/element-plus.d.ts.
+## UiMenu
 
-## UiOption
+菜单 · 导航组件. Original: ElMenu. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/menu.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiMenuItem
+
+菜单项 · 导航组件. Original: ElMenuItem. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/menu.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## UiMenuItemGroup
+
+菜单分组 · 导航组件. Original: ElMenuItemGroup. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/menu.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
 
-Original: ElOption. [API](https://element-plus.org/en-US/component/option.html). See dist/components/element-plus.d.ts.
+## UiSubMenu
+
+子菜单 · 导航组件. Original: ElSubMenu. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/menu.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## UiPageHeader
+
+页头 · 导航组件. Original: ElPageHeader. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/page-header.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiPagination
 
-Original: ElPagination. [API](https://element-plus.org/en-US/component/pagination.html). See dist/components/element-plus.d.ts.
+分页 · 数据展示. Original: ElPagination. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/pagination.html). See dist/components/element-plus.d.ts.
 
-## UiPopconfirm
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElPopconfirm. [API](https://element-plus.org/en-US/component/popconfirm.html). See dist/components/element-plus.d.ts.
+## UiPopconfirm
 
-## UiPopover
+气泡确认 · 反馈组件. Original: ElPopconfirm. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/popconfirm.html). See dist/components/element-plus.d.ts.
 
-Original: ElPopover. [API](https://element-plus.org/en-US/component/popover.html). See dist/components/element-plus.d.ts.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiProgress
 
-Original: ElProgress. [API](https://element-plus.org/en-US/component/progress.html). See dist/components/element-plus.d.ts.
+进度条 · 数据展示. Original: ElProgress. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/progress.html). See dist/components/element-plus.d.ts.
 
-## UiRadio
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElRadio. [API](https://element-plus.org/en-US/component/radio.html). See dist/components/element-plus.d.ts.
+## UiRate
 
-## UiRadioGroup
+评分 · 表单组件. Original: ElRate. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/rate.html). See dist/components/element-plus.d.ts.
 
-Original: ElRadioGroup. [API](https://element-plus.org/en-US/component/radio-group.html). See dist/components/element-plus.d.ts.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-## UiRate
+## UiResult
 
-Original: ElRate. [API](https://element-plus.org/en-US/component/rate.html). See dist/components/element-plus.d.ts.
+结果 · 数据展示. Original: ElResult. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/result.html). See dist/components/element-plus.d.ts.
 
-## UiRow
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElRow. [API](https://element-plus.org/en-US/component/row.html). See dist/components/element-plus.d.ts.
+## UiSelectV2
 
-## UiScrollbar
+虚拟选择器 · 表单组件. Original: ElSelectV2. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/select-v2.html). See dist/components/element-plus.d.ts.
 
-Original: ElScrollbar. [API](https://element-plus.org/en-US/component/scrollbar.html). See dist/components/element-plus.d.ts.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-## UiSelect
+## UiSkeleton
 
-Original: ElSelect. [API](https://element-plus.org/en-US/component/select.html). See dist/components/element-plus.d.ts.
+骨架屏 · 数据展示. Original: ElSkeleton. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/skeleton.html). See dist/components/element-plus.d.ts.
 
-## UiSelectV2
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElSelectV2. [API](https://element-plus.org/en-US/component/select-v2.html). See dist/components/element-plus.d.ts.
+## UiSkeletonItem
+
+骨架元素 · 数据展示. Original: ElSkeletonItem. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/skeleton.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
 
 ## UiSlider
 
-Original: ElSlider. [API](https://element-plus.org/en-US/component/slider.html). See dist/components/element-plus.d.ts.
+滑块 · 表单组件. Original: ElSlider. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/slider.html). See dist/components/element-plus.d.ts.
 
-## UiSwitch
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElSwitch. [API](https://element-plus.org/en-US/component/switch.html). See dist/components/element-plus.d.ts.
+## UiSpace
 
-## UiTabPane
+间距 · 基础组件. Original: ElSpace. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/space.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiSteps
+
+步骤条 · 导航组件. Original: ElSteps. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/steps.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElTabPane. [API](https://element-plus.org/en-US/component/tab-pane.html). See dist/components/element-plus.d.ts.
+## UiStep
+
+步骤项 · 导航组件. Original: ElStep. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/steps.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## UiSwitch
+
+开关 · 表单组件. Original: ElSwitch. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/switch.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiTable
 
-Original: ElTable. [API](https://element-plus.org/en-US/component/table.html). See dist/components/element-plus.d.ts.
+表格 · 数据展示. Original: ElTable. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/table.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiTableColumn
 
-Original: ElTableColumn. [API](https://element-plus.org/en-US/component/table-column.html). See dist/components/element-plus.d.ts.
+表格列 · 数据展示. Original: ElTableColumn. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/table.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## UiTableV2
+
+虚拟表格 · 数据展示. Original: ElTableV2. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/table-v2.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiAutoResizer
+
+自动尺寸容器 · 数据展示. Original: ElAutoResizer. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/table-v2.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
 
 ## UiTabs
 
-Original: ElTabs. [API](https://element-plus.org/en-US/component/tabs.html). See dist/components/element-plus.d.ts.
+标签页 · 导航组件. Original: ElTabs. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/tabs.html). See dist/components/element-plus.d.ts.
 
-## UiTag
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiTabPane
 
-Original: ElTag. [API](https://element-plus.org/en-US/component/tag.html). See dist/components/element-plus.d.ts.
+标签页面板 · 导航组件. Original: ElTabPane. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/tabs.html). See dist/components/element-plus.d.ts.
 
-## UiTooltip
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## UiText
+
+文本 · 基础组件. Original: ElText. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/text.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiTimeSelect
+
+时间下拉选择 · 表单组件. Original: ElTimeSelect. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/time-select.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElTooltip. [API](https://element-plus.org/en-US/component/tooltip.html). See dist/components/element-plus.d.ts.
+## UiTimeline
+
+时间线 · 数据展示. Original: ElTimeline. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/timeline.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiTimelineItem
+
+时间线项 · 数据展示. Original: ElTimelineItem. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/timeline.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## UiTransfer
+
+穿梭框 · 表单组件. Original: ElTransfer. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/transfer.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiTree
 
-Original: ElTree. [API](https://element-plus.org/en-US/component/tree.html). See dist/components/element-plus.d.ts.
+树 · 数据展示. Original: ElTree. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/tree.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiTreeSelect
 
-Original: ElTreeSelect. [API](https://element-plus.org/en-US/component/tree-select.html). See dist/components/element-plus.d.ts.
+树选择器 · 表单组件. Original: ElTreeSelect. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/tree-select.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiTreeV2
+
+虚拟树 · 数据展示. Original: ElTreeV2. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/tree-v2.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
 ## UiUpload
 
-Original: ElUpload. [API](https://element-plus.org/en-US/component/upload.html). See dist/components/element-plus.d.ts.
+上传 · 表单组件. Original: ElUpload. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/upload.html). See dist/components/element-plus.d.ts.
 
-## UiCheckboxGroup
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-Original: ElCheckboxGroup. [API](https://element-plus.org/en-US/component/checkbox-group.html). See dist/components/element-plus.d.ts.
+## UiWatermark
 
-## UiRadioButton
+水印 · 其他与配置. Original: ElWatermark. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/watermark.html). See dist/components/element-plus.d.ts.
 
-Original: ElRadioButton. [API](https://element-plus.org/en-US/component/radio-button.html). See dist/components/element-plus.d.ts.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
 
-## UiDivider
+## UiTour
+
+引导 · 反馈组件. Original: ElTour. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/tour.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiTourStep
+
+引导步骤 · 反馈组件. Original: ElTourStep. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/tour.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## UiAnchor
+
+锚点 · 导航组件. Original: ElAnchor. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/anchor.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiAnchorLink
+
+锚点链接 · 导航组件. Original: ElAnchorLink. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/anchor.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## UiSegmented
+
+分段控制器 · 数据展示. Original: ElSegmented. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/segmented.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiMention
+
+提及 · 表单组件. Original: ElMention. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/mention.html). See dist/components/element-plus.d.ts.
 
-Original: ElDivider. [API](https://element-plus.org/en-US/component/divider.html). See dist/components/element-plus.d.ts.
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiSplitter
+
+分割面板 · 其他与配置. Original: ElSplitter. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/splitter.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiSplitterPanel
+
+分割区域 · 其他与配置. Original: ElSplitterPanel. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/splitter.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## UiPopover
+
+气泡卡片 · 反馈组件. Original: ElPopover. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/popover.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiMessage
+
+消息提示 · 反馈组件. Original: ElMessage. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/message.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiMessageBox
+
+消息确认 · 反馈组件. Original: ElMessageBox. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/message-box.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiNotification
+
+通知 · 反馈组件. Original: ElNotification. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/notification.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## UiLoading
+
+加载 · 反馈组件. Original: ElLoading. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/loading.html). See dist/components/element-plus.d.ts.
+
+Use UiLoading.service(options) or UiLoading.directive; no global plugin install.
 
 ## vUiLoading
 
-Original: ElLoadingDirective. [API](https://element-plus.org/en-US/component/loading.html). See dist/components/element-plus.d.ts.
+加载指令 · 反馈组件. Original: ElLoadingDirective. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/loading.html). See dist/components/element-plus.d.ts.
+
+Use upstream API and installed typings. Scoped wrapper may add display:contents container; supported teleported defaults to false; scoped floating classes are merged.
+
+## vUiInfiniteScroll
+
+无限滚动 · 其他与配置. Original: ElInfiniteScroll. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/infinite-scroll.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## vUiPopover
+
+气泡触发指令 · 其他与配置. Original: ElPopoverDirective. Import from: sky-ui-kit. [API](https://element-plus.org/zh-CN/component/popover.html). See dist/components/element-plus.d.ts.
+
+Preserves upstream structure and context. Structural children inherit theme from Ui parent; invisible components/directives retain upstream behavior.
+
+## 图标资源与注册
+
+`projectIcons`：内置 SVG 清单（name、category、source、followsColor、svg）。`ProjectIconName`：内置名称联合类型。
+
+`registerProjectIcons(names?: readonly string[], target?: Document): void`：按名称注册到指定文档，不传 names 注册全部；SSR 无文档时不执行。默认命名空间 sky-icon-，重复调用不重复插入。SvgIcon 自动注册当前内置图标；prefix 非 sky-icon- 时由使用方提供 sprite。未知名称不显示图形。
+
+
+# Element Plus 完整组件目录
+
+基准版本：2.14.7。共 111 个主 / 子组件、4 个服务出口、3 个指令出口。另保留 11 个项目特色组件。
+
+清单覆盖官方组件注册表及服务 / 指令，不包含内部工具函数。出口覆盖不代表所有组件的交互、独立示例和视觉状态均已验证。网站每项均提供导入和官方 API 索引，新增组合示例见 AI-GUIDE.md。
+
+组件使用 Ui 前缀；滚动条例外，直接从 element-plus 使用 ElScrollbar，不提供库出口。项目组件保持原名。结构子组件应放在相应 Ui 父组件下；配置组件和无界面指令保留官方语义。UiLoading 提供 service / directive，不提供 install。
+
+## 导航组件
+
+| 名称 | 库出口 | 官方实现 | 方式 | API |
+|---|---|---|---|---|
+| 固钉 | UiAffix | ElAffix | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/affix.html) |
+| 回到顶部 | UiBacktop | ElBacktop | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/backtop.html) |
+| 面包屑 | UiBreadcrumb | ElBreadcrumb | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/breadcrumb.html) |
+| 面包屑项 | UiBreadcrumbItem | ElBreadcrumbItem | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/breadcrumb.html) |
+| 下拉菜单 | UiDropdown | ElDropdown | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/dropdown.html) |
+| 下拉菜单项 | UiDropdownItem | ElDropdownItem | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/dropdown.html) |
+| 下拉菜单面板 | UiDropdownMenu | ElDropdownMenu | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/dropdown.html) |
+| 菜单 | UiMenu | ElMenu | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/menu.html) |
+| 菜单项 | UiMenuItem | ElMenuItem | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/menu.html) |
+| 菜单分组 | UiMenuItemGroup | ElMenuItemGroup | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/menu.html) |
+| 子菜单 | UiSubMenu | ElSubMenu | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/menu.html) |
+| 页头 | UiPageHeader | ElPageHeader | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/page-header.html) |
+| 步骤条 | UiSteps | ElSteps | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/steps.html) |
+| 步骤项 | UiStep | ElStep | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/steps.html) |
+| 标签页 | UiTabs | ElTabs | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tabs.html) |
+| 标签页面板 | UiTabPane | ElTabPane | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tabs.html) |
+| 锚点 | UiAnchor | ElAnchor | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/anchor.html) |
+| 锚点链接 | UiAnchorLink | ElAnchorLink | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/anchor.html) |
+
+## 基础组件
+
+| 名称 | 库出口 | 官方实现 | 方式 | API |
+|---|---|---|---|---|
+| 图标 | UiIcon | ElIcon | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/icon.html) |
+| 滚动条 | ElScrollbar | ElScrollbar | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/scrollbar.html) |
+| 按钮 | UiButton | ElButton | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/button.html) |
+| 按钮组 | UiButtonGroup | ElButtonGroup | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/button.html) |
+| 栅格行 | UiRow | ElRow | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/layout.html) |
+| 栅格列 | UiCol | ElCol | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/layout.html) |
+| 折叠动画 | UiCollapseTransition | ElCollapseTransition | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/transition.html) |
+| 布局容器 | UiContainer | ElContainer | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/container.html) |
+| 侧栏 | UiAside | ElAside | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/container.html) |
+| 底栏 | UiFooter | ElFooter | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/container.html) |
+| 顶栏 | UiHeader | ElHeader | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/container.html) |
+| 主体 | UiMain | ElMain | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/container.html) |
+| 分割线 | UiDivider | ElDivider | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/divider.html) |
+| 链接 | UiLink | ElLink | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/link.html) |
+| 间距 | UiSpace | ElSpace | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/space.html) |
+| 文本 | UiText | ElText | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/text.html) |
+
+## 反馈组件
+
+| 名称 | 库出口 | 官方实现 | 方式 | API |
+|---|---|---|---|---|
+| 警告提示 | UiAlert | ElAlert | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/alert.html) |
+| 文字提示 | UiTooltip | ElTooltip | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tooltip.html) |
+| 对话框 | UiDialog | ElDialog | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/dialog.html) |
+| 抽屉 | UiDrawer | ElDrawer | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/drawer.html) |
+| 气泡确认 | UiPopconfirm | ElPopconfirm | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/popconfirm.html) |
+| 引导 | UiTour | ElTour | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tour.html) |
+| 引导步骤 | UiTourStep | ElTourStep | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tour.html) |
+| 气泡卡片 | UiPopover | ElPopover | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/popover.html) |
+| 消息提示 | UiMessage | ElMessage | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/message.html) |
+| 消息确认 | UiMessageBox | ElMessageBox | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/message-box.html) |
+| 通知 | UiNotification | ElNotification | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/notification.html) |
+| 加载 | UiLoading | ElLoading | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/loading.html) |
+| 加载指令 | vUiLoading | ElLoadingDirective | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/loading.html) |
+
+## 表单组件
+
+| 名称 | 库出口 | 官方实现 | 方式 | API |
+|---|---|---|---|---|
+| 表单 | UiForm | ElForm | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/form.html) |
+| 表单项 | UiFormItem | ElFormItem | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/form.html) |
+| 输入框 | UiInput | ElInput | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/input.html) |
+| 自动补全 | UiAutocomplete | ElAutocomplete | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/autocomplete.html) |
+| 时间选择器 | UiTimePicker | ElTimePicker | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/time-picker.html) |
+| 选择器 | UiSelect | ElSelect | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/select.html) |
+| 选项 | UiOption | ElOption | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/select.html) |
+| 选项组 | UiOptionGroup | ElOptionGroup | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/select.html) |
+| 复选框 | UiCheckbox | ElCheckbox | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/checkbox.html) |
+| 复选按钮 | UiCheckboxButton | ElCheckboxButton | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/checkbox.html) |
+| 复选框组 | UiCheckboxGroup | ElCheckboxGroup | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/checkbox.html) |
+| 单选框 | UiRadio | ElRadio | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/radio.html) |
+| 单选按钮 | UiRadioButton | ElRadioButton | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/radio.html) |
+| 单选框组 | UiRadioGroup | ElRadioGroup | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/radio.html) |
+| 级联面板 | UiCascaderPanel | ElCascaderPanel | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/cascader.html) |
+| 级联选择器 | UiCascader | ElCascader | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/cascader.html) |
+| 颜色面板 | UiColorPickerPanel | ElColorPickerPanel | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/color-picker-panel.html) |
+| 颜色选择器 | UiColorPicker | ElColorPicker | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/color-picker.html) |
+| 日期面板 | UiDatePickerPanel | ElDatePickerPanel | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/date-picker-panel.html) |
+| 日期选择器 | UiDatePicker | ElDatePicker | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/date-picker.html) |
+| 数字输入框 | UiInputNumber | ElInputNumber | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/input-number.html) |
+| 标签输入框 | UiInputTag | ElInputTag | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/input-tag.html) |
+| 验证码输入框 | UiInputOtp | ElInputOtp | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/input-otp.html) |
+| 评分 | UiRate | ElRate | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/rate.html) |
+| 虚拟选择器 | UiSelectV2 | ElSelectV2 | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/select-v2.html) |
+| 滑块 | UiSlider | ElSlider | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/slider.html) |
+| 开关 | UiSwitch | ElSwitch | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/switch.html) |
+| 时间下拉选择 | UiTimeSelect | ElTimeSelect | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/time-select.html) |
+| 穿梭框 | UiTransfer | ElTransfer | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/transfer.html) |
+| 树选择器 | UiTreeSelect | ElTreeSelect | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tree-select.html) |
+| 上传 | UiUpload | ElUpload | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/upload.html) |
+| 提及 | UiMention | ElMention | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/mention.html) |
+
+## 其他与配置
+
+| 名称 | 库出口 | 官方实现 | 方式 | API |
+|---|---|---|---|---|
+| 底层浮层 | UiPopper | ElPopper | 保留结构 / 无界面行为 | [官方文档 / 源码](https://github.com/element-plus/element-plus/tree/2.14.7/packages/components/popper) |
+| 全局配置 | UiConfigProvider | ElConfigProvider | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/config-provider.html) |
+| 水印 | UiWatermark | ElWatermark | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/watermark.html) |
+| 分割面板 | UiSplitter | ElSplitter | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/splitter.html) |
+| 分割区域 | UiSplitterPanel | ElSplitterPanel | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/splitter.html) |
+| 无限滚动 | vUiInfiniteScroll | ElInfiniteScroll | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/infinite-scroll.html) |
+| 气泡触发指令 | vUiPopover | ElPopoverDirective | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/popover.html) |
+
+## 数据展示
+
+| 名称 | 库出口 | 官方实现 | 方式 | API |
+|---|---|---|---|---|
+| 头像 | UiAvatar | ElAvatar | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/avatar.html) |
+| 头像组 | UiAvatarGroup | ElAvatarGroup | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/avatar.html) |
+| 徽标 | UiBadge | ElBadge | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/badge.html) |
+| 标签 | UiTag | ElTag | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tag.html) |
+| 日历 | UiCalendar | ElCalendar | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/calendar.html) |
+| 卡片 | UiCard | ElCard | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/card.html) |
+| 轮播 | UiCarousel | ElCarousel | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/carousel.html) |
+| 轮播项 | UiCarouselItem | ElCarouselItem | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/carousel.html) |
+| 可选标签 | UiCheckTag | ElCheckTag | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/check-tag.html) |
+| 折叠面板 | UiCollapse | ElCollapse | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/collapse.html) |
+| 折叠项 | UiCollapseItem | ElCollapseItem | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/collapse.html) |
+| 统计数值 | UiStatistic | ElStatistic | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/statistic.html) |
+| 倒计时 | UiCountdown | ElCountdown | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/statistic.html) |
+| 描述列表 | UiDescriptions | ElDescriptions | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/descriptions.html) |
+| 描述项 | UiDescriptionsItem | ElDescriptionsItem | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/descriptions.html) |
+| 空状态 | UiEmpty | ElEmpty | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/empty.html) |
+| 图片预览 | UiImageViewer | ElImageViewer | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/image.html) |
+| 图片 | UiImage | ElImage | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/image.html) |
+| 分页 | UiPagination | ElPagination | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/pagination.html) |
+| 进度条 | UiProgress | ElProgress | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/progress.html) |
+| 结果 | UiResult | ElResult | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/result.html) |
+| 骨架屏 | UiSkeleton | ElSkeleton | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/skeleton.html) |
+| 骨架元素 | UiSkeletonItem | ElSkeletonItem | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/skeleton.html) |
+| 表格 | UiTable | ElTable | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/table.html) |
+| 表格列 | UiTableColumn | ElTableColumn | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/table.html) |
+| 虚拟表格 | UiTableV2 | ElTableV2 | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/table-v2.html) |
+| 自动尺寸容器 | UiAutoResizer | ElAutoResizer | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/table-v2.html) |
+| 时间线 | UiTimeline | ElTimeline | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/timeline.html) |
+| 时间线项 | UiTimelineItem | ElTimelineItem | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/timeline.html) |
+| 树 | UiTree | ElTree | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tree.html) |
+| 虚拟树 | UiTreeV2 | ElTreeV2 | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tree-v2.html) |
+| 分段控制器 | UiSegmented | ElSegmented | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/segmented.html) |
+
+## 维护
+
+升级 Element Plus 后运行 `npm run components:sync`，审查新增组件、中文名称、分类、父子关系及最低依赖版本，再运行 `npm run docs:ai`。仅同步源码与文档，不构建或发布。
+
+# 原项目全局适配与组件库融合
+
+## 已读取的实际链路
+
+- main.ts：createFitScale，target #app，设计尺寸 1920×912，scaleMode auto；注册 Pinia / router，注册 SVG sprite。
+- App.vue：useFitScale → watch → document.documentElement 的 --cp-vfit-scale；主题 store 的 deep watch 调用 applyCssVars，卸载释放 watch 并移除 scale。根 ElConfigProvider 保留中文 locale。
+- styles/vfit-vars.scss：--cp-size-1…360 与 --cp-font-1…40 按缩放值计算；部分图表高度使用 clamp 与视口约束。
+- styles/theme.css / stores/theme.ts：六色与派生主题、--header-height / --sidebar-width / --rightpanel-width / --layout-gutter，以及 Element Plus 变量；主题 store 保留为唯一控制者。
+- styles/base.css / MainLayout：html/body/#app 的高度链、box-sizing、字体继承、workspace 扣除 header 高度。
+- MainLayoutMap / TemplateLayout：地图与 pointer-events:none 覆盖层分离，交互区域恢复事件；右栏开关影响浮层位置，ResizeObserver 测量时间轴和图例并在卸载释放。map/index.vue 挂载后 nextTick 调用 map.resize。
+
+## 融合分工
+
+| 内容 | 原项目维护 | 组件库消费 |
+|---|---|---|
+| 视口与设计尺寸 | VFit 单次注册，1920×912 auto | 不注册 VFit，不管理窗口缩放 |
+| 全局缩放 | App.vue 写根 --cp-vfit-scale | 局部尺寸 token 根据该变量计算，缺失按 1 |
+| 主题 | 原主题 store、六色、暗色、字体与 localStorage | 读取变量并提供缺失默认值；不迁入预览站 store |
+| 页面结构 | RouterView、权限、ui store、布局开关 | Ui 容器及项目展示组件组合 |
+| 地图与图表 | 地图实例、resize、图层订阅、图表 resize、释放 | 工具、菜单、时间轴事件由页面接回原逻辑 |
+| 浮层 | 根主题变量与现有弹窗配置 | 默认主题范围；显式 body 浮层另核对主题和缩放 |
+
+默认 style.css 的 scoped-vfit.scss 不把 --cp-vfit-scale 重置为 1；其低优先级默认 token 在 .userssite-theme 内计算。原项目根节点已有的六色与布局变量由 --userssite-* 桥接读取。库没有全局 html/body reset，保留原 base.css。ElScrollbar 直接从 element-plus 使用；它的主题来自应用已有作用域，不额外包装。
+
+## 接入步骤
+
+1. 保留原 main.ts 的 VFit、Pinia、路由、SVG、字体与主题导入，公共库 CSS 追加一次；默认不引入 global.css。原项目已有 VFit，不重新安装、注册或另设设计尺寸。
+2. 保留 App.vue 的 scale 和 theme 两个 watch；不要在单个页面重复写根变量或引入组件库预览 store。复制代码见 AI-GUIDE.md 的全局适配示例，布局页面也提供相同代码。
+3. 页面容器用 --header-height / --sidebar-width / --rightpanel-width / --layout-gutter，内容 min-width/min-height:0。系统页内部滚动用 ElScrollbar；地图页面保持地图与覆盖层分离，避免整层拦截鼠标。
+4. 组件已通过 --cp-font-* / --cp-size-* 消费比例时，不再添加第二套 transform:scale / zoom。原项目 VFit 本身的行为保留；这里只禁止迁移时额外引入新的缩放层。
+5. 右栏、左栏或底部过程区改变地图宿主尺寸时，由应用在 DOM 更新/过渡完成后调用地图 resize；ECharts 在容器尺寸变化时调用实例 resize。原 map/index.vue 的挂载 resize 不等于已覆盖所有后续布局变化，不把这项能力宣称为库自动处理。
+6. body 上的 dialog / drawer / select / image preview 不能读取局部容器独有变量。原项目根 scale/theme 可被它们继承；局部主题需显式传 class/style 或保持浮层在容器内，并检查 overflow 裁剪。
+
+## 窄屏与验证
+
+全局比例适配解决设计尺寸缩放，内容重排仍由布局负责；必要时收起侧栏、把业务面板改为抽屉、允许表格水平滚动。演示布局的紧凑宽度为预览用途，不等于原生产布局参数；真实页面优先使用原布局变量。地图色带、业务阈值和图片点位不随六色替换。
+
+在 1920×912、较小桌面和窄屏下核对：根 scale 值、控件字体和高度、左右面板避让、时间轴/图例重叠、地图/图表 resize、弹窗与图片预览、键盘焦点和滚动。明暗主题分别验证，关闭页面确认 watch / ResizeObserver / 地图图表监听释放。当前只读审查与文档示例不替代原项目运行回归；本次未修改原项目。
+
+# 原项目组件适配方案
+
+## 范围与依据
+
+本方案对应 2026-10-12 原项目当前工作区的只读源码扫描。实际使用数量和路径以 COMPONENT-USAGE.md / component-usage.json 为准；全页面调用见 LEGACY-USAGE.md。扫描包括未提交源码，只用于理解调用方式，不把这些业务改动迁入库。当前库源码尚未构建发布，安装 npm latest 不会自动得到这些新功能。
+
+## 分模块适配
+
+| 模块与原调用 | 库出口 / 处理方式 | 要保留的接线与验证 |
+|---|---|---|
+| global/SvgIcon.vue；SideMenuMap 读取 route.meta.icon | SvgIcon；内置资源自动注册，原 sprite 用 prefix="icon-" | name / size / title / decorative；主题继承、固定色与多色、选中图标、同名子目录；详见下文图标方案 |
+| common/AppSelect.vue（ElSelectV2） | AppSelect；保留 options 数据形式 | v-model 的值类型、multiple、filterable、clearable、change；不要改成 UiSelect 的 Option 插槽 |
+| common/TreeSelectPanel.vue | TreeSelectPanel | categories / v-model；select(node, category)、change({ node, category })；行政区/流域数据由页面准备，保留 motion-v |
+| common/TimeRangeQuickSelect.vue | TimeRangeQuickSelect | key 值 v-model；change 返回选项，页面据此查询，不把请求放进库 |
+| common/MapTimeline.vue | MapTimeline | v-model 是索引；change 返回 TimelinePoint。保留时区、范围、播放/暂停、步进、日期跳转；业务方清理查询与地图订阅 |
+| atlas/AtlasMapTitle.vue | AtlasMapTitle | title/subtitle/rightOpen；父容器 relative，右面板宽度由主题变量提供 |
+| atlas/AtlasRightToggleButton.vue | AtlasRightToggleButton | open + toggle，保留 ui store；不是 v-model:open |
+| atlas/ProcessDataTable.vue | ProcessDataTable | times / series / loading；缺测值、单位、分页、请求状态；不是 TableLayout 的替代品 |
+| Header / SideMenu 的菜单部分 | ProjectMenu horizontal / vertical + 薄适配层 | routes 转 items/groups，select 返回 item；路由、权限过滤、用户信息、区域选择、布局折叠留应用。横向当前纯文字，不承诺 item.icon 显示 |
+| SideMenuMap 多分类树、meta.icon | MapSideMenu + 单分类选择适配 | 当前库只支持一个 title + 扁平 items。父子分类、动态路由和自动展开仍在业务层；不能把原 sections 原样传入，也不应承诺整组件替换 |
+| MapToolbar 的按钮部分 | MapTools，icons 可覆盖 | active 双向绑定；tool-click(key) 接刷新/定位/面板，context-change(boolean) 接右键开关。没有外部 contextEnabled prop；外部状态同步需求须另行设计 |
+| ElSelect / ElOption、ElCascader 等标准表单 | 对应 Ui 出口，成组替换父子组件 | value-key / props 映射、懒加载、联动、校验、disabled；原 common/index.vue 的行政区 JSON、请求、区域绘制仍在应用 |
+| ElForm / ElTable / ElTableV2 / ElUpload | UiForm / UiTable / UiTableV2 / UiUpload | rules、ref 方法、分页、排序、selection、columns cellRenderer、上传 action/http-request、鉴权与回调。表格类型 Columns、TableV2Alignment 等仍从 element-plus 导入 |
+| ElDialog / ElDrawer / ElPopover / ElImage | UiDialog / UiDrawer / UiPopover / UiImage | v-model、footer/reference/placeholder/error 插槽、关闭事件、图片预览；浮层 teleport 单独核对主题与裁剪 |
+| ElMessage / ElMessageBox / ElNotification；v-loading | UiMessage / UiMessageBox / UiNotification；vUiLoading | 服务参数、确认/取消 promise、目标容器；指令通过 script setup 导入后用 v-ui-loading，不能只改模板却漏 import |
+| TableLayout / EchartLayout / AtlasProcessChart / RainfallRankingTable | 暂留业务组件；未来先抽纯展示层 | 数据格式、雨量等级、单位、虚拟滚动、图表 option 和站点定位，仍由原模块处理；当前不导出同名库组件 |
+| LayerControl / LayerTreeNode / MapValueLegend / MapLegend / SpaceAnalysisPanel | 暂留应用，后续单模块提取 | MapLibre 引用、图层 store、GIS 文件、色带阈值、图层显隐、监听与释放。业务色带不替换成通用主题主色 |
+| EngineeringDetails / GateDetails / ReservoirDetails / MediaLayerDetails / PanoramaViewer | 暂留应用；内部基础控件可局部用 Ui | 请求、字段映射、全景实例、图片/视频 URL、错误重试；不得认为地图详情已由包提供 |
+| MainLayout / TemplateLayout / RightPanel / AsyncRoutePage | 暂留应用 | RouterView、异步路由、缓存、布局状态、地图生命周期、主题 store、VFit |
+| PersonalInfo / UserRegionAccess / RegionDrawDialog / AccessManage | 暂留应用；内部标准表单可局部替换 | 用户、角色、权限、密码处理、行政区绑定与绘制；这些工作区新业务能力不属于组件包 |
+| BatchInfoPopover / timeline/index / titlebar/index / widgets/Legend / status/* | 暂留应用并按源码逐项核对 | 气象批次转换、旧组件调用、模型状态查询；没有直接引用也不能直接删除 |
+
+## 图标两种资源来源
+
+库内置图标：安装 sky-ui-kit，页面从包导入 SvgIcon，使用默认 sky-icon- 前缀；组件按需注册资源，不安装 Vite SVG 插件。维护自有图标：安装 vite-plugin-svg-icons，在 Vite 配置 iconDirs / symbolId，在 main.ts 导入 virtual:svg-icons-register，页面传 prefix="icon-"。两套可并存，避免重复全局注册 SvgIcon。
+
+新项目推荐 symbolId: 'icon-[dir]-[name]'：根目录 company.svg 对应 name="company"，weather/rain.svg 对应 name="weather-rain"。原项目已使用 'icon-[name]'，首轮保留规则；变更前检查全部 SvgIcon.name 和路由 meta.icon。库内置子目录名称按 projectIcons.source/name 对照，不默认与旧 sprite 同名。禁止直接把未验证的 SVG 名称字符串传给菜单 icon 属性；应转换为 Vue 组件。
+
+页面配置示例和 Vite 完整步骤由 src/icon-setup-examples.ts 生成到 AI-GUIDE.md，也展示在图标页面。单色 SVG 用 currentColor 继承颜色；固定 fill/stroke 需保留或经确认后修改。CSS 的 color 不会覆盖硬编码路径颜色。
+
+## 路由与 SVG 图标适配示例
+
+以下为应用侧转换函数，可复制到应用自己的 adapter.ts；库不依赖 vue-router。只转换当前分类的直接叶子节点，权限与可见性由调用方先过滤。
+
+```ts
+import { h } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import { SvgIcon } from 'sky-ui-kit'
+
+export function toMapMenuItems(visibleLeaves: RouteRecordRaw[]) {
+  return visibleLeaves.map(route => ({
+    key: String(route.name ?? route.path),
+    label: String(route.meta?.title ?? route.path),
+    // 保留原 icon-[name] sprite；若用库快照，核对 name 后移除 prefix。
+    icon: () => h(SvgIcon, {
+      name: String(route.meta?.icon || 'site'),
+      prefix: 'icon-',
+    }),
+  }))
+}
+```
 
+页面用 `MapSideMenu v-model:active="active" :items="items" @select="onSelect"`，onSelect 按 item.key 找回原路由，调用应用已有导航方法。当前分类切换、权限过滤、活动路由同步仍由应用控制。用 `MapTools :icons="{ layers: () => h(SvgIcon, { name: '已核对的图标名' }) }"` 覆盖工具图标前，先从 projectIcons 检查名称。
+
+## 主题、缩放和浮层
+
+### 布局容器页面
+
+UiContainer 展示系统顶部/侧栏/内容和地图浮动区域示例。原 MainLayoutMap 将地图与内容覆盖层分开，覆盖层 pointer-events:none，交互区域恢复 pointer-events；不要用全屏透明容器拦截地图。ContentLayoutSystem 保留 SideMenu、RouterView 和 ui 左栏状态；ContentLayoutNomenu 不新增菜单。TemplateLayout 保留原组件及其 top、toolbar、right、legend、timeline、content、right-toggle、map-toolbar-info 插槽，right-toggle 提供 open/toggle。rightPanelWidth、rightPanelDefaultOpen、rightPanelEnabled 是实际属性；部分原调用传 timeline-visible，但当前组件未声明它，不能把它当成库支持的属性。图层事件、resize、区域定位及 ResizeObserver 清理仍由原项目负责。
+
+1. 依赖声明：原项目 Element Plus ^2.14.2，库最低 ^2.14.7；范围有交集，先检查实际 lockfile/安装版本，低于最低版本才安排升级和回归。Vue、motion-v、icons 继续使用应用已有依赖。
+2. main.ts 中 Element Plus CSS 在前、sky-ui-kit/style.css 在后，仅引入一次。保留原主题 store、字体、base.css、VFit 和业务地图 popup / btn 样式。默认不用 global.css。
+3. 六色变量沿用 --color-bg / text / primary / border / surface / panel；--cp-font-* 与 VFit 保持原来源。预览站 store 和 localStorage 配置不迁入业务项目。
+4. 包装层可能增加 display:contents 容器，核对依赖直接子节点的 CSS 和 :deep(.el-*) 覆盖。结构子组件与父组件一起换为 Ui；ref 的 validate / clear / toggleRowSelection 等仍须页面验证。
+5. 默认浮层尽量留在主题范围，可能被 overflow 裁剪；显式 teleport / append-to-body 时检查根主题变量、浮层专用 class、层级与弹窗内下拉。UiImage 的预览浮层也要核对。
+
+## 迁移顺序与验证记录
+
+先接入公共 CSS 和一个独立页面，依次迁移图标与基础表单、四个 common 组件、地图标题/面板开关/过程表格，再做菜单与工具适配。地图、权限、视频等业务外壳最后逐模块评估。每次记录原路径、库版本、保留 API、主题差异、页面验证结果与回退点；只恢复本次修改的 imports 和适配层，不重置整个原项目。
+
+验收覆盖空/加载/失败/禁用、键盘焦点、明暗主题、VFit 与窄屏、浮层、表格 ref 方法、时间轴播放/时区、地图事件及资源释放。当前扫描和库类型检查不代表业务页面运行验证；本轮不执行构建、发布或修改原项目。
+
+# 原项目实际组件使用清单
+
+扫描日期：2026-10-12。只读扫描 src 下 590 个 Vue / TS / JS 文件（其中 424 个 Vue），排除生成 .d.ts。Element Plus 57 种模板组件，3 种服务导入，1 种指令；56 个公共 Vue 组件。次数表示引用文件数，不是实例数或调用次数。
+
+模板标签合并 ElXxx / el-xxx；服务统计显式导入，公共组件统计静态导入与全局 SvgIcon 标签。动态组件、别名标签、字符串拼接、自动注册和间接使用可能漏计；零直接引用不等于未使用。包含参考项目当前未提交源码，但未复制这些业务改动。详细路径见 component-usage.json，替换策略见 ADAPTATION.md。
+
+## Element Plus 模板组件
+
+| 原组件 | 库出口 | 引用文件数 | 使用位置示例 |
+|---|---|---:|---|
+| ElOption | UiOption | 184 | src/components/layout/RightPanel.vue<br>src/components/layout/UserRegionAccess.vue<br>src/components/map/StationLayerDetails.vue |
+| ElSelect | UiSelect | 184 | src/components/layout/RightPanel.vue<br>src/components/layout/UserRegionAccess.vue<br>src/components/map/StationLayerDetails.vue |
+| ElCascader | UiCascader | 143 | src/components/common/index.vue<br>src/components/layout/UserRegionAccess.vue<br>src/views/atlas/climateChange/ClimatePrec.vue |
+| ElIcon | UiIcon | 67 | src/components/atlas/AtlasRightToggleButton.vue<br>src/components/common/BatchInfoPopover.vue<br>src/components/common/MapTimeline.vue |
+| ElButton | UiButton | 60 | src/components/layout/PersonalInfo.vue<br>src/components/layout/RegionDrawDialog.vue<br>src/components/layout/RightPanel.vue |
+| ElDatePicker | UiDatePicker | 34 | src/components/common/MapTimeline.vue<br>src/components/echarts/EchartLayout.vue<br>src/components/map/StationLayerDetails.vue |
+| ElDialog | UiDialog | 27 | src/components/layout/PersonalInfo.vue<br>src/components/layout/RegionDrawDialog.vue<br>src/components/layout/TemplateLayout.vue |
+| ElInput | UiInput | 24 | src/components/layout/PersonalInfo.vue<br>src/components/layout/RightPanel.vue<br>src/components/table/TableLayout.vue |
+| ElUpload | UiUpload | 23 | src/views/atlas/video/dialog/dataMaintenance/components/BaseFormDrawer.vue<br>src/views/atlas/video/dialog/dataMaintenance/components/DefaultFormContent.vue<br>src/views/datamaint/maintenance/ImageList.vue |
+| ElForm | UiForm | 18 | src/components/layout/PersonalInfo.vue<br>src/components/layout/UserRegionAccess.vue<br>src/views/AccessSession.vue |
+| ElFormItem | UiFormItem | 18 | src/components/layout/PersonalInfo.vue<br>src/components/layout/UserRegionAccess.vue<br>src/views/AccessSession.vue |
+| ElImage | UiImage | 16 | src/components/map/EngineeringDetails.vue<br>src/components/map/MediaLayerDetails.vue<br>src/views/atlas/video/dialog/ImageViewer/index.vue |
+| ElTable | UiTable | 13 | src/components/map/StationLayerDetails.vue<br>src/views/atlas/video/dialog/flowWarningRecord.vue<br>src/views/atlas/video/dialog/flowWarningSettings.vue |
+| ElTableColumn | UiTableColumn | 13 | src/components/map/StationLayerDetails.vue<br>src/views/atlas/video/dialog/flowWarningRecord.vue<br>src/views/atlas/video/dialog/flowWarningSettings.vue |
+| ElEmpty | UiEmpty | 12 | src/components/common/TreeSelectPanel.vue<br>src/components/map/EngineeringDetails.vue<br>src/components/map/GateDetails.vue |
+| ElPagination | UiPagination | 11 | src/views/atlas/video/dialog/flowWarningRecord.vue<br>src/views/atlas/video/dialog/flowWarningSettings.vue<br>src/views/atlas/video/dialog/moreContentView/index.vue |
+| ElTag | UiTag | 11 | src/components/layout/PersonalInfo.vue<br>src/components/layout/UserRegionAccess.vue<br>src/views/atlas/video/dialog/detectionTask.vue |
+| ElScrollbar | ElScrollbar（直接从 element-plus 导入） | 10 | src/components/layout/RightPanel.vue<br>src/components/map/EngineeringDetails.vue<br>src/components/map/GateDetails.vue |
+| ElInputNumber | UiInputNumber | 6 | src/components/layout/RightPanel.vue<br>src/views/atlas/video/dialog/components/ThresholdDetailDialog.vue<br>src/views/atlas/video/dialog/videoModel.vue |
+| ElTooltip | UiTooltip | 6 | src/components/layout/SideMenu.vue<br>src/views/atlas/video/dialog/components/ImageViewer/index.vue<br>src/views/atlas/video/dialog/components/ThresholdDetailDialog.vue |
+| ElAlert | UiAlert | 5 | src/components/layout/RegionDrawDialog.vue<br>src/components/map/EngineeringDetails.vue<br>src/components/map/StationLayerDetails.vue |
+| ElDescriptions | UiDescriptions | 5 | src/components/map/EngineeringDetails.vue<br>src/components/map/StationLayerDetails.vue<br>src/components/status/wrfHydro/wrfHydroStatus.vue |
+| ElDescriptionsItem | UiDescriptionsItem | 5 | src/components/map/EngineeringDetails.vue<br>src/components/map/StationLayerDetails.vue<br>src/components/status/wrfHydro/wrfHydroStatus.vue |
+| ElSwitch | UiSwitch | 5 | src/components/layout/UserRegionAccess.vue<br>src/views/DefenseMapLinkage.vue<br>src/views/atlas/video/dialog/baseCanvas/index.vue |
+| ElButtonGroup | UiButtonGroup | 4 | src/components/status/wrfHydro/wrfHydroStatus.vue<br>src/components/status/wrf/wrfStatus.vue<br>src/views/atlas/video/dialog/detectionTask.vue |
+| ElSelectV2 | UiSelectV2 | 3 | src/components/common/AppSelect.vue<br>src/components/echarts/EchartLayout.vue<br>src/views/atlas/elments/components/RainfallProcessChart.vue |
+| ElCard | UiCard | 2 | src/components/status/wrfHydro/wrfHydroStatus.vue<br>src/components/status/wrf/wrfStatus.vue |
+| ElCheckbox | UiCheckbox | 2 | src/views/datamaint/system/AccessManage.vue<br>src/views/hydroforecast/mapHydro/map/components/layerControl.vue |
+| ElCol | UiCol | 2 | src/components/status/wrfHydro/wrfHydroStatus.vue<br>src/components/status/wrf/wrfStatus.vue |
+| ElDrawer | UiDrawer | 2 | src/views/DefenseMapLinkage.vue<br>src/views/atlas/video/dialog/dataMaintenance/components/BaseFormDrawer.vue |
+| ElFooter | UiFooter | 2 | src/components/status/wrfHydro/wrfHydroStatus.vue<br>src/components/status/wrf/wrfStatus.vue |
+| ElPopover | UiPopover | 2 | src/components/common/BatchInfoPopover.vue<br>src/views/hydroforecast/mapHydro/map/components/layerControl.vue |
+| ElProgress | UiProgress | 2 | src/components/status/wrfHydro/wrfHydroStatus.vue<br>src/components/status/wrf/wrfStatus.vue |
+| ElRadioGroup | UiRadioGroup | 2 | src/views/atlas/video/dialog/components/WarningProcessDialog.vue<br>src/views/datamaint/system/AccessManage.vue |
+| ElRow | UiRow | 2 | src/components/status/wrfHydro/wrfHydroStatus.vue<br>src/components/status/wrf/wrfStatus.vue |
+| ElSlider | UiSlider | 2 | src/views/atlas/video/dialog/videoModel.vue<br>src/views/atlas/video/dialog/videoZ.vue |
+| ElTabPane | UiTabPane | 2 | src/components/map/StationLayerDetails.vue<br>src/views/atlas/video/dialog/MapDialog.vue |
+| ElTabs | UiTabs | 2 | src/components/map/StationLayerDetails.vue<br>src/views/atlas/video/dialog/MapDialog.vue |
+| ElTree | UiTree | 2 | src/components/common/TreeSelectPanel.vue<br>src/views/datamaint/system/AccessManage.vue |
+| ElTreeSelect | UiTreeSelect | 2 | src/views/atlas/video/dialog/taskConfiguration.vue<br>src/views/datamaint/system/AccessManage.vue |
+| ElAutoResizer | UiAutoResizer | 1 | src/views/datamaint/system/AccessManage.vue |
+| ElBadge | UiBadge | 1 | src/views/atlas/video/dialog/detectionTask.vue |
+| ElCarousel | UiCarousel | 1 | src/components/map/EngineeringDetails.vue |
+| ElCarouselItem | UiCarouselItem | 1 | src/components/map/EngineeringDetails.vue |
+| ElCheckboxGroup | UiCheckboxGroup | 1 | src/views/datamaint/system/AccessManage.vue |
+| ElCollapse | UiCollapse | 1 | src/views/hydroforecast/mapHydro/map/components/layerControl.vue |
+| ElCollapseItem | UiCollapseItem | 1 | src/views/hydroforecast/mapHydro/map/components/layerControl.vue |
+| ElColorPicker | UiColorPicker | 1 | src/components/layout/RightPanel.vue |
+| ElConfigProvider | UiConfigProvider | 1 | src/App.vue |
+| ElDropdown | UiDropdown | 1 | src/views/atlas/video/dialog/components/ImageViewer/index.vue |
+| ElDropdownItem | UiDropdownItem | 1 | src/views/atlas/video/dialog/components/ImageViewer/index.vue |
+| ElDropdownMenu | UiDropdownMenu | 1 | src/views/atlas/video/dialog/components/ImageViewer/index.vue |
+| ElPopconfirm | UiPopconfirm | 1 | src/views/atlas/video/dialog/videoZ.vue |
+| ElRadio | UiRadio | 1 | src/views/atlas/video/dialog/components/WarningProcessDialog.vue |
+| ElRadioButton | UiRadioButton | 1 | src/views/datamaint/system/AccessManage.vue |
+| ElRate | UiRate | 1 | src/views/atlas/video/dialog/dataMaintenance/components/DefaultFormContent.vue |
+| ElTableV2 | UiTableV2 | 1 | src/views/datamaint/system/AccessManage.vue |
+
+## 服务与指令
+
+| 原接口 | 库接口 | 引用文件数 |
+|---|---|---:|
+| ElMessage | UiMessage | 111 |
+| ElMessageBox | UiMessageBox | 13 |
+| ElNotification | UiNotification | 2 |
+| v-loading | vUiLoading | 18 |
+
+## 项目公共组件
+
+| 原源码 | 直接引用文件数 | 使用位置示例 | 依赖 |
+|---|---:|---|---|
+| src/components/layout/TemplateLayout.vue | 268 | src/components/layout/EmptyMapLayout.vue<br>src/views/Blank.vue<br>src/views/atlas/climateChange/ClimatePrec.vue | vue<br>vue-router<br>@/map/core/MapLibreMap<br>@/components/map/MapToolbar.vue<br>@/components/map/MapLegend.vue<br>@/stores/mapLayers<br>@/stores/ui<br>@/stores/regionBoundary<br>./RightPanel.vue |
+| src/components/atlas/AtlasMapTitle.vue | 264 | src/views/atlas/climateChange/ClimatePrec.vue<br>src/views/atlas/climateChange/ClimateTem.vue<br>src/views/atlas/dem/Dem30m.vue | — |
+| src/components/map/MapValueLegend.vue | 251 | src/views/DefenseMapLinkage.vue<br>src/views/atlas/climateChange/ClimatePrec.vue<br>src/views/atlas/climateChange/ClimateTem.vue | vue<br>@element-plus/icons-vue |
+| src/components/common/MapTimeline.vue | 236 | src/views/DefenseMapLinkage.vue<br>src/views/atlas/climateChange/ClimatePrec.vue<br>src/views/atlas/climateChange/ClimateTem.vue | vue<br>@element-plus/icons-vue |
+| src/components/echarts/EchartLayout.vue | 183 | src/views/atlas/climateChange/ClimatePrec.vue<br>src/views/atlas/climateChange/ClimateTem.vue<br>src/views/atlas/dem/Dem30m.vue | vue<br>echarts<br>@/components/atlas/AtlasProcessChart.vue<br>@/components/atlas/ProcessDataTable.vue<br>@/components/atlas/AtlasProcessPanel.vue<br>@/components/common/AppSelect.vue<br>@/utils/valueFormat |
+| src/components/atlas/AtlasRightToggleButton.vue | 109 | src/views/atlas/elments/Pres.vue<br>src/views/atlas/elments/Rain.vue<br>src/views/atlas/elments/RunoffHd.vue | @element-plus/icons-vue |
+| src/components/common/AppSelect.vue | 64 | src/components/echarts/EchartLayout.vue<br>src/components/timeline/index.vue<br>src/views/DefenseMapLinkage.vue | vue<br>element-plus |
+| src/components/table/TableLayout.vue | 34 | src/views/atlas/climateGrid/components/ClimateGridInfoPanel.vue<br>src/views/atlas/elments/Pres.vue<br>src/views/atlas/elments/RunoffHd.vue | vue<br>@element-plus/icons-vue<br>@/components/atlas/AtlasRankingPanel.vue<br>@/utils/valueFormat |
+| src/components/common/BatchInfoPopover.vue | 17 | src/views/meteo/RainDaily.vue<br>src/views/meteo/index.vue<br>src/views/meteo/lradDaily.vue | vue<br>@element-plus/icons-vue<br>@/views/meteo/batchInfo |
+| src/components/status/wrf/index.vue | 17 | src/views/meteo/RainDaily.vue<br>src/views/meteo/index.vue<br>src/views/meteo/lradDaily.vue | vue<br>./wrfStatus.vue |
+| src/components/common/TimeRangeQuickSelect.vue | 14 | src/views/atlas/groundwater/GroundwaterFb.vue<br>src/views/atlas/landWater/LandWaterCSRMon.vue<br>src/views/atlas/runoffDepth/RunoffDepth.vue | — |
+| src/components/atlas/AtlasRankingPanel.vue | 4 | src/components/table/TableLayout.vue<br>src/views/atlas/common/AtlasModuleInfoPanel.vue<br>src/views/atlas/elments/components/RainfallRankingTable.vue | — |
+| src/components/layout/Header.vue | 4 | src/components/layout/MainLayout.vue<br>src/components/layout/MainLayoutMap.vue<br>src/components/layout/MainLayoutNoMenu.vue | vue<br>vue-router<br>@element-plus/icons-vue<br>element-plus<br>motion-v<br>@/router<br>@/stores/access<br>./PersonalInfo.vue<br>@/stores/theme<br>@/stores/regionBoundary<br>@/components/common/index.vue<br>@/map/core/MapLibreMap |
+| src/components/atlas/AtlasProcessChart.vue | 3 | src/components/echarts/EchartLayout.vue<br>src/components/map/StationLayerDetails.vue<br>src/views/atlas/elments/components/RainfallProcessChart.vue | echarts<br>vue |
+| src/components/atlas/AtlasProcessPanel.vue | 2 | src/components/echarts/EchartLayout.vue<br>src/views/atlas/elments/components/RainfallProcessChart.vue | — |
+| src/components/atlas/ProcessDataTable.vue | 2 | src/components/echarts/EchartLayout.vue<br>src/views/atlas/elments/components/RainfallProcessChart.vue | vue |
+| src/components/common/index.vue | 2 | src/components/layout/Header.vue<br>src/views/DefenseMapLinkage.vue | vue<br>@element-plus/icons-vue<br>@/stores/access<br>@/assets/json/pcas-code.json<br>axios<br>@/stores/regionBoundary<br>@/stores/gisSelection |
+| src/components/global/SvgIcon.vue | 2 | src/components/layout/SideMenuMap.vue<br>src/main.ts | vue |
+| src/components/layout/RightPanel.vue | 2 | src/components/layout/TemplateLayout.vue<br>src/views/Blank.vue | vue<br>@/stores/ui<br>@/stores/theme<br>@/map/state |
+| src/components/layout/SideMenu.vue | 2 | src/components/layout/ContentLayoutNomenu.vue<br>src/components/layout/ContentLayoutSystem.vue | vue<br>vue-router<br>motion-v<br>@element-plus/icons-vue<br>@/router<br>@/stores/access<br>@/stores/ui |
+| src/components/map/LayerControl.vue | 2 | src/components/map/MapToolbar.vue<br>src/views/DefenseMapLinkage.vue | vue<br>@element-plus/icons-vue<br>./LayerTreeNode.vue<br>@/map/core/MapLibreMap<br>@/stores/mapLayers<br>@/map/core/basemaps |
+| src/components/map/PanoramaViewer.vue | 2 | src/components/map/MediaLayerDetails.vue<br>src/components/map/StationLayerDetails.vue | vue<br>element-plus<br>@photo-sphere-viewer/core<br>@photo-sphere-viewer/core/index.css |
+| src/components/layout/AsyncRoutePage.vue | 1 | src/router/deferRoutePages.ts | vue<br>vue-router<br>@/router/useRoutePage |
+| src/components/layout/ContentLayoutMap.vue | 1 | src/components/layout/MainLayoutMap.vue | vue<br>vue-router<br>@/router<br>@/stores/ui<br>./SideMenuMap.vue<br>./EmptyMapLayout.vue<br>./mapPageSelection |
+| src/components/layout/ContentLayoutNomenu.vue | 1 | src/components/layout/MainLayoutNoMenu.vue | vue<br>vue-router<br>@/router<br>@/stores/ui<br>./SideMenu.vue |
+| src/components/layout/ContentLayoutSystem.vue | 1 | src/components/layout/MainLayout.vue | vue<br>vue-router<br>@/router<br>@/stores/ui<br>./SideMenu.vue |
+| src/components/layout/EmptyMapLayout.vue | 1 | src/components/layout/ContentLayoutMap.vue | ./TemplateLayout.vue |
+| src/components/layout/MainLayout.vue | 1 | src/router/index.ts | vue<br>vue-router<br>@/router<br>./Header.vue<br>./ContentLayoutSystem.vue |
+| src/components/layout/MainLayoutMap.vue | 1 | src/router/index.ts | vue<br>vue-router<br>@/router<br>./Header.vue<br>./ContentLayoutMap.vue<br>../map/index.vue |
+| src/components/layout/MainLayoutNoMenu.vue | 1 | src/router/index.ts | vue<br>vue-router<br>@/router<br>./Header.vue<br>./ContentLayoutNomenu.vue |
+| src/components/layout/PersonalInfo.vue | 1 | src/components/layout/Header.vue | vue<br>element-plus<br>@/stores/access |
+| src/components/layout/RegionDrawDialog.vue | 1 | src/components/layout/UserRegionAccess.vue | vue<br>maplibre-gl<br>maplibre-gl/dist/maplibre-gl.css<br>terra-draw<br>terra-draw-maplibre-gl-adapter<br>element-plus<br>@/map/core/basemaps<br>@/stores/regionBoundary |
+| src/components/layout/RouterViewLayout.vue | 1 | src/router/index.ts | vue |
+| src/components/layout/SideMenuMap.vue | 1 | src/components/layout/ContentLayoutMap.vue | vue<br>vue-router<br>@element-plus/icons-vue<br>@/router<br>@/stores/access<br>@/stores/theme<br>./mapPageSelection |
+| src/components/layout/UserRegionAccess.vue | 1 | src/views/datamaint/system/AccessManage.vue | vue<br>element-plus<br>./RegionDrawDialog.vue<br>@/utils/userRegions<br>@/assets/json/pcas-code.json<br>@/components/map/GisFileImport<br>@/stores/access |
+| src/components/map/EngineeringDetails.vue | 1 | src/components/map/index.vue | vue<br>element-plus<br>@/map/engineeringDetails<br>@/map/config/engineeringFields<br>@/utils/request |
+| src/components/map/GateDetails.vue | 1 | src/components/map/index.vue | vue<br>element-plus<br>@/map/gateDetails |
+| src/components/map/index.vue | 1 | src/components/layout/MainLayoutMap.vue | ./MediaLayerDetails.vue<br>./StationLayerDetails.vue<br>./GateDetails.vue<br>./RubberDamDetails.vue<br>./ReservoirDetails.vue<br>./EngineeringDetails.vue<br>vue<br>vue-router<br>@/map/core/MapLibreMap<br>@/stores/mapLayers<br>@/stores/ui<br>@/map/pageContextMenu<br>@/map/mapContextMenu<br>maplibre-gl/dist/maplibre-gl.css |
+| src/components/map/LayerTreeNode.vue | 1 | src/components/map/LayerControl.vue | vue<br>@element-plus/icons-vue<br>@/map/core/basemaps<br>@/stores/mapLayers |
+| src/components/map/MapLegend.vue | 1 | src/components/layout/TemplateLayout.vue | vue<br>vue-router<br>@element-plus/icons-vue |
+| src/components/map/MapOperationPanel.vue | 1 | src/components/map/MapToolbar.vue | vue<br>element-plus<br>./MapOperationTools |
+| src/components/map/MapToolbar.vue | 1 | src/components/layout/TemplateLayout.vue | vue<br>@element-plus/icons-vue<br>element-plus<br>./LayerControl.vue<br>./MapOperationPanel.vue<br>./ModuleOperationPanel.vue<br>./SpaceAnalysisPanel.vue<br>./MapOperationTools<br>./GisFileImport<br>@/map/core/MapLibreMap<br>@/map/core/basemaps<br>@/stores/mapLayers<br>@/stores/ui<br>@/stores/gisSelection |
+| src/components/map/MediaLayerDetails.vue | 1 | src/components/map/index.vue | vue<br>element-plus<br>./PanoramaViewer.vue<br>@/map/mediaLayerDetails |
+| src/components/map/ModuleOperationPanel.vue | 1 | src/components/map/MapToolbar.vue | vue<br>vue-router<br>@element-plus/icons-vue |
+| src/components/map/ReservoirDetails.vue | 1 | src/components/map/index.vue | vue<br>element-plus<br>@/utils/request<br>@/map/reservoirDetails |
+| src/components/map/RubberDamDetails.vue | 1 | src/components/map/index.vue | vue<br>element-plus<br>@/map/rubberDamDetails |
+| src/components/map/SpaceAnalysisPanel.vue | 1 | src/components/map/MapToolbar.vue | vue<br>@/stores/gisSelection<br>@/stores/spaceAnalysis |
+| src/components/map/StationLayerDetails.vue | 1 | src/components/map/index.vue | vue<br>element-plus<br>echarts<br>moment<br>./PanoramaViewer.vue<br>@/components/atlas/AtlasProcessChart.vue<br>@/map/stationLayerDetails<br>@/config/server<br>@/utils/request |
+| src/components/status/wrf/wrfStatus.vue | 1 | src/components/status/wrf/index.vue | vue<br>moment<br>@/api/oneMap/status |
+| src/components/status/wrfHydro/index.vue | 1 | src/views/meteo/glofas.vue | vue<br>./wrfHydroStatus.vue |
+| src/components/status/wrfHydro/wrfHydroStatus.vue | 1 | src/components/status/wrfHydro/index.vue | vue<br>@vueuse/core<br>@/api/oneMap/status |
+| src/components/common/TreeSelectPanel.vue | 0 | 未发现直接引用，需检查间接 / 动态使用 | vue<br>element-plus<br>motion-v |
+| src/components/layout/Toolbar.vue | 0 | 未发现直接引用，需检查间接 / 动态使用 | @/stores/ui<br>@/map/useMapBus |
+| src/components/timeline/index.vue | 0 | 未发现直接引用，需检查间接 / 动态使用 | vue<br>@/components/common/AppSelect.vue |
+| src/components/titlebar/index.vue | 0 | 未发现直接引用，需检查间接 / 动态使用 | — |
+| src/components/widgets/Legend.vue | 0 | 未发现直接引用，需检查间接 / 动态使用 | vue<br>vue-router |
 
 # CSS 变量主题与样式隔离
 
@@ -759,3 +4499,8 @@ import 'sky-ui-kit/global.css'
 ## 示例代码组织
 
 公共 CSS 只在项目 main.ts 引入一次。预览站的公共接入代码单独维护在 src/setup-examples.ts，各组件的查看代码只列组件 import、状态、事件与模板。查看代码中的接入链接指向公共配置；复制组件代码不会附带重复 CSS。已有 Element Plus CSS 引入时无需再添加。
+# 项目 SVG 图标
+
+全局缩放/主题融合以 GLOBAL-ADAPTATION.md 为准：原 App.vue 写根 --cp-vfit-scale，scoped-vfit 不重置它；保留原主题 store。不要在已消费 cp token 的组件外再增加第二套缩放。body 浮层核对根变量，局部变量需显式接入。
+
+SvgIcon 样式仅作用于 scoped 的 .sky-svg-icon，不覆盖原生 ElIcon 或原项目 .svg-icon。默认继承 currentColor；数字 size 读取 --cp-font-1，缺失回退 1px；固定色 / 多色路径保持原配色。公共样式仍只在 main.ts 引入一次。