sky-ui-kit 0.1.8 → 0.1.10

package/dist/utils/dimensions.d.ts

@@ -0,0 +1,5 @@
+/** Numeric dimensions are VFit design units; CSS strings pass through unchanged. */
+export type DesignLength = number | string;
+export type DesignSpacing = DesignLength | readonly [DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength, DesignLength];
+export declare function designLength(value: DesignLength): string;
+export declare function designSpacing(value: DesignSpacing): string;

package/docs/AI-CHANGELOG.md

@@ -437,8 +437,83 @@ SVG 图库从主入口移到可选 icons 入口，SvgIcon 不再自动注册；
 ## 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 注册表为准。
+
+
+
+## 2026-11-03：可配置 VFit 尺寸（源码待发布）
+
+数字尺寸代表设计单位，由组件转换为 `calc(var(--cp-font-1, 1px) * n)`；CSS 字符串原样使用，不额外注册 VFit 或 transform。DesignSpacing 支持单值及2/3/4项数组，遵循CSS间距顺序。0是有效值。调用方传裸字符串 `"12"` 不是合法CSS长度，应使用 `:gap="12"`；`"12px"` 是固定CSS像素。
+
+所有新增参数有默认值；下表空字符串表示使用组件现有布局/样式默认值，不是0。根style可控制组件根尺寸，内部内边距通过对应props调整，无需deep覆盖。
+
+| 组件 | 参数与默认值 |
+| --- | --- |
+| MapPageLayout | 新增gap=12；已有rightPanelWidth=328、leftPanelWidth=320、edge=12等参数兼容字符串并支持数字；top/bottom/toolbar/timeline偏移默认空字符串，沿用自动避让 |
+| DefenseMapLayout | gap=4、padding=4、toolbarGap=12、toolbarPadding=12；topOffset默认64设计单位，兼容数字/字符串 |
+| MapWorkspacePanel | headerPadding=16、bodyPadding=16、footerPadding=[12,16]、gap=16 |
+| ModelWorkspacePanel | headerPadding=[12,16]、bodyPadding=16、footerPadding=[12,16]、gap=12 |
+| WorkbenchPanel | width='auto'、height='auto'、padding=0、gap=0；gap只在调用方使用flex/grid时产生间距，不强改display |
+| ManagementResourceLayout | gap=20、padding=[0,24,20]（内容区域）、introPadding=24、filterGap=20、filterPadding=[20,24]、inputWidth=260、selectWidth=160、cascaderWidth=280、responsive=false |
+| AppSelect | width='100%'、controlHeight=''（按size取主题小/中/大高度）、controlPadding=[0,10]；多选内容可增高；浮层不再设100%最小宽度，使用底层fit-input-width等配置 |
+| ProjectMenu | width=''、itemHeight=''、itemPadding=''、padding=''（分别保留横/纵菜单已有默认值）、gap=2 |
+| MapTimeline | padding=[10,12]、gap=9、trackHeight=88、controlHeight=30；不改变播放/时次数据API |
+| MapBottomProcessPanel | height=320、maxHeight='42dvh'、headerPadding=[10,16]、metaPadding=[8,16,0]、gap=12 |
+| ProcessDataTable | cellPadding=[6,10]、paginationGap=12、paginationPadding=5 |
+
+ManagementResourceLayout默认按VFit保持结构，不在700px阈值自动切换；旧调用方如需原断点布局显式传responsive=true。这是需要在升级说明中说明的行为变化。其内容区域padding与介绍区padding分开，避免改变原默认留白。
+
+地图布局时间轴测量改为offsetHeight，使用布局坐标而非transform后的视口像素，防止再次乘入缩放系数。UiButton/UiSelect/UiTable等基础组件继续使用底层size、width、height及主题token，无重复同义接口。旧TemplateLayout保留兼容接口，不冒充MapPageLayout别名。
+
+示例：
+```vue
+<MapWorkspacePanel title="降水统计" :header-padding="[12, 16]" :body-padding="[8, 12]" :gap="8">
+  业务内容
+</MapWorkspacePanel>
+<MapPageLayout :right-panel-width="320" :edge="12" :gap="8" />
+```
+预览入口：MapPageLayout布局演示，点击“查看紧凑尺寸”比较右栏宽度、边距与面板内边距。其他组件参数与默认值可在生成API查询。当前未构建、打包、发布或浏览器验证，用户预览确认后自行发版。
 
