sky-ui-kit 0.1.6 → 0.1.8

package/docs/AI-CHANGELOG.md

@@ -1,7 +1,45 @@
 # 团队 AI 模块变更记录
 
+## 2026-11-02 · 沿用原平台浮动区域层级
+
+- MapPageLayout 对齐 metrics/TemplateLayout.vue 的聚焦 5、移入 6；沿用内容 1、普通区域 2、图例 3、工具栏 4，统一覆盖时间轴与右栏，保持透明工具间隙穿透与子面板随区域置顶。
+- 同步文档与生成 API；未发包，未修改参考项目。
+
+## 2026-11-02 · 模块移入置顶
+
+- 统一区域层级变量，区域子展开面板随模块置顶；限定普通内容层，透明工具间隙不拦截地图。
+- 图例及底部外层移除滚动裁剪，预览新增模拟遮挡开关；未发布或修改消费项目。
+
+## 2026-11-02 · 按用户约定改用 VFit 缩放
+
+- 撤回新增的 720px 容器断点、右侧抽屉、compact 属性/事件及会商单列重排；保持区域与列数，使用应用 VFit 尺寸变量。
+- 会商网格移除 260px 最小行高，均分顶部操作区之外的剩余高度，消除该最小行高引起的内部滚动条；删除外壳固定 1px 尺寸覆盖。
+- 同步预览说明、示例和行为检查。未构建、发包或修改消费项目布局。
+
+## 2026-11-02 · 完善地图布局行为（源码待用户预览）
+
+- 导航直接显示 MapPageLayout 名称，开发指南增加地图布局直达入口，避免新组件沿用旧名称而难以查找。
+
+- 新增 MapPageLayout，与旧 TemplateLayout 并行，旧接口不变；新布局仅负责区域排列，位置参数独立于业务类名。
+- 增加实际容器宽度检测、非模态右侧覆盖面板、关闭事件、区域 hover / focus 层级和时间轴避让。
+- DefenseMapLayout 新增可选 structured 模式、toolbar、列数与窄容器单列；默认保持原样式外壳。
+- 预览支持宽窄容器、右栏和时间轴开关；同步接入、样式、组件指南与生成 API。未发布，未更新消费项目布局。
+
+## 2026-11-02 · 布局说明按三层重写（待用户预览确认）
+
+- 开发指南新增“布局怎么选”直达入口（#layout-guide），避免说明藏在基础组件深层目录。
+
+- 布局容器页新增“平台外壳 → 页面分区 → 局部面板”示意及按场景选择组件的说明，区分 WorkbenchShell、TemplateLayout、管理布局、面板与基础容器。
+- 修正地图布局说明中的默认工具栏、遗漏 left 插槽及项目同名组件 API 混用；明确右栏受控条件和应用的地图生命周期责任。
+- 同步 AI 指南并生成 AI 文档；未发布 npm，未更新消费项目布局。由用户在预览站确认文案后再安排发布。
+
 本文件记录源码模块调整与接入影响，不作为 npm 发布完成的依据。团队使用安装包时以包内文档及 package.json 版本为准；使用当前源码时读取仓库中的同名文档。
 
+## 2026-11-02 · 清理历史本地联调锁记录
+
+- 删除 package-lock.json 中一体机消费项目的 extraneous 记录及其中旧 vendor tgz 引用；现有库依赖版本保持不变，未修改消费项目。
+- 同步 AI 指南并重新生成 AI 文档；未构建、打包、发布或提交 Git。
+
 ## 2026-10-13 · 0.1.2 发布准备
 
 - 核对并重新生成组件 API、AI 指南、llms 索引和完整文档，包含项目图标、全局适配、独立常驻示例和导航调整。
@@ -374,3 +412,33 @@ MapLayerControl 增加 closable/showLocate/showOpacity（均默认 true）；综
 按当前源码重新生成 AI 文档、组件 API 与类型产物，汇集现有布局、图层、时间轴与空间范围相关更新；发布完成状态以 npm 注册表为准。
 
 0.1.6 发布检查修复：导出 NationalHydroSidebar 的 SelectedFeature、BatchOption、TimeZoneOption 属性类型，修复类型声明生成 TS4023；运行行为不变。
+
+
+## 2026-10-19 · 按需导入配置
+
+增加组件多入口和对应类型出口，主题包装调用添加 PURE 标记；总入口兼容，公共样式和图库仍为集合。按用户约定本次未构建或发布。
+
+## 2026-10-19 · 轻量构建与体积核对
+
+SVG 图库从主入口移到可选 icons 入口，SvgIcon 不再自动注册；预览站显式注册图库。构建多入口并增加 PURE 标记。组件主 JS 约 178 KB（此前约 1161 KB），图库单独约 980 KB。模拟消费构建（依赖外置）按钮 1961 B、MapSideMenu 8411 B、SvgIcon 2224 B；不是包含 Element Plus 的网站总体积。CSS 保留公共整体样式。已按用户授权构建，未发布。
+
+2026-10-20：消费约定更新：media-ui仅使用npm包，不再源码alias联调；无组件API/样式变更。
+
+## 2026-10-29 · 0.1.7 发布准备
+
+正式发布按需入口与可选图库，默认主题和组件 CSS 随 npm 包分发，无开发机样式依赖。构建前清理 dist 防止旧 chunk 混入；图标注册迁移见 ON-DEMAND.md。
+
+
+## 2026-10-30 · 四项目模型主题
+
+读取四个项目最终覆盖主题，提取蓝白/深蓝青绿 token、渐变标题与面板。新增三个隔离主题组件、显式原生表单适配和可复制示例。公共 CSS 合入 style.css；未构建、未发布。
+
+
+## 2026-10-30 · HTML / Vue 双接入文档
+
+新增独立 model-workspace.css 发布出口，原生 HTML 用 CSS 和结构类，Vue 用主题组件与公共 CSS。补齐两套完整示例、主题切换、事件绑定和部署路径说明，未构建发布。
+
+## 2026-11-02 · 0.1.8 发布准备
+
+- 发布当前组件源码、按需入口及模型工作区主题；HTML 使用 model-workspace.css，Vue 使用组件与 style.css。清除旧消费项目锁记录。发布状态以 npm 注册表为准。
+

package/docs/AI-GUIDE.md

@@ -1,5 +1,32 @@
 # sky-ui-kit：AI 使用指南
 
+MapPageLayout 沿用参考项目 D:/Work/01-项目code/一体化平台/webv1/src/components/layout/TemplateLayout.vue 的 1/2/3/4/5/6 层级约定，并补齐底部时间轴和右侧面板。层级按区域统一管理：鼠标移入 left/top/toolbar/right/legend/timeline 时提升整个区域到 hover 层，优先于 focus-within；子展开面板随所属区域一起提升，移出后恢复。普通 content 限定在底层独立堆叠上下文，透明工具间隙穿透地图。图例和时间轴外层不再 overflow:auto 裁剪浮层；长内容滚动由内部业务组件负责。Teleport 到 body 的浮层仍由组件自身管理层级。预览“模拟模块遮挡”可核对重叠交互；完全被覆盖的部分不接收鼠标，应从模块可见区域移入。
+
+## 新地图布局行为（源码待预览，尚未发布）
+
+预览入口：开发指南 → MapPageLayout 地图布局（#project-template-layout）；基础组件 → 布局容器下也显示“地图布局 · MapPageLayout”，支持按组件名搜索。
+
+新页面优先用 MapPageLayout；旧 TemplateLayout 保持接口及业务样式兼容，并非两者 API 的别名。MapPageLayout 不携带任何依赖 rainfall-process、地图标题或分析面板类名的定位规则。消费方使用 topOffset / bottomOffset / toolbarTop / timelineLeft / timelineRight / timelineBottom / edge 配置位置。
+
+rightOpen 与 rightPanelEnabled、right 插槽共同决定右栏显示。区域关系固定，右栏打开时工具栏、图例及时间轴始终避让。按用户约定移除 compactBreakpoint / compactRightMode / compact-change：不按 720px 容器宽度切抽屉或重排。尺寸由消费项目注册的 VFit 写入 --cp-vfit-scale，再经 --cp-font-1 等变量传入；库不重复注册 VFit，不额外 transform 缩放。
+
+默认区域层级 2、图例 3、工具栏 4；键盘 focus-within 为 5，鼠标 hover 为 6。时间轴高度通过 timeline-height 通知，图例自动避让；监听在卸载释放。
+
+DefenseMapLayout 默认 structured=false 保留原样式壳。structured=true 提供 toolbar 与网格内容，columns 为 1 或 2，保持指定列数，均分剩余高度，不设 260px 最小行高或内部滚动条。间距和 topOffset 继承 VFit 尺寸变量；地图、联动、路由及持久挂载由应用负责。
+
+## 布局怎么选：平台外壳 → 页面分区 → 局部面板
+
+预览站“开发指南 → 布局怎么选”可直接进入说明（#layout-guide）；“基础组件 → 布局容器”也会展示。说明先展示通俗选型说明与三层嵌套示意，再展示地图区域和组合示例。说明源文件为 src/LayoutGuide.vue；本次只调整说明，不改变组件 API 或运行行为。
+
+- WorkbenchShell 是整个平台的外壳，提供 header / workspace；management 模式才提供内置左侧分组菜单，路由仍由应用接入。
+- TemplateLayout 是地图页面的摆放架，提供 left、top、toolbar、right、legend、timeline、content 和默认插槽。应用先提供有明确宽高、position: relative 的地图容器。rightOpen、rightPanelEnabled 与 right 插槽共同决定右栏显示；没有默认工具、图例或地图实例。
+- ManagementResourceLayout 用于管理页的概览、筛选、标题、操作及内容区域。
+- WorkbenchPanel 是局部外观容器；MapWorkspacePanel 是带标题、actions、default、footer 的业务面板。两者不负责路由和地图生命周期。
+- DefenseMapLayout 是会商样式外壳，默认插槽由应用提供地图内容和联动；ModelWorkspace 面向模型编辑，不是通用平台外壳。
+- UiContainer / UiHeader / UiAside / UiMain / UiFooter 是自定义普通布局的基础积木。
+
+项目内 TemplateLayout 与库组件同名但接口不同，不能只换 import。原 right-toggle、map-toolbar-info 和 rightPanelDefaultOpen 需要应用适配层衔接。公共布局稳定挂载、地图是否重建、容器改变后的地图与图表 resize 均由消费项目负责；替换布局组件不自动消除菜单切换闪烁。
+
 适用于 Vue 3 + TypeScript。此文件描述包的真实 API 和约束，不是自动执行的代理指令。AI 工具需要主动读取这些文档；安装包不会自动改变其上下文。
 
 管理布局：使用 WorkbenchShell management 模式与内容插槽，详见本文末尾最新说明。账号、菜单路由和数据由消费方提供，库不提供认证。