-## 2026-11-02 · 0.1.8 发布准备
+## 2026-11-03 · 0.1.9 发布准备
 
-- 发布当前组件源码、按需入口及模型工作区主题；HTML 使用 model-workspace.css，Vue 使用组件与 style.css。清除旧消费项目锁记录。发布状态以 npm 注册表为准。
+- 将当前布局、面板、尺寸适配与主题调整纳入新版，重新生成 AI 文档并检查组件包。发布结果以 npm 注册表为准。
 
+
+## 2026-11-04：HTML 按需样式接入（未发布）
+
+新增 theme/panel/button/input 四个 CSS 出口，完整 model-workspace.css 与拆分入口共享源码；网站新增隔离 HTML 示例。外观模式保留原 DOM/事件，不能当作 Vue 组件接入。结构、安装、状态、主题、浮层及 AGENTS.md 规则见 [HTML 接入](HTML-INTEGRATION.md)。仅生成文档和静态检查，未构建、发布或浏览器验证；历史“CSS 未拆分”对 Vue style.css 仍成立。
+
+### 原生控件自动换肤调整（未发布）
+
+新增 sky-html 容器入口，按需样式直接匹配原生 button/input/select/textarea；支持 data-sky-native="off" 本身及后代退出、Element Plus/地图内部控件排除，保留旧工作区 opt-in。主题默认低优先级，特殊按钮使用 data-variant，支持只读、禁用、错误及焦点状态；面板继续使用明确结构类，不覆盖所有 div。示例网站展示完整原生 HTML 状态及退出区域，详见 HTML-INTEGRATION.md。
+
+### HTML 控件未换肤修复
+
+此前 Element Plus 排除规则使用 class 包含 el-，误命中 sky-model-panel，导致整块面板内原生控件不应用样式。改为类名开头或空格后的 el- 前缀匹配，保留显式局部退出和第三方控件隔离。补充 DOM 选择器回归检查；未进行浏览器视觉验证。
+
+### HTML / Vue 控件视觉统一（未发布）
+
+HTML 控件直接复用 scoped-theme.css 的 userssite 主题变量，与 Vue 共用字体、默认 32px 高度、4px 圆角、主色/危险色及派生状态色；危险按钮为实底，禁用状态不再整体透明。补充复选框、单选框及 data-sky-error 错误文案。HTML 示例同步网站根主题变量。只验证源码和 DOM 选择器，未进行浏览器像素对比；原生 select 弹出菜单、日期选择器仍由浏览器提供。
+
+## HTML 表单控件逐项验收模块
+
+网站新增独立“HTML 表单控件”导航，22 项按编号定位，每项包含真实原生标签、可操作状态、可复制代码及当前页核对标记。目录与生成文档共享 src/html-form-catalog.ts，详见 HTML-FORM-CATALOG.md。滑块/颜色/上传仍为原生外观；复杂 Vue 组件没有等价原生标签，不宣称实现对应交互。仅做类型和文档检查，等待用户逐项核对。
+
+### HTML 输入聚焦双框修复
+
+文本输入、select、textarea 聚焦时取消外扩 outline 和额外阴影，仅将已有边框改为主题主色；错误状态聚焦/悬停继续保持危险色。复选框、单选框的键盘焦点提示不变。未进行浏览器验证。
+
+### 原生数字、选择和上传控件完善（未发布）
+
+多选 select 恢复列表高度，保留系统弹出菜单；file-selector-button 使用共享主题及禁用/聚焦状态。新增可选 html/number.js 与 number.css，enhanceNumbers 保留原 input、min/max/step 与事件，返回清理函数；step=any 禁用增减，动态新增节点需再次初始化。验收第 8/10/20 项同步更新。未构建或浏览器验证。
+
+### HTML 原生多选列表外观调整
+
+多选/size 列表设置可覆盖的 220px 宽度、选项留白和主题选中背景，补充悬停、选项禁用、整组禁用和高对比度规则；保留 size 与原生多选语义，不修改单选系统弹出菜单。第 10 项示例增加滚动及多选操作说明。未进行浏览器视觉验证。
+
+## 0.1.10 发布内容
+
+包含 HTML 按需主题/面板/按钮/输入样式、数字输入增强脚本、原生选择与上传样式、22 项表单验收目录及 AI 接入规则。发布前重新生成文档和构建，并检查包内出口。浏览器视觉验收及独立消费业务项目测试仍由用户继续完成。

package/docs/AI-GUIDE.md

@@ -1,4 +1,10 @@
 # sky-ui-kit：AI 使用指南
+
+## AI 接入入口：先选择使用方式
+
+当用户要求安装、引入 sky-ui-kit 时，请先读取当前安装包的 llms.txt 和 [HTML / Vue 接入判断](docs/HTML-INTEGRATION.md)，检查项目及真实 exports。只需外观时使用正式 HTML 样式接口（新版容器 sky-html 内原生控件自动换肤，data-sky-native="off" 局部退出）；需要交互时使用真实 Vue 组件，HTML 项目可局部挂载。需求不明确时先询问，接入后合并项目 AGENTS.md 规则，不能把 npm install 或仅加载 CSS 报告为完整组件接入。
+
+HTML 按需入口从 0.1.10 提供；0.1.9 使用完整 model-workspace.css。示例网站快速开始下方提供“HTML 按需样式接入”演示和完整可复制代码。
 
 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 的浮层仍由组件自身管理层级。预览“模拟模块遮挡”可核对重叠交互；完全被覆盖的部分不接收鼠标，应从模块可见区域移入。
 
@@ -231,6 +237,41 @@ MapLayerControl 参考平台 LayerControl/LayerTreeNode，提供底图选择、
 
 flat 模式按钮此前错误使用 child 类而内部图标、文字使用 parent 类，导致 active 样式不匹配。统一按钮及内容层级类，保留现有单选、多选及事件逻辑。
 
+## 2026-11-03：可配置 VFit 尺寸（源码待发布）
+
+数字尺寸代表设计单位，由组件转换为 `calc(var(--cp-font-1, 1px) * n)`；CSS 字符串原样使用，不额外注册 VFit 或 transform。DesignSpacing 支持单值及2/3/4项数组，遵循CSS间距顺序。0是有效值。调用方传裸字符串 `"12"` 不是合法CSS长度，应使用 `:gap="12"`；`"12px"` 是固定CSS像素。
+
+所有新增参数有默认值；下表空字符串表示使用组件现有布局/样式默认值，不是0。根style可控制组件根尺寸，内部内边距通过对应props调整，无需deep覆盖。
+
+| 组件 | 参数与默认值 |
+| --- | --- |
+| MapPageLayout | 新增gap=12；已有rightPanelWidth=328、leftPanelWidth=320、edge=12等参数兼容字符串并支持数字；top/bottom/toolbar/timeline偏移默认空字符串，沿用自动避让 |
+| DefenseMapLayout | gap=4、padding=4、toolbarGap=12、toolbarPadding=12；topOffset默认64设计单位，兼容数字/字符串 |
+| MapWorkspacePanel | headerPadding=16、bodyPadding=16、footerPadding=[12,16]、gap=16 |
+| ModelWorkspacePanel | headerPadding=[12,16]、bodyPadding=16、footerPadding=[12,16]、gap=12 |
+| WorkbenchPanel | width='auto'、height='auto'、padding=0、gap=0；gap只在调用方使用flex/grid时产生间距，不强改display |
+| ManagementResourceLayout | gap=20、padding=[0,24,20]（内容区域）、introPadding=24、filterGap=20、filterPadding=[20,24]、inputWidth=260、selectWidth=160、cascaderWidth=280、responsive=false |
+| AppSelect | width='100%'、controlHeight=''（按size取主题小/中/大高度）、controlPadding=[0,10]；多选内容可增高；浮层不再设100%最小宽度，使用底层fit-input-width等配置 |
+| ProjectMenu | width=''、itemHeight=''、itemPadding=''、padding=''（分别保留横/纵菜单已有默认值）、gap=2 |
+| MapTimeline | padding=[10,12]、gap=9、trackHeight=88、controlHeight=30；不改变播放/时次数据API |
+| MapBottomProcessPanel | height=320、maxHeight='42dvh'、headerPadding=[10,16]、metaPadding=[8,16,0]、gap=12 |
+| ProcessDataTable | cellPadding=[6,10]、paginationGap=12、paginationPadding=5 |
+
+ManagementResourceLayout默认按VFit保持结构，不在700px阈值自动切换；旧调用方如需原断点布局显式传responsive=true。这是需要在升级说明中说明的行为变化。其内容区域padding与介绍区padding分开，避免改变原默认留白。
+
+地图布局时间轴测量改为offsetHeight，使用布局坐标而非transform后的视口像素，防止再次乘入缩放系数。UiButton/UiSelect/UiTable等基础组件继续使用底层size、width、height及主题token，无重复同义接口。旧TemplateLayout保留兼容接口，不冒充MapPageLayout别名。
+
+示例：
+```vue
+<MapWorkspacePanel title="降水统计" :header-padding="[12, 16]" :body-padding="[8, 12]" :gap="8">
+  业务内容
+</MapWorkspacePanel>
+<MapPageLayout :right-panel-width="320" :edge="12" :gap="8" />
+```
+预览入口：MapPageLayout布局演示，点击“查看紧凑尺寸”比较右栏宽度、边距与面板内边距。其他组件参数与默认值可在生成API查询。当前未构建、打包、发布或浏览器验证，用户预览确认后自行发版。
+
+HTML 表单逐项示例见 [验收目录](HTML-FORM-CATALOG.md)，网站独立导航按编号核对；原生与 Vue 的边界见各项说明。
+
 <!-- GENERATED EXAMPLES -->
 
 ### 快速开始：安装最新正式版本