@@ -30,6 +57,8 @@ UiAutocomplete 提供独立站点搜索示例：fetch-suggestions 回调、聚
 
 ## 文档读取顺序
 
+依赖维护：库的 package.json 与 package-lock.json 不应记录消费项目的本地目录或历史 vendor 安装包。已清除一体机项目遗留的 extraneous 锁记录；消费项目自行管理其安装依赖。
+
 安装或升级最新正式版使用 `npm install sky-ui-kit@latest`。latest 指向 npm 的正式发布标签，尚未发布的源码修改不在安装包内；依据当前已安装包的版本和文档使用组件。
 
 团队先读取 llms.txt，并结合 AI-CHANGELOG.md 了解模块变更及接入影响。后续所有代码、预览页面、样式和接入说明修改均同步相关 AI 文档，并运行 npm run docs:ai；快速开始代码与页面使用同一份源文件生成。
@@ -266,7 +295,7 @@ function confirm() { UiMessage.success('当前站点：' + station.value) }
 ### 图标安装：内置与自有资源
 
 ```sh
-# 仅使用库内置 SVG：安装组件库即可
+# SvgIcon 仅引用 sprite；自有 SVG 由下方 Vite 配置注册
 npm install sky-ui-kit@latest
 
 # 项目要维护自己的 src/assets/icons/*.svg 时，再安装 Vite 插件
@@ -945,20 +974,42 @@ const items = [{ key: 'overview', label: '运行概览' }, { key: 'data', label:
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue'
-import { TemplateLayout, UiButton, MapTools, WorkbenchPanel } from 'sky-ui-kit'
+import { MapPageLayout, DefenseMapLayout, UiButton, MapTools, WorkbenchPanel } from 'sky-ui-kit'
 const rightOpen = ref(true)
+const showTimeline = ref(true)
+const overlap = ref(false)
 </script>
 <template>
-  <div style="position: relative; height: 460px">
-    <TemplateLayout :right-open="rightOpen">
-      <template #top><UiButton @click="rightOpen = !rightOpen">{{ rightOpen ? '收起右栏' : '展开右栏' }}</UiButton></template>
-      <template #toolbar><MapTools :items="[{ key: 'layers', label: '图层' }]" /></template>
-      <template #right><WorkbenchPanel style="height: 100%">right · 业务面板</WorkbenchPanel></template>
-      <template #legend>legend · 图例</template>
-      <template #timeline>timeline · 时间轴</template>
-    </TemplateLayout>
+  <div class="layout-demo-controls">
+    <UiButton @click="rightOpen = !rightOpen">{{ rightOpen ? '收起右栏' : '展开右栏' }}</UiButton>
+    <UiButton @click="showTimeline = !showTimeline">{{ showTimeline ? '隐藏时间轴' : '显示时间轴' }}</UiButton>
+    <UiButton @click="overlap = !overlap">{{ overlap ? '恢复正常避让' : '模拟模块遮挡' }}</UiButton>
+  </div>
+  <div class="layout-demo-map" >
+    <MapPageLayout v-model:right-open="rightOpen" :timeline-right="overlap ? 'var(--map-layout-edge)' : ''">
+      <template #top><span>地图标题 / 查询区域</span></template>
+      <template #toolbar><MapTools :items="[{ key: 'layers', label: '图层' }]" /><WorkbenchPanel v-if="overlap" class="layout-demo-expanded">右上展开面板<br>鼠标移入时整个工具区域置顶</WorkbenchPanel></template>
+      <template #right><WorkbenchPanel style="height: 100%">右栏 · 放参数表单或业务列表<br>鼠标移入当前区域时置顶</WorkbenchPanel></template>
+      <template #legend><WorkbenchPanel :class="{ 'layout-demo-overlap-legend': overlap }">图例 · 鼠标移入置顶</WorkbenchPanel></template>
+      <template v-if="showTimeline" #timeline><WorkbenchPanel class="layout-demo-timeline">时间轴 / 过程图区域 · 鼠标移入置顶</WorkbenchPanel></template>
+    </MapPageLayout>
+  </div>
+  <h3>会商布局 · 顶部操作区 + 四个地图位置</h3>
+  <p>以下仅展示区域，不创建地图。保持两列布局，尺寸沿用 VFit 缩放变量；四个地图位置均分剩余高度，不产生内部滚动条。</p>
+  <div class="layout-demo-map" >
+    <DefenseMapLayout structured top-offset="0" :columns="2">
+      <template #toolbar>时次选择 / 设置按钮放在这里</template>
+      <WorkbenchPanel v-for="index in 4" :key="index">地图位置 {{ index }} · 由页面提供地图宿主</WorkbenchPanel>
+    </DefenseMapLayout>
   </div>
 </template>
+<style scoped>
+.layout-demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
+.layout-demo-map { position: relative; height: calc(var(--cp-font-1, 1px) * 460); border: 1px dashed var(--color-soft-border); background: var(--surface-control); }
+.layout-demo-expanded { position: absolute; right: 0; top: calc(var(--cp-font-1, 1px) * 40); width: calc(var(--cp-font-1, 1px) * 260); height: calc(var(--cp-font-1, 1px) * 300); box-sizing: border-box; border: 1px solid var(--color-soft-border); background: var(--color-panel); }
+.layout-demo-overlap-legend { transform: translateY(calc(var(--cp-font-1, 1px) * 50)); background: var(--color-panel); border: 1px solid var(--color-soft-border); }
+.layout-demo-timeline { min-height: calc(var(--cp-font-1, 1px) * 90); background: var(--color-panel); border: 1px solid var(--color-soft-border); }
+</style>
 
 ```
 