@@ -974,26 +1015,29 @@ const items = [{ key: 'overview', label: '运行概览' }, { key: 'data', label:
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue'
-import { MapPageLayout, DefenseMapLayout, UiButton, MapTools, WorkbenchPanel } from 'sky-ui-kit'
+import { MapPageLayout, DefenseMapLayout, UiButton, MapTools, WorkbenchPanel, MapWorkspacePanel } from 'sky-ui-kit'
 const rightOpen = ref(true)
 const showTimeline = ref(true)
 const overlap = ref(false)
+const compactDimensions = ref(false)
 </script>
 <template>
   <div class="layout-demo-controls">
+    <UiButton @click="compactDimensions = !compactDimensions">{{ compactDimensions ? '切回默认尺寸' : '查看紧凑尺寸' }}</UiButton>
     <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)' : ''">
+    <MapPageLayout v-model:right-open="rightOpen" :gap="compactDimensions ? 6 : 12" :edge="compactDimensions ? 6 : 12" :right-panel-width="compactDimensions ? 280 : 328" :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 #right><MapWorkspacePanel title="可配置面板" :header-padding="compactDimensions ? [8, 12] : 16" :body-padding="compactDimensions ? [8, 12] : 16" :gap="compactDimensions ? 8 : 16">数字为 VFit 设计尺寸；默认值无需重复传入。<template #footer>鼠标移入当前区域时置顶</template></MapWorkspacePanel></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>
+  <p>尺寸参数：数字自动跟随 VFit，数组为上/右/下/左间距，CSS 字符串原样使用。例如 :body-padding="[8, 12]"、:gap="8"。</p>
   <h3>会商布局 · 顶部操作区 + 四个地图位置</h3>
   <p>以下仅展示区域，不创建地图。保持两列布局，尺寸沿用 VFit 缩放变量；四个地图位置均分剩余高度，不产生内部滚动条。</p>
   <div class="layout-demo-map" >

package/docs/COMPONENT-API.md

@@ -27,6 +27,9 @@ Slots: No declared content slots.
 
 | Name | Type | Required | Default expression |
 |---|---|---|---|
+| width | DesignLength | false | '100%' |
+| controlHeight | DesignLength | false | '' |
+| controlPadding | DesignSpacing | false | () => [0, 10] |
 | modelValue | AppSelectValue | false | undefined |
 | options | AppSelectOption[] | false | () => [] |
 | emptyLabel | string | false | '暂无可选项' |
@@ -41,6 +44,10 @@ Slots: No declared content slots.
 Slots: No declared content slots.
 
 ```ts
+/** Numeric dimensions are VFit design units; CSS strings pass through unchanged. */
+export type DesignLength = number | string
+export type DesignSpacing = DesignLength | readonly [DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength, DesignLength]
+
 export type AppSelectValue = string | number | boolean | Record<string, unknown> | AppSelectValue[] | null | undefined
 export type AppSelectOption = {
   label: string
@@ -55,6 +62,10 @@ export type AppSelectOption = {
 
 | Name | Type | Required | Default expression |
 |---|---|---|---|
+| padding | DesignSpacing | false | () => [10, 12] |
+| gap | DesignLength | false | 9 |
+| trackHeight | DesignLength | false | 88 |
+| controlHeight | DesignLength | false | 30 |
 | modelValue | number | false | 0 |
 | startTime | TimelineTimeInput | false | () => new Date() |
 | points | TimelinePoint[] | false | () => [] |
@@ -89,6 +100,10 @@ export type AppSelectOption = {
 Slots: date-select
 
 ```ts
+/** Numeric dimensions are VFit design units; CSS strings pass through unchanged. */
+export type DesignLength = number | string
+export type DesignSpacing = DesignLength | readonly [DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength, DesignLength]
+
 type IntervalUnit = 'minute' | 'hour' | 'day' | 'month' | 'year'
 type TimelineKind = 'observed' | 'forecast'
 type TimelineTimeInput = string | number | Date
@@ -178,6 +193,11 @@ export type TimeRangeQuickOption = {
 
 | Name | Type | Required | Default expression |
 |---|---|---|---|
+| width | DesignLength | false | '' |
+| itemHeight | DesignLength | false | '' |
+| itemPadding | DesignSpacing | false | '' |
+| padding | DesignSpacing | false | '' |
+| gap | DesignLength | false | 2 |
 | direction | 'horizontal' &#124; 'vertical' | false | 'horizontal' |
 | active | string | false | '' |
 | items | ProjectMenuItem[] | false | () => [] |
@@ -191,6 +211,10 @@ export type TimeRangeQuickOption = {
 Slots: No declared content slots.
 
 ```ts
+/** Numeric dimensions are VFit design units; CSS strings pass through unchanged. */
+export type DesignLength = number | string
+export type DesignSpacing = DesignLength | readonly [DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength, DesignLength]
+
 export interface ProjectMenuItem { key: string; label: string; disabled?: boolean; icon?: Component; children?: ProjectMenuItem[] }
 export interface ProjectMenuGroup { label: string; items: ProjectMenuItem[] }
 ```
@@ -298,6 +322,9 @@ Slots: No declared content slots.
 | 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 |
+| cellPadding | DesignSpacing | false | () => [6, 10] |
+| paginationGap | DesignLength | false | 12 |
+| paginationPadding | DesignSpacing | false | 5 |
 
 ### Events
 
@@ -305,6 +332,13 @@ No declared events.
 
 Slots: No declared content slots.
 
+```ts
+/** Numeric dimensions are VFit design units; CSS strings pass through unchanged. */
+export type DesignLength = number | string
+export type DesignSpacing = DesignLength | readonly [DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength, DesignLength]
+
+```
+
 ## WorkbenchShell
 
 ### Props
@@ -332,6 +366,10 @@ Slots: header, sidebar-footer, workspace, default
 |---|---|---|---|
 | as | 'section' &#124; 'aside' &#124; 'div' | false | 'section' |
 | floating | boolean | false | true |
+| width | DesignLength | false | 'auto' |
+| height | DesignLength | false | 'auto' |
+| padding | DesignSpacing | false | 0 |
+| gap | DesignLength | false | 0 |
 
 ### Events
 
@@ -339,6 +377,13 @@ No declared events.
 
 Slots: default
 
+```ts
+/** Numeric dimensions are VFit design units; CSS strings pass through unchanged. */
+export type DesignLength = number | string
+export type DesignSpacing = DesignLength | readonly [DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength, DesignLength]
+
+```
+
 ## MetricCard
 
 ### Props
@@ -443,17 +488,18 @@ Slots: left, top, toolbar, right, legend, timeline, content, default
 
 | Name | Type | Required | Default expression |
 |---|---|---|---|
+| gap | DesignLength | false | 12 |
 | 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 | '' |
+| rightPanelWidth | DesignLength | false | 'calc(var(--cp-font-1, 1px) * 328)' |
+| leftPanelWidth | DesignLength | false | 'calc(var(--cp-font-1, 1px) * 320)' |
+| edge | DesignLength | false | 'calc(var(--cp-font-1, 1px) * 12)' |
+| topOffset | DesignLength | false | '' |
+| bottomOffset | DesignLength | false | '' |
+| toolbarTop | DesignLength | false | '' |
+| timelineLeft | DesignLength | false | '' |
+| timelineRight | DesignLength | false | '' |
+| timelineBottom | DesignLength | false | '' |
 
 ### Events
 
@@ -462,6 +508,13 @@ Slots: left, top, toolbar, right, legend, timeline, content, default
 
 Slots: left, top, toolbar, right, legend, timeline, content, default
 
+```ts
+/** Numeric dimensions are VFit design units; CSS strings pass through unchanged. */
+export type DesignLength = number | string
+export type DesignSpacing = DesignLength | readonly [DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength, DesignLength]
+
+```
+
 ## RainfallRankingTable
 
 ### Props
@@ -800,6 +853,15 @@ Slots: message, primary, default, footer
 | title | string | false | undefined / no declared default |
 | description | string | false | undefined / no declared default |
 | showIntro | boolean | false | true |
+| gap | DesignLength | false | 20 |
+| padding | DesignSpacing | false | () => [0, 24, 20] |
+| introPadding | DesignSpacing | false | 24 |
+| filterGap | DesignLength | false | 20 |
+| filterPadding | DesignSpacing | false | () => [20, 24] |
+| inputWidth | DesignLength | false | 260 |
+| selectWidth | DesignLength | false | 160 |
+| cascaderWidth | DesignLength | false | 280 |
+| responsive | boolean | false | false |
 
 ### Events
 
@@ -807,6 +869,13 @@ No declared events.
 
 Slots: summary, filters, heading, actions, default
 
+```ts
+/** Numeric dimensions are VFit design units; CSS strings pass through unchanged. */
+export type DesignLength = number | string
+export type DesignSpacing = DesignLength | readonly [DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength, DesignLength]
+
+```
+
 ## GlobalMapLayerDock
 
 ### Props
@@ -872,6 +941,11 @@ Slots: footer
 
 | Name | Type | Required | Default expression |
 |---|---|---|---|
+| height | DesignLength | false | 320 |
+| maxHeight | DesignLength | false | '42dvh' |
+| headerPadding | DesignSpacing | false | ()=>[10,16] |
+| metaPadding | DesignSpacing | false | ()=>[8,16,0] |
+| gap | DesignLength | false | 12 |
 | title | string | true | undefined / no declared default |
 | subtitle | string | false | '' |
 | demo | boolean | false | false |
@@ -887,6 +961,13 @@ Slots: footer
 
 Slots: No declared content slots.
 
+```ts
+/** Numeric dimensions are VFit design units; CSS strings pass through unchanged. */
+export type DesignLength = number | string
+export type DesignSpacing = DesignLength | readonly [DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength, DesignLength]
+
+```
+
 ## MapWorkspacePanel
 
 ### Props
@@ -895,6 +976,10 @@ Slots: No declared content slots.
 |---|---|---|---|
 | title | string | true | undefined / no declared default |
 | subtitle | string | false | undefined / no declared default |
+| headerPadding | DesignSpacing | false | 16 |
+| bodyPadding | DesignSpacing | false | 16 |
+| footerPadding | DesignSpacing | false | () => [12, 16] |
+| gap | DesignLength | false | 16 |
 
 ### Events
 
@@ -902,6 +987,13 @@ No declared events.
 
 Slots: actions, default, footer
 
+```ts
+/** Numeric dimensions are VFit design units; CSS strings pass through unchanged. */
+export type DesignLength = number | string
+export type DesignSpacing = DesignLength | readonly [DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength, DesignLength]
+
+```
+
 ## NationalHydroSidebar
 
 ### Props
@@ -971,7 +1063,11 @@ Slots: No declared content slots.
 |---|---|---|---|
 | structured | boolean | false | false |
 | columns | 1 &#124; 2 | false | 2 |
-| topOffset | string | false | 'calc(var(--cp-font-1, 1px) * 64)' |
+| gap | DesignLength | false | 4 |
+| padding | DesignSpacing | false | 4 |
+| toolbarGap | DesignLength | false | 12 |
+| toolbarPadding | DesignSpacing | false | 12 |
+| topOffset | DesignLength | false | 'calc(var(--cp-font-1, 1px) * 64)' |
 
 ### Events
 
@@ -979,6 +1075,13 @@ No declared events.
 
 Slots: toolbar, default
 
+```ts
+/** Numeric dimensions are VFit design units; CSS strings pass through unchanged. */
+export type DesignLength = number | string
+export type DesignSpacing = DesignLength | readonly [DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength, DesignLength]
+
+```
+
 ## ModelWorkspace
 
 ### Props
@@ -1016,6 +1119,10 @@ Slots: title, actions
 | Name | Type | Required | Default expression |
 |---|---|---|---|
 | title | string | false | undefined / no declared default |
+| headerPadding | DesignSpacing | false | () => [12, 16] |
+| bodyPadding | DesignSpacing | false | 16 |
+| footerPadding | DesignSpacing | false | () => [12, 16] |
+| gap | DesignLength | false | 12 |
 
 ### Events
 
@@ -1023,6 +1130,13 @@ No declared events.
 
 Slots: header, actions, default, footer
 
+```ts
+/** Numeric dimensions are VFit design units; CSS strings pass through unchanged. */
+export type DesignLength = number | string
+export type DesignSpacing = DesignLength | readonly [DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength] | readonly [DesignLength, DesignLength, DesignLength, DesignLength]
+
+```
+
 ## 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.

package/docs/CSS-THEME.md

@@ -248,3 +248,65 @@ import { DefenseMapLayout, UiButton } from 'sky-ui-kit'
 
 
 独立 model-workspace.css 面向原生 HTML，无 Vue/Element Plus 样式依赖；与 style.css 的模型主题来自同一源文件，Vue 无需重复导入。
+
+
+## 2026-11-03：可配置 VFit 尺寸（源码待发布）
+
+数字尺寸代表设计单位，由组件转换为 `calc(var(--cp-font-1, 1px) * n)`；CSS 字符串原样使用，不额外注册 VFit 或 transform。DesignSpacing 支持单值及2/3/4项数组，遵循CSS间距顺序。0是有效值。调用方传裸字符串 `"12"` 不是合法CSS长度，应使用 `:gap="12"`；`"12px"` 是固定CSS像素。
+
+所有新增参数有默认值；下表空字符串表示使用组件现有布局/样式默认值，不是0。根style可控制组件根尺寸，内部内边距通过对应props调整，无需deep覆盖。
+
+| 组件 | 参数与默认值 |
+| --- | --- |
+| MapPageLayout | 新增gap=12；已有rightPanelWidth=328、leftPanelWidth=320、edge=12等参数兼容字符串并支持数字；top/bottom/toolbar/timeline偏移默认空字符串，沿用自动避让 |
+| DefenseMapLayout | gap=4、padding=4、toolbarGap=12、toolbarPadding=12；topOffset默认64设计单位，兼容数字/字符串 |
+| MapWorkspacePanel | headerPadding=16、bodyPadding=16、footerPadding=[12,16]、gap=16 |
+| ModelWorkspacePanel | headerPadding=[12,16]、bodyPadding=16、footerPadding=[12,16]、gap=12 |
+| WorkbenchPanel | width='auto'、height='auto'、padding=0、gap=0；gap只在调用方使用flex/grid时产生间距，不强改display |
+| ManagementResourceLayout | gap=20、padding=[0,24,20]（内容区域）、introPadding=24、filterGap=20、filterPadding=[20,24]、inputWidth=260、selectWidth=160、cascaderWidth=280、responsive=false |
+| AppSelect | width='100%'、controlHeight=''（按size取主题小/中/大高度）、controlPadding=[0,10]；多选内容可增高；浮层不再设100%最小宽度，使用底层fit-input-width等配置 |
+| ProjectMenu | width=''、itemHeight=''、itemPadding=''、padding=''（分别保留横/纵菜单已有默认值）、gap=2 |
+| MapTimeline | padding=[10,12]、gap=9、trackHeight=88、controlHeight=30；不改变播放/时次数据API |
+| MapBottomProcessPanel | height=320、maxHeight='42dvh'、headerPadding=[10,16]、metaPadding=[8,16,0]、gap=12 |
+| ProcessDataTable | cellPadding=[6,10]、paginationGap=12、paginationPadding=5 |
+
+ManagementResourceLayout默认按VFit保持结构，不在700px阈值自动切换；旧调用方如需原断点布局显式传responsive=true。这是需要在升级说明中说明的行为变化。其内容区域padding与介绍区padding分开，避免改变原默认留白。
+
+地图布局时间轴测量改为offsetHeight，使用布局坐标而非transform后的视口像素，防止再次乘入缩放系数。UiButton/UiSelect/UiTable等基础组件继续使用底层size、width、height及主题token，无重复同义接口。旧TemplateLayout保留兼容接口，不冒充MapPageLayout别名。
+
+示例：
+```vue
+<MapWorkspacePanel title="降水统计" :header-padding="[12, 16]" :body-padding="[8, 12]" :gap="8">
+  业务内容
+</MapWorkspacePanel>
+<MapPageLayout :right-panel-width="320" :edge="12" :gap="8" />
+```
+预览入口：MapPageLayout布局演示，点击“查看紧凑尺寸”比较右栏宽度、边距与面板内边距。其他组件参数与默认值可在生成API查询。当前未构建、打包、发布或浏览器验证，用户预览确认后自行发版。
+
+## 2026-11-04：HTML 按需样式接入（未发布）
+
+新增 theme/panel/button/input 四个 CSS 出口，完整 model-workspace.css 与拆分入口共享源码；网站新增隔离 HTML 示例。外观模式保留原 DOM/事件，不能当作 Vue 组件接入。结构、安装、状态、主题、浮层及 AGENTS.md 规则见 [HTML 接入](HTML-INTEGRATION.md)。仅生成文档和静态检查，未构建、发布或浏览器验证；历史“CSS 未拆分”对 Vue style.css 仍成立。
+
+### 原生控件自动换肤调整（未发布）
+
+新增 sky-html 容器入口，按需样式直接匹配原生 button/input/select/textarea；支持 data-sky-native="off" 本身及后代退出、Element Plus/地图内部控件排除，保留旧工作区 opt-in。主题默认低优先级，特殊按钮使用 data-variant，支持只读、禁用、错误及焦点状态；面板继续使用明确结构类，不覆盖所有 div。示例网站展示完整原生 HTML 状态及退出区域，详见 HTML-INTEGRATION.md。
+
+### HTML 控件未换肤修复
+
+此前 Element Plus 排除规则使用 class 包含 el-，误命中 sky-model-panel，导致整块面板内原生控件不应用样式。改为类名开头或空格后的 el- 前缀匹配，保留显式局部退出和第三方控件隔离。补充 DOM 选择器回归检查；未进行浏览器视觉验证。
+
+### HTML / Vue 控件视觉统一（未发布）
+
+HTML 控件直接复用 scoped-theme.css 的 userssite 主题变量，与 Vue 共用字体、默认 32px 高度、4px 圆角、主色/危险色及派生状态色；危险按钮为实底，禁用状态不再整体透明。补充复选框、单选框及 data-sky-error 错误文案。HTML 示例同步网站根主题变量。只验证源码和 DOM 选择器，未进行浏览器像素对比；原生 select 弹出菜单、日期选择器仍由浏览器提供。
+
+### HTML 输入聚焦双框修复
+
+文本输入、select、textarea 聚焦时取消外扩 outline 和额外阴影，仅将已有边框改为主题主色；错误状态聚焦/悬停继续保持危险色。复选框、单选框的键盘焦点提示不变。未进行浏览器验证。
+
+### 原生数字、选择和上传控件完善（未发布）
+
+多选 select 恢复列表高度，保留系统弹出菜单；file-selector-button 使用共享主题及禁用/聚焦状态。新增可选 html/number.js 与 number.css，enhanceNumbers 保留原 input、min/max/step 与事件，返回清理函数；step=any 禁用增减，动态新增节点需再次初始化。验收第 8/10/20 项同步更新。未构建或浏览器验证。
+
+### HTML 原生多选列表外观调整
+
+多选/size 列表设置可覆盖的 220px 宽度、选项留白和主题选中背景，补充悬停、选项禁用、整组禁用和高对比度规则；保留 size 与原生多选语义，不修改单选系统弹出菜单。第 10 项示例增加滚动及多选操作说明。未进行浏览器视觉验证。