@@ -2938,3 +2989,29 @@ const items = [{ key: 'rain', label: '降水', icon: Pouring }, { key: 'water',
 </style>
 
 ```
+
+### 模型工作区统一主题示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ModelWorkspace, ModelWorkspaceHeader, ModelWorkspacePanel, UiButton, UiInput } from 'sky-ui-kit'
+const theme = ref<'light' | 'dark'>('light')
+const name = ref('汉口站')
+const message = ref('等待配置')
+</script>
+<template>
+  <ModelWorkspace :theme="theme" native-controls>
+    <template #header><ModelWorkspaceHeader title="模型计算工作区" description="分布式水文 / 水资源配置 / 新安江 / LSTM 共用主题">
+      <template #actions><UiButton @click="theme = theme === 'light' ? 'dark' : 'light'">切换主题</UiButton></template>
+    </ModelWorkspaceHeader></template>
+    <ModelWorkspacePanel title="模型配置">
+      <UiInput v-model="name" placeholder="测站名称" />
+      <p>原生控件逐步迁移时，可显式启用 native-controls。</p>
+      <button type="button" class="primary" @click="message = '执行配置：' + name">原生操作示例</button>
+      <template #footer><span role="status">{{ message }}</span><UiButton @click="message = '保存配置由使用方接入'">保存配置</UiButton></template>
+    </ModelWorkspacePanel>
+  </ModelWorkspace>
+</template>
+
+```

package/docs/COMPONENT-API.md

@@ -437,6 +437,31 @@ export interface MapLayerNode { id: string; name: string; visible?: boolean; opa
 
 Slots: left, top, toolbar, right, legend, timeline, content, default
 
+## MapPageLayout
+
+### Props
+
+| Name | Type | Required | Default expression |
+|---|---|---|---|
+| rightOpen | boolean | false | false |
+| rightPanelEnabled | boolean | false | true |
+| rightPanelWidth | string | false | 'calc(var(--cp-font-1, 1px) * 328)' |
+| leftPanelWidth | string | false | 'calc(var(--cp-font-1, 1px) * 320)' |
+| edge | string | false | 'calc(var(--cp-font-1, 1px) * 12)' |
+| topOffset | string | false | '' |
+| bottomOffset | string | false | '' |
+| toolbarTop | string | false | '' |
+| timelineLeft | string | false | '' |
+| timelineRight | string | false | '' |
+| timelineBottom | string | false | '' |
+
+### Events
+
+- `update:rightOpen` — `[open: boolean]`
+- `timeline-height` — `[height: number]`
+
+Slots: left, top, toolbar, right, legend, timeline, content, default
+
 ## RainfallRankingTable
 
 ### Props
@@ -944,12 +969,59 @@ Slots: No declared content slots.
 
 | Name | Type | Required | Default expression |
 |---|---|---|---|
+| structured | boolean | false | false |
+| columns | 1 | 2 | false | 2 |
+| topOffset | string | false | 'calc(var(--cp-font-1, 1px) * 64)' |
 
 ### Events
 
 No declared events.
 
-Slots: default
+Slots: toolbar, default
+
+## ModelWorkspace
+
+### Props
+
+| Name | Type | Required | Default expression |
+|---|---|---|---|
+| theme | 'light' | 'dark' | false | 'light' |
+| nativeControls | boolean | false | false |
+
+### Events
+
+No declared events.
+
+Slots: header, default, footer
+
+## ModelWorkspaceHeader
+
+### Props
+
+| Name | Type | Required | Default expression |
+|---|---|---|---|
+| title | string | true | undefined / no declared default |
+| description | string | false | undefined / no declared default |
+
+### Events
+
+No declared events.
+
+Slots: title, actions
+
+## ModelWorkspacePanel
+
+### Props
+
+| Name | Type | Required | Default expression |
+|---|---|---|---|
+| title | string | false | undefined / no declared default |
+
+### Events
+
+No declared events.
+
+Slots: header, actions, default, footer
 
 ## UiAffix
 
@@ -1661,7 +1733,5 @@ Preserves upstream structure and context. Structural children inherit theme from
 
 ## 图标资源与注册
 
-`projectIcons`：内置 SVG 清单（name、category、source、followsColor、svg）。`ProjectIconName`：内置名称联合类型。
-
-`registerProjectIcons(names?: readonly string[], target?: Document): void`：按名称注册到指定文档，不传 names 注册全部；SSR 无文档时不执行。默认命名空间 sky-icon-，重复调用不重复插入。SvgIcon 自动注册当前内置图标；prefix 非 sky-icon- 时由使用方提供 sprite。未知名称不显示图形。
+SvgIcon 仅引用 sprite，不自动加载内置图库。自有 sprite 通过 prefix 指定；可选资源从 sky-ui-kit/icons 导入 projectIcons、ProjectIconName、registerProjectIcons(names?, target?)，显式注册需要的符号。可选图库仍为整份资源。
 

package/docs/COMPONENT-GUIDE.md

@@ -1,5 +1,11 @@
 # 组件使用说明
 
+## 布局选择（当前源码）
+
+WorkbenchShell 管平台外壳；MapPageLayout 管地图上的区域；WorkbenchPanel / MapWorkspacePanel 装具体业务内容。旧 TemplateLayout 保留历史行为，新页面建议 MapPageLayout，不能直接按同名接口替换。MapPageLayout 使用 v-model:right-open；保持区域关系，右栏打开时其他浮动区域避让，尺寸沿用应用的 VFit 变量，不提供按宽度切换抽屉的断点。它不创建地图，不自动解决路由重新挂载。
+
+DefenseMapLayout 默认是旧样式外壳；structured=true 启用顶部 toolbar 和 columns=1/2 网格，保持指定列数并均分剩余高度，不设最小行高撑出内部滚动条。默认插槽传各幅地图宿主，应用管理地图实例和联动。
+
 本指南说明当前包已导出的 11 个项目组件的用途、数据约定和交互边界。完整属性类型、默认值、事件签名和插槽列表见 [组件 API](COMPONENT-API.md)；完整示例见 [AI-GUIDE](AI-GUIDE.md)。原项目组件清单中的文件不一定已经进入本包，以 `src/components/index.ts` 和 `components.json` 为准。
 
 ## SvgIcon 与原项目适配
@@ -161,3 +167,8 @@ Ui 基础组件已统一关联对应 Element Plus 主组件文档，例如 Table
 
 
 MapSideMenu 支持 multiple 与 v-model:active-keys 多选，change 返回完整选中数组；select 表示点击项，不代表始终为新增选择。
+
+
+## 2026-10-19 轻量入口更新（未发布）
+
+主入口不再导出 projectIcons / ProjectIconName / registerProjectIcons，改从 sky-ui-kit/icons 导入。SvgIcon 只引用已有 sprite，默认 prefix 仍为 sky-icon-；自有 sprite 用 prefix="icon-"。保留图库的应用需要在 main.ts 显式 registerProjectIcons([名称])，图标资源不会自动下载。可选图库约 980 KB，不需要时不要导入。此变更尚未发布，安装 0.1.6 不具备新子路径。

package/docs/CONSUMERS.md

@@ -238,3 +238,5 @@ metricslab降水播放轴使用TemplateLayout.timeline插槽；timelineLeft/time
 2026-10-16：metricslab降水设置用GlobalMapLayerDock.actions放刷新图标，保持公开组件样式；底部内嵌色带移除。未发布。
 
 2026-10-16：metricslab用户使用范围用SpatialScopeInput reservoirOnly，默认draw、目标reservoir，保存regionCodes为空，必填水库名称及有效面；旧行政区授权编辑须补水库边界，不自动将行政区面认作水库。
+
+2026-10-20：media-ui最新用户约定仅消费npm sky-ui-kit@0.1.6，开发和交付均移除源码alias；库能力后续需发布可安装版本后应用再升级。

package/docs/CSS-THEME.md

@@ -1,5 +1,9 @@
 # CSS 变量主题与样式隔离
 
+MapPageLayout 使用 --map-layout-layer-content/panel/legend/toolbar/focus/hover 统一区域层级。与原平台一致：content=1、panel=2、legend=3、toolbar=4、focus=5、hover=6，时间轴和右栏同样参与；hover 高于 focus；content 内部即使使用较大 z-index 也不跨越区域堆叠上下文。图例和底部外层允许内容溢出，避免浮层被父区域裁剪；内部滚动由业务组件负责。
+
+MapPageLayout 是新增独立区域布局，读取现有主题变量及库作用域默认变量，不改写全局颜色。所有面板的 hover 层级高于 focus-within；右栏始终按固定区域关系避让。旧 TemplateLayout 的业务选择器保留以兼容已有消费者，新布局不继承这些选择器。MapPageLayout 与 DefenseMapLayout structured 模式继承 VFit 尺寸变量，不在 720px 以下切换布局；会商网格按 minmax(0, 1fr) 均分剩余高度，默认模式保留兼容。
+
 库不导出 useThemeStore，也不依赖使用方 Pinia。根入口和 /components 导出相同组件。
 
 ## 默认：隔离模式
@@ -235,3 +239,12 @@ import { DefenseMapLayout, UiButton } from 'sky-ui-kit'
   </DefenseMapLayout>
 </template>
 ```
+
+
+按需 JS 入口不改变 CSS 约定，style.css 仍为整体公共样式，不是逐组件 CSS。
+
+
+模型工作区主题限定 .sky-model-workspace，theme 属性控制明暗，原生控件适配显式开启；变量与边界见 MODEL-WORKSPACE.md。
+
+
+独立 model-workspace.css 面向原生 HTML，无 Vue/Element Plus 样式依赖；与 style.css 的模型主题来自同一源文件，Vue 无需重复导入。

package/docs/ELEMENT-PLUS-COVERAGE.md

@@ -1,6 +1,6 @@
 # Element Plus 完整组件目录
 
-基准版本：2.14.7。共 111 个主 / 子组件、4 个服务出口、3 个指令出口。另保留 38 个项目特色组件。
+基准版本：2.14.7。共 111 个主 / 子组件、4 个服务出口、3 个指令出口。另保留 42 个项目特色组件。
 
 清单覆盖官方组件注册表及服务 / 指令，不包含内部工具函数。出口覆盖不代表所有组件的交互、独立示例和视觉状态均已验证。网站每项均提供导入和官方 API 索引，新增组合示例见 AI-GUIDE.md。
 

package/docs/INTEGRATION.md

@@ -1,12 +1,16 @@
 # 主题接入规则更新
 
+## 新布局接入（源码尚未发布）
+
+新地图页面用 MapPageLayout；旧 TemplateLayout 继续保留，接口不做强制迁移。MapPageLayout 的插槽为 left / top / toolbar / right / legend / timeline / content / default。父容器须具有明确宽高且 position:relative；地图宿主独立创建，避免路由切换时随业务面板卸载。rightOpen 用 v-model 控制，原项目工具事件、设置面板及开关插槽通过应用适配层接入。原降水过程图等专有定位改用 timelineLeft / timelineBottom 等参数；不要把旧 CSS 类名当作新布局 API。接入时保留消费项目的 VFit 缩放桥接，不按容器断点重排；在地图宿主尺寸变化后 resize。WorkbenchShell 是否常驻由应用路由结构决定。
+
 当前规则以 [CSS-THEME.md](CSS-THEME.md) 为准：库不导出主题 store、不要求 Pinia，保留原项目 store；库 CSS 为变量提供低优先级默认值。默认 style.css 隔离，global.css 为可选整站主题。
 
 # 发布与反向接入
 
 ## 图标替换
 
-原 components/global/SvgIcon.vue 可替换为从 sky-ui-kit 导入 SvgIcon，保留 name / size / title / decorative。库内置 274 个项目 SVG，自动按需注册到 sky-icon- 命名空间；不依赖业务项目 Vite 插件。暂时保留旧 sprite 时传 prefix="icon-"，资源仍由原 virtual:svg-icons-register 提供。完成所有旧引用检查后才移除旧全局组件和插件，地图 PNG / Logo 的注册不变。子目录名称改为目录前缀以避免重名，按 projectIcons.source 与 name 对照迁移。Element Plus 图标仍从 @element-plus/icons-vue 导入，用 UiIcon 包裹。图标操作事件、路由和权限继续由业务方绑定。
+原 components/global/SvgIcon.vue 可替换为从 sky-ui-kit 导入 SvgIcon，保留 name / size / title / decorative。库内置 274 个项目 SVG，通过可选图库显式注册到 sky-icon- 命名空间；不依赖业务项目 Vite 插件。暂时保留旧 sprite 时传 prefix="icon-"，资源仍由原 virtual:svg-icons-register 提供。完成所有旧引用检查后才移除旧全局组件和插件，地图 PNG / Logo 的注册不变。子目录名称改为目录前缀以避免重名，按 projectIcons.source 与 name 对照迁移。Element Plus 图标仍从 @element-plus/icons-vue 导入，用 UiIcon 包裹。图标操作事件、路由和权限继续由业务方绑定。
 
 ## 当前交付范围
 
@@ -149,3 +153,22 @@ flat 模式按钮此前错误使用 child 类而内部图标、文字使用 pare
 
 2026-10-15：全国水文原页样式迁入。新增公开NationalHydroSidebar，来源参考平台views/hydroforecast/mapHydro/components/Sidebar.vue：保留原分组卡片、当前拾取、坐标、原生单选、AppSelect、标题/间距/字号/按钮 scoped 样式，仅主题token转userssite命名、根类重命名避免工作台.sidebar覆盖。props沿用selected/locationLng/locationLat/meteoSource/model/batchId/batchList/selectedTimeZone/timeZoneOptions；事件沿用updateLocationField/coordinateLocate/updateMeteoSource/updateModel/updateBatchId/updateTimeZone/openStyle，追加status插槽承载消费方错误/加载状态。无业务接口或地图引擎。例：<NationalHydroSidebar :selected="selected" :batch-list="batches" :batch-id="batchId" @update-batch-id="batchId=$event" />，其余筛选由消费方传入并绑定事件。
 共享ProcessChart/MapBottomProcessPanel新增可选timeZone/currentTime：轴标签按时区显示，当前时刻数据点高亮，未传时保留原行为；图表引擎由消费方提供。TemplateLayout.timeline改flex纵向gap，容纳底部过程+时间轴。库vue-tsc通过；未构建、打包、发布或浏览器验证，metrics当前通过公开出口源码alias使用，npm旧包尚未包含新增出口。
+
+
+按需接入方案见 ON-DEMAND.md，新路径需等待下一版本发布；应用页面按需导入、路由懒加载，公共 CSS 在 main.ts 一次加载。
+
+
+## 2026-10-19 轻量入口更新（未发布）
+
+主入口不再导出 projectIcons / ProjectIconName / registerProjectIcons，改从 sky-ui-kit/icons 导入。SvgIcon 只引用已有 sprite，默认 prefix 仍为 sky-icon-；自有 sprite 用 prefix="icon-"。保留图库的应用需要在 main.ts 显式 registerProjectIcons([名称])，图标资源不会自动下载。可选图库约 980 KB，不需要时不要导入。此变更尚未发布，安装 0.1.6 不具备新子路径。
+
+
+## 0.1.7 正式安装与样式
+
+通过 npm 安装 sky-ui-kit，main.ts 依次引入 element-plus/dist/index.css 和 sky-ui-kit/style.css，包内已包含默认主题和组件样式，不依赖开发者电脑、原业务项目或远程样式服务。CSS 变量允许运行时主题覆盖。图标资源可从 sky-ui-kit/icons 显式注册，或由应用提供 sprite；SvgIcon 不再自动携带图库。按组件入口见 docs/ON-DEMAND.md。
+
+
+四个模型项目的统一主题使用 ModelWorkspace 及 Header/Panel 结构，详情见 MODEL-WORKSPACE.md。原生 HTML 页面需要明确挂载/样式接入，不会因升级包自动改变。
+
+
+原生 HTML：部署包内 dist/model-workspace.css 并用 link 引入及结构类；Vue：使用 ModelWorkspace 系列组件并引入公共 style.css。完整双方案见 MODEL-WORKSPACE.md，不要将本地磁盘/node_modules 路径部署到网站。

package/docs/MODEL-WORKSPACE.md

@@ -0,0 +1,116 @@
+# 模型工作区统一主题
+
+参考四个项目实际样式：分布式水文模型 hydrogrid/frontend/src/styles/workspace-theme.css；水资源配置 app/static/workspace-theme.css；新安江 static/style.css 后段覆盖；LSTM前端预报模型Git/web_ui_prototype.html 的 light/dark token。新安江前段旧深色规则不是最终主题。
+
+共同浅色：背景 #f3f7fb，面板 #fff，主色 #1677ff，文字 #172b4d，边框 #dce5ef，蓝色渐变标题。深色：背景 #0d1420，面板 #151f2e，主色 #36cbb7，文字 #e3ecf5，边框 #35485f。
+
+ModelWorkspace(theme=light|dark, nativeControls=false) 提供显式主题边界及 header/default/footer 插槽；ModelWorkspaceHeader(title, description) 提供 title/actions 插槽；ModelWorkspacePanel(title) 提供 header/actions/default/footer。theme 由应用控制，不写 localStorage 或 document 根节点。未设置应用变量也有完整默认效果，应用可在容器 class/style 覆盖变量。
+
+公共 CSS 仍仅在 main.ts 引入 element-plus/dist/index.css 和 sky-ui-kit/style.css 一次。组件包构建脚本把 model-workspace.css 合入 style.css。范围仅 sky-model-workspace，不修改原生 Element Plus 或容器外 body。body 自身仍由应用设置，容器高度由应用布局提供。
+
+native-controls 是渐进迁移适配，仅在显式容器中覆盖原生按钮/表单外观，保留原 DOM、事件、disabled 及表单语义，不自动重写业务。优先用 UiButton/UiInput 等库组件。body 上的浮层不能继承局部主题，使用默认局部浮层或显式传递主题。地图色带、图表配色和业务阈值不在该主题替换范围。
+
+四个参考项目本次只读。它们并非全部 Vue 应用：原生 HTML 项目不能直接使用 Vue 组件，使用独立 model-workspace.css 并显式添加 sky-model-workspace / data-theme 边界和对应结构类；只升级 npm 不会自动改写已有原生页面。下一版本发布后按上述方式接入。
+
+
+## 按项目技术栈选择
+
+| 项目 | 使用方式 | 依赖 |
+|---|---|---|
+| 原生 HTML / 服务端模板 | model-workspace.css + 原生 HTML 结构类 | 无 Vue / Element Plus 运行时要求 |
+| Vue 3 | ModelWorkspace / Header / Panel 组件 + style.css | Vue 和组件包声明的 peerDependencies |
+
+以下能力为当前源码新增，需等待包含该能力的新版本发布；已发布的 0.1.7 不包含独立 model-workspace.css 或三个 ModelWorkspace 组件。
+
+## 原生 HTML：直接引入主题
+
+从新发布包的 dist/model-workspace.css 复制到网站静态资源目录，例如 /static/vendor/sky-ui-kit/model-workspace.css，随网站一起部署。不要将 node_modules 路径或开发者磁盘路径写进线上 HTML。不需要引入组件 JS、Vue 或 Element Plus CSS。
+
+```html
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>模型工作区</title>
+  <link rel="stylesheet" href="/static/vendor/sky-ui-kit/model-workspace.css">
+  <style>body { margin: 0; } #workspace { min-height: 100vh; }</style>
+</head>
+<body>
+  <div id="workspace" class="sky-model-workspace" data-theme="light" data-native-controls>
+    <header class="sky-model-header">
+      <div>
+        <h1 class="sky-model-header__title">模型计算工作区</h1>
+        <p class="sky-model-header__description">统一背景、面板和原生表单主题</p>
+      </div>
+      <button id="toggle-theme" type="button">切换主题</button>
+    </header>
+    <main class="sky-model-workspace__content">
+      <section class="sky-model-panel">
+        <header class="sky-model-panel__header"><h2>模型配置</h2></header>
+        <div class="sky-model-panel__body">
+          <label>测站名称 <input id="station" value="汉口站"></label>
+        </div>
+        <footer class="sky-model-panel__footer">
+          <span id="status" role="status">等待配置</span>
+          <button id="save" type="button" class="primary">保存配置</button>
+        </footer>
+      </section>
+    </main>
+  </div>
+  <script>
+    const workspace = document.getElementById('workspace');
+    document.getElementById('toggle-theme').addEventListener('click', () => {
+      workspace.dataset.theme = workspace.dataset.theme === 'dark' ? 'light' : 'dark';
+    });
+    document.getElementById('save').addEventListener('click', () => {
+      document.getElementById('status').textContent = '当前测站：' + document.getElementById('station').value;
+      // 真实保存请求沿用应用现有逻辑。
+    });
+  </script>
+</body>
+</html>
+```
+
+带 Vite 等构建工具的原生页面也可以在其唯一公共入口 `import 'sky-ui-kit/model-workspace.css'`。HTML 结构类负责外观，原有表单提交、事件和业务逻辑仍由页面维护；data-native-controls 显式开启原生控件外观。
+
+## Vue 3：使用组件
+
+main.ts 只引入一次公共 CSS：
+
+```ts
+import 'element-plus/dist/index.css'
+import 'sky-ui-kit/style.css'
+```
+
+不再额外引入 model-workspace.css，style.css 已包含同一主题。页面示例：
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ModelWorkspace, ModelWorkspaceHeader, ModelWorkspacePanel, UiButton, UiInput } from 'sky-ui-kit'
+const theme = ref<'light' | 'dark'>('light')
+const station = ref('汉口站')
+const message = ref('等待配置')
+</script>
+<template>
+  <ModelWorkspace :theme="theme" style="min-height: 100vh">
+    <template #header>
+      <ModelWorkspaceHeader title="模型计算工作区" description="统一模型页面主题">
+        <template #actions>
+          <UiButton @click="theme = theme === 'light' ? 'dark' : 'light'">切换主题</UiButton>
+        </template>
+      </ModelWorkspaceHeader>
+    </template>
+    <ModelWorkspacePanel title="模型配置">
+      <UiInput v-model="station" placeholder="测站名称" />
+      <template #footer>
+        <span role="status">{{ message }}</span>
+        <UiButton type="primary" @click="message = '当前测站：' + station">保存配置</UiButton>
+      </template>
+    </ModelWorkspacePanel>
+  </ModelWorkspace>
+</template>
+```
+
+HTML 与 Vue 共用同一份 token 和结构样式，切换方式分别为 data-theme 和 theme 属性；两种方式均不需要原项目本地样式文件。新增颜色和布局规则应修改组件库，使用方只绑定业务数据和事件。

package/docs/ON-DEMAND.md

@@ -0,0 +1,38 @@
+# 按需引入
+
+下一次发布后支持独立组件路径：
+
+```ts
+// main.ts 中公共 CSS 只加载一次
+import 'element-plus/dist/index.css'
+import 'sky-ui-kit/style.css'
+
+// 页面中只导入需要的组件；可使用默认或命名导入
+import UiButton from 'sky-ui-kit/components/UiButton'
+import { MapSideMenu } from 'sky-ui-kit/components/MapSideMenu'
+```
+
+原有 `import { UiButton } from 'sky-ui-kit'` 保持兼容。主题包装调用添加 PURE 标记，供 Vite/Rollup 等生产打包器裁剪未使用组件。独立入口共享必要的运行代码，不能把整个命名空间注册为全局组件后期待裁剪。
+
+这里是构建时按需包含。需要进入页面才下载代码时，在应用路由使用 `() => import('./pages/MapPage.vue')`，组件放到该页面导入。
+
+公共 style.css 仍包含整体主题和组件样式，不宣称 CSS 已逐组件拆分。Element Plus CSS 的按需方案由消费方配置；当前文档使用完整 CSS 以保证样式完整。SvgIcon 只引用 sprite，须由应用注册，但图标源码仍为完整集合；显式导入 projectIcons 也会包含图库，不宣称逐图标裁剪。
+
+该配置尚未构建验证，下一次用户授权打包时核对独立 JS、类型入口及消费项目产物体积；当前已发布的 0.1.6 不包含本次配置。
+
+
+## 2026-10-19 轻量入口更新（未发布）
+
+主入口不再导出 projectIcons / ProjectIconName / registerProjectIcons，改从 sky-ui-kit/icons 导入。SvgIcon 只引用已有 sprite，默认 prefix 仍为 sky-icon-；自有 sprite 用 prefix="icon-"。保留图库的应用需要在 main.ts 显式 registerProjectIcons([名称])，图标资源不会自动下载。可选图库约 980 KB，不需要时不要导入。此变更尚未发布，安装 0.1.6 不具备新子路径。
+
+## 构建对比（2026-10-19）
+
+采用 esbuild 对相同组件进行生产裁剪、压缩，Vue / Element Plus / 图标依赖 / motion-v 均外置；因此数据只表示库增量 JS，不含 CSS 和上游依赖。
+
+| 组件 | 0.1.6 JS / gzip | 新构建 JS / gzip |
+|---|---:|---:|
+| UiButton | 116602 / 35571 B | 1961 / 989 B |
+| MapSideMenu | 116605 / 35577 B | 8411 / 3487 B |
+| SvgIcon | 1092502 / 364357 B | 2224 / 1163 B |
+
+主入口文件从约 1161 KB 降到 178 KB，但还有共享 chunk；不能只看入口文件判断网站下载量。上表已包含各示例引用的库共享代码。可选 icons.js 约 980 KB，npm 安装包仍包含它；网站不导入即可不进入组件依赖链。