react-extjs 0.0.1

package/src/styles/ext-theme.css

@@ -0,0 +1,889 @@
+/* 保真契约：原样复用 Ext JS 3.2.1 样式（结构 ext-all.css + sprite 相对路径）。
+   资源已复制到 public/extjs-assets/（见 npm run sync:extjs），从项目内引用，
+   开发/生产构建均不再走 Vite 的 @fs 跨目录限制。url(../images/...) 相对
+   /extjs-assets/css/ext-all.css 解析到 /extjs-assets/images/...，像素保真不变。
+   主题（xtheme-*.css）不再在此 @import，改为运行时由框架入口 / ThemeSwitcher 通过
+   <link id="extjs-dynamic-theme"> 注入默认主题（见 src/util/theme.ts ensureDefaultTheme），
+   以支持「不用 ThemeSwitcher 也有默认主题」与运行时整篇换主题。注入的 link 用 head.prepend
+   置于最前，使 xtheme 早于下方覆盖规则加载（覆盖规则只设 border-width/style，颜色由 xtheme 补）。 */
+@import '/extjs-assets/css/ext-all.css';
+/* TreeGrid（Ext.ux.tree.TreeGrid）专属样式：来自 Ext 发行 examples/ux/treegrid/treegrid.css，
+   是 Ext 官方的、与 ext-all.css 配套的组件样式，复用契约不变（仅路径在 examples/ux 而非
+   resources/css，故单独复制并 import，sync:extjs 不会覆盖它）。 */
+@import '/extjs-assets/css/treegrid.css';
+/* StatusBar（Ext.ux.StatusBar）专属样式：来自 Ext 发行 examples/ux/statusbar/css/StatusBar.css，
+   与 ext-all.css 配套的组件样式，复用契约不变（路径在 examples/ux 而非 resources/css，故单独复制并 import）。 */
+@import '/extjs-assets/css/statusbar/statusbar.css';
+/* SpinnerField（Ext.ux.form.SpinnerField）专属样式：来自 Ext 发行 examples/ux/css/Spinner.css，
+   与 ext-all.css 配套的组件样式，复用契约不变（路径在 examples/ux 而非 resources/css，故单独复制并 import）。 */
+@import '/extjs-assets/css/spinner/spinner.css';
+/* Grid 表头列菜单箭头显隐（对齐 Ext GridView 运行时 JS：hovered 表头加 x-grid3-hd-over 显示
+   x-grid3-hd-btn；ext-all.css 仅定义 display:none 与 :over/:menu-open 显隐规则，此处用原生 CSS
+   :hover 等价复现 interactive 显隐，不引入任何新布局/视觉样式，复用 ext-all 既有意图）。 */
+.x-grid3-hd:hover .x-grid3-hd-btn { display: block; }
+
+
+/* Panel.minButtonWidth：footer 按钮最小宽度（对齐 Ext.minButtonWidth，默认 75px）。
+   仅约束 footer 按钮区，不引入新布局/视觉，复用 Ext 既有意图。 */
+.x-panel-btns button,
+.x-panel-fbar button { min-width: var(--x-panel-minbtn, 75px); }
+
+/* 表单字段盒模型用 border-box，使 width/height 直接对应 Ext 的外框尺寸。
+   原因：content-box 下 width:260 实为 260(content) + 2(border) + 6(padding) = 268 外宽，
+   导致输入框实际比设定宽 8px，且 FileUploadField（无边框 wrap）与其它文本字段差 8px、无法对齐。
+   border-box 下内联 height:22 即还原 22px 外高（原 18 content + 2 border + 2 padding = 22），
+   与 .x-form-trigger 的 22px 一致，高度保真不变；宽度则严格等于配置值，符合 Ext 的 width=外框。 */
+.x-form-text,
+.x-form-file-text,
+textarea.x-form-field,
+.x-form-trigger {
+  box-sizing: border-box;
+}
+/* trigger 在 ext-all.css 为 content-box 的 height:21（21 + 1 border-bottom = 22 外高）；
+   border-box 下改为 22 即可保持 22px 外高、内容区 21px，与输入框对齐。 */
+.x-form-trigger {
+  width: 17px;
+  height: 22px;
+}
+/* 提权覆盖 Ext ext-all 的 .x-form-field-wrap .x-form-trigger{height:21px}（content-box 语义）。
+   本表已对 .x-form-trigger 设 box-sizing:border-box，故 Ext 的 21 被当成总高 → 触发器比
+   输入框(22)矮 1px；用 0,3,0 特异性强制 22px 总高，使所有带图标字段的图标与输入框等高对齐。 */
+.x-form-field-wrap.x-form-field-trigger-wrap .x-form-trigger {
+  height: 22px;
+}
+/* 让触发器进入正常流，由 .x-form-field-trigger-wrap 的 flex 排布：
+   输入框 flex:1 自动填空余，触发器 flex:0 0 auto 取 CSS 宽度（默认 17px；
+   access 主题经 .x-form-field-wrap .x-form-trigger 提权为 20px）。覆盖
+   ext-all.css 给触发器设的 position:absolute，否则会脱离 flex 流、重叠在左。
+   注意：排除 .x-form-spinner-trigger —— SpinnerField 仍用绝对定位（见下方 .x-form-spinner-trigger
+   规则及 SpinnerField.tsx 的 inputWidth=wrap-17 布局），不能强行 static，否则右图标错位。 */
+.x-form-field-trigger-wrap > .x-form-trigger:not(.x-form-spinner-trigger) {
+  position: static;
+}
+
+/* 聚焦边框：对齐 Ext 蓝边 #7eadd9。xtheme-blue 已对 .x-form-focus 设蓝边（普通文本框生效）；
+   触发类字段（ComboBox/DateField/TimeField）聚焦时仅 wrap 加 x-trigger-wrap-focus，输入框本身
+   未加 x-form-focus，这里补一条等价规则，使其输入框同样显示 Ext 蓝边。 */
+.x-trigger-wrap-focus .x-form-text {
+  border-color: #7eadd9;
+}
+
+/* Spinner 触发器对齐 Ext 真值（.x-form-field-wrap .x-form-trigger 为 position:absolute;top:0）。
+   原 React 实现把 img 渲染成静态/块级元素，靠 img 固有高度（21px+border 1px=22px）与输入框
+   错位；改为绝对定位、与输入框顶部对齐，两者均为 22px，高度一致。 */
+.x-form-spinner-trigger {
+  position: absolute;
+  top: 0;
+}
+
+/* 保真修正：SpinnerField 的上下箭头应来自 spinner.gif，由 spinner.css 的
+   .x-form-field-wrap .x-form-spinner-trigger（特异性 0,2,0）提供。但 Ext 主题表
+   xtheme-blue.css 的 .x-form-field-wrap .x-form-trigger（同为 0,2,0）加载更晚，
+   把图标覆盖成默认 trigger.gif（普通下拉箭头），表现为 spinner 的上下箭头被替换/看不见。
+   这里用复合类把特异性提到 0,3,0（父 div 同时带 x-form-field-wrap 与
+   x-form-field-trigger-wrap）锁定 spinner 图标。仅设 background-image/repeat，
+   不碰 background-position，保留 spinner.css 的 overup/clickup 等位移态。 */
+.x-form-field-wrap.x-form-field-trigger-wrap .x-form-spinner-trigger {
+  background-image: url('/extjs-assets/css/spinner/images/spinner.gif');
+  background-repeat: no-repeat;
+}
+
+/* 输入框与圆角/触发器对齐：显式 content 高度 18px（Ext 标准 .x-form-text 高度契约）。
+   在缺少 ext-strict 上下文时，ext-all.css 的 .x-form-text{height:22px} 在 content-box 下
+   会把输入框总高撑成 26px（22 content + 2 padding + 2 border），与 22px 触发器错位；
+   此处用 content-box 下的 18px content + 2px padding + 2px border = 22px 还原，对齐触发器与
+   其他 Form 字段。 */
+.x-form-num-field {
+  height: 22px;
+}
+/* 提权覆盖 Ext ext-all 的 .ext-strict .x-form-text{height:18px}（content-box 语义）。
+   本表对 .x-form-text 设 box-sizing:border-box，故 18 被当成总高 → SpinnerField 输入框
+   比触发器(21/22)矮 3px；用 0,4,0 特异性强制 22px 总高，与图标对齐。 */
+.x-form-field-wrap.x-form-field-trigger-wrap .x-form-text.x-form-num-field {
+  height: 22px;
+}
+
+/* 触发器字段：输入框与绝对定位的触发器（top:0）顶端对齐。
+   原生 .x-form-text 为 vertical-align:middle；在缺少 Ext 表单布局受控 line-height 的上下文
+   （如文档站独立演示）下，input 的 line box 高于字段高度，middle 对齐会把输入框整体下推约
+   0.5px，使触发器相对输入框“上移”错位；改为 top 对齐后两者顶端重合，与表单内 FormField
+   受控上下文表现一致（触发器在顶、输入框在顶）。 */
+.x-form-field-trigger-wrap .x-form-text {
+  vertical-align: top;
+}
+
+/* Editor 浮层输入框：同 SpinnerField 思路，content-box 下显式 18px content 还原 22px 总高，
+   与浮层 div 的 height=22 对齐（避免 unscoped .x-form-text{height:22px} 撑成 26px 溢出 4px）。 */
+.x-editor .x-form-text {
+  height: 22px;
+}
+
+/* DatePicker 宽度适配内容（对齐 Ext 浮层/菜单形态）。
+   默认 block div 在宽容器中被撑满，导致 1px 右边框远离日历内容（table 仅 ~175px），
+   视觉上"右边没有边框"。改为 inline-block 后宽度由内容决定，四边 border 紧贴日历。 */
+.x-date-picker {
+  display: inline-block;
+}
+
+/* Editor 演示的"表单内"场景：label 与编辑内容等高对齐。
+   FormField 的 label 带 padding:3px(上+下)，继承到的行高若偏大，label 盒会被撑到 23px、
+   而编辑内容固定 22px，两者都顶对齐时 label 中心比内容低 0.5px → 内容视觉"上偏"。
+   显式令 label 行高 = 22 - 3 - 3 = 16px，使 label 盒高恰为 22px（= field 高），
+   与 Ext 表单行"label/field 等高"一致。仅作用域到 Editor 演示，不污染其它表单组件。 */
+.x-editor-form-item .x-form-item-label {
+  line-height: 16px;
+}
+
+/* EditorGrid 单元格编辑器浮层（对齐 Ext.EditorGrid 的 x-grid-editor 容器）。
+   仅作为绝对定位容器承载内联字段（input 用 border-box 100% 填满单元格），
+   不引入新视觉；overflow:visible 保证输入框若有阴影/边框不被裁剪。 */
+.x-grid-editor {
+  overflow: visible;
+}
+
+/* TreeGrid 选中行高亮（对齐 Ext.ux.tree.TreeGrid 的 x-tree-node-selected）：
+   官方 treegrid.css 只定义结构与列边框，未给选中态上色；此处沿用 xtheme-blue
+   树选中蓝 #d9e8fb（与 Tree 组件 x-tree-selected 一致），让选中行整行着色。 */
+.x-tree-node-selected {
+  background-color: #d9e8fb;
+}
+
+/* TextArea：对齐 Ext textarea。真实 Ext 经 `textarea.x-form-field`（ext-all.css:871 内边距 2px 3px、
+   :913 resize:none；xtheme-blue.css:205-209 边框 #b5b8c8 + 背景 #fff + text-bg.gif sprite）接管渲染。
+   因 `textarea.x-form-field` 优先级(0,1,1) 高于本选择器(0,1,0)，边框/背景/sprite/内边距已由原生规则
+   生效；此处仅显式补齐两项原生规则未覆盖的兜底，并纠正一处偏离：原 `resize:vertical` 优先级反转覆盖了
+   原生 `resize:none`，改为 none 以完全对齐 Ext（textarea 不可拖拽缩放）。 */
+.x-form-textarea {
+  padding: 2px 3px;
+  border: 1px solid #b5b8c8;
+  background-color: #fff;
+  resize: none;
+}
+
+/* CompositeField：对齐 Ext.form.CompositeField 的单行多字段容器。
+   子字段横向排列，分隔符居中；不引入新视觉，仅做 inline-flex 行布局。 */
+.x-form-composite {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.x-composite-separator {
+  color: #333;
+  user-select: none;
+}
+
+/* FileUploadField（Ext.ux.form.FileUploadField）：对齐 examples/ux/fileuploadfield/css/fileuploadfield.css。
+   容器相对定位；文本框绝对左、按钮绝对右、透明 file input 覆盖按钮触发系统对话框。
+   不引入新视觉，仅做定位与透明覆盖（z-index 层级：text=3 > file=2 > btn=1）。 */
+.x-form-file-wrap {
+  position: relative;
+  display: inline-block;
+  height: 22px;
+  vertical-align: middle;
+}
+.x-form-file-wrap .x-form-file-text {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 3;
+  color: #777;
+  height: 22px;
+}
+.x-form-file-wrap .x-form-file-btn {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+.x-form-file-wrap .x-form-file {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  z-index: 2;
+  cursor: pointer;
+  font-size: 0;
+  color: transparent;
+}
+.x-form-file-wrap.x-item-disabled .x-form-file {
+  cursor: default;
+}
+
+/* MultiSelect —— 对齐 examples/ux/css/MultiSelect.css */
+.x-multiselect {
+  padding: 0;
+}
+.x-multiselect-tbar {
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  border-bottom: 1px solid #d0d0d0;
+  background: #f3f7fb;
+}
+.ux-mselect {
+  overflow: auto;
+  background: #fff;
+  position: relative;
+  zoom: 1;
+}
+.ux-mselect-item {
+  font: normal 12px tahoma, arial, helvetica, sans-serif;
+  padding: 2px;
+  border: 1px solid #fff;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.ux-mselect-selected {
+  border: 1px dotted #a3bae9 !important;
+  background: #dfe8f6;
+  cursor: pointer;
+}
+.x-item-disabled .ux-mselect-item {
+  cursor: default;
+  color: #999;
+}
+.x-item-disabled .ux-mselect-item:hover {
+  background: transparent;
+}
+
+/* ItemSelector —— 双栏项选择器（对齐 Ext table 三列布局） */
+.x-itemselector {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.x-itemselector .x-multiselect {
+  margin: 0;
+}
+.x-itemselector-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+}
+.x-itemselector-actions .x-btn {
+  min-width: 28px;
+}
+
+/* CenterLayout —— UX 绝对水平居中子面板（对齐 Ext examples/ux/css/CenterLayout.css） */
+.ux-layout-center-item {
+    margin:0 auto;
+    text-align:left;
+}
+.ux-layout-center .x-panel-body,
+body.ux-layout-center {
+    text-align:center;
+}
+
+/* ColumnTree（Ext.ux.tree.ColumnTree + ColumnNodeUI）专属样式：来源 Ext 发行
+   examples/ux/css/ColumnNodeUI.css，与 ext-all.css 配套的组件样式，复用契约不变
+   （表头背景图改绝对路径 /extjs-assets/images/default/grid/grid3-hrow.gif）。 */
+.x-column-tree .x-panel-header {
+    padding: 3px 0px 0px 0px;
+    border-bottom-width: 0px;
+}
+.x-column-tree .x-panel-header .x-panel-header-text {
+    margin-left: 3px;
+}
+.x-column-tree .x-tree-node {
+    zoom:1;
+}
+.x-column-tree .x-tree-node-el {
+    zoom:1;
+}
+.x-column-tree .x-tree-selected {
+    background: #d9e8fb;
+}
+.x-column-tree .x-tree-node a {
+    line-height:18px;
+    vertical-align:middle;
+}
+.x-column-tree .x-tree-node a span {
+}
+.x-column-tree .x-tree-node .x-tree-selected a span {
+    background:transparent;
+    color:#000;
+}
+.x-tree-col {
+    float:left;
+    overflow:hidden;
+    padding:0 1px;
+    zoom:1;
+}
+.x-tree-col-text, .x-tree-hd-text {
+    color:#000;
+    overflow:hidden;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    padding:3px 3px 3px 5px;
+    white-space: nowrap;
+    font:normal 11px arial, tahoma, helvetica, sans-serif;
+}
+.x-tree-headers {
+    margin-top: 3px;
+    background: #f9f9f9 url(/extjs-assets/images/default/grid/grid3-hrow.gif) repeat-x 0 bottom;
+    cursor:default;
+    zoom:1;
+}
+.x-tree-hd {
+    float:left;
+    overflow:hidden;
+    border-left:1px solid #eee;
+    border-right:1px solid #d0d0d0;
+}
+
+/* XmlTreeLoader 读书清单示例图标（自包含 SVG data URI，无外部资源）：覆盖默认 folder/leaf 背景 */
+.x-tree-node-icon.author-m {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48Y2lyY2xlIGN4PSI4IiBjeT0iNC41IiByPSIzIiBmaWxsPSIjM2E2ZWE1Ii8+PHBhdGggZD0iTTIgMTVjMC0zLjMxIDIuNjktNiA2LTZzNiAyLjY5IDYgNnoiIGZpbGw9IiMzYTZlYTUiLz48L3N2Zz4=");
+    background-position: 0 0;
+    background-repeat: no-repeat;
+}
+.x-tree-node-icon.author-f {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48Y2lyY2xlIGN4PSI4IiBjeT0iNC41IiByPSIzIiBmaWxsPSIjYTU1Yjg1Ii8+PHBhdGggZD0iTTIgMTVjMC0zLjMxIDIuNjktNiA2LTZzNiAyLjY5IDYgNnoiIGZpbGw9IiNhNTViODUiLz48L3N2Zz4=");
+    background-position: 0 0;
+    background-repeat: no-repeat;
+}
+.x-tree-node-icon.book {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNOCAzQzYgMiAzIDIgMiAyLjV2MTFDMyAxMyA2IDEzIDggMTRjMi0xIDUtMSA2LS41di0xMUMxMSAyIDggMiA4IDN6IiBmaWxsPSIjNGE3YTM1Ii8+PHBhdGggZD0iTTggM3YxMSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjAuOCIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
+    background-position: 0 0;
+    background-repeat: no-repeat;
+}
+
+/* DataView（base / DataViewMore）：原版 ext-all.css 仅定义 .x-view-selector（框选浮层），
+   .x-view-item / .x-view-over / .x-view-selected 均无 base 规则——选中/悬停本就不由主题
+   着色（Ext 3.2.1 原生表现）。此处仅保留 cursor 提示，不新增主题色。 */
+.x-data-view .x-view-item {
+    cursor: pointer;
+}
+
+/* Organizer（examples/organizer/organizer.css 逐字复用）：原版示例自带的样式，仅把
+   url(../tree/xxx.gif) 改为本项目资源绝对路径 /extjs-assets/images/tree/，不增删任何
+   视觉/布局，完全复用原版 CSS（对齐用户“在原来的 css 找合适的 css 用”的约定）。
+   #images 是图片面板 body 的 id（原版 My Images 面板 body）；.thumb-wrap/.thumb/.thumb-img
+   /span 为原版 DataView 缩略图 DOM；选中态用原版 .x-view-selected（与 DataView 原生
+   selectedClass 一致），原版 .x-view-selector 负责橡皮筋框选层。 */
+#images {
+    /* 背景不在此写死：原生 center-bg.gif 资源缺失，且白底应由主题化 .x-panel-body 提供，
+       避免写死静态资源破坏主题切换。仅保留原版 organizer.css 的中性字体。 */
+    font: 11px Arial, Helvetica, sans-serif;
+}
+#images .thumb {
+    background: #dddddd;
+    padding: 3px;
+}
+#images .thumb img {
+    border: 1px solid white;
+    height: 60px;
+    width: 80px;
+}
+#images .thumb-wrap {
+    float: left;
+    margin: 4px;
+    margin-right: 0;
+    padding: 5px;
+}
+#images .thumb-wrap span {
+    display: block;
+    overflow: hidden;
+    text-align: center;
+}
+#images .x-view-selected .thumb {
+    background: #8db2e3;
+}
+.album-node .x-tree-node-icon,
+.album-btn {
+    background-image: url(/extjs-assets/images/tree/album.gif) !important;
+}
+.image-node .x-tree-node-icon {
+    margin-bottom: 1px;
+    height: 15px;
+}
+/* 内联标签编辑器触发区：虚线下划线 + 手型光标（对齐 Ext labelSelector 交互暗示） */
+.x-editable {
+    cursor: text;
+    border-bottom: 1px dashed #3164a1;
+    padding-bottom: 1px;
+}
+/* LabelEditor 浮层输入框对齐 Ext.Editor（x-small-editor + x-editor 组合）。
+   ext-all.css 的 .x-editor{visibility:hidden} 是 Ext 在 JS 定位后再显隐的约定；本组件静态渲染，
+   故在编辑态显式置为可见（等价 Ext Editor 定位后 show()）。 */
+.x-editable .x-editor.x-small-editor {
+    visibility: visible;
+    font-family: tahoma, arial, sans-serif;
+}
+
+/* ============ 拖放（Drag & Drop）—— x-dd 系列（保真 Ext.dd.StatusProxy / DropTarget） ============
+   源图标用内联 SVG 替代 ext-all.css 的 gif（drop-yes/drop-no/drop-add），对齐项目「SVG 替代图片」范式 */
+.x-dd-drag-proxy {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 15000;
+    pointer-events: none;
+}
+.x-dd-drag-ghost {
+    opacity: .85;
+    border: 1px solid;
+    background-color: #fff;
+    color: #000;
+    font: normal 11px arial, helvetica, sans-serif;
+    padding: 3px;
+    padding-left: 20px;
+    white-space: nowrap;
+}
+.x-dd-drop-icon {
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    display: block;
+    width: 16px;
+    height: 16px;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: 1;
+}
+.x-dd-drop-ok .x-dd-drop-icon {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23c6efce' stroke='%2361b76a'/%3E%3Cpath d='M4 8.5l2.5 2.5L12 5' fill='none' stroke='%23378a40' stroke-width='1.6'/%3E%3C/svg%3E");
+}
+.x-dd-drop-nodrop .x-dd-drop-icon {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23f8d7da' stroke='%23d9534f'/%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23c12e2f' stroke-width='1.6'/%3E%3C/svg%3E");
+}
+.x-dd-drop-ok-add .x-dd-drop-icon {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23d6e9f8' stroke='%233399bb'/%3E%3Cpath d='M8 4v8M4 8h8' fill='none' stroke='%233399bb' stroke-width='1.6'/%3E%3C/svg%3E");
+}
+.x-dd-drag-repair .x-dd-drag-ghost {
+    opacity: .4;
+    border: 0 none;
+    padding: 0;
+    background-color: transparent;
+}
+.x-dd-drag-repair .x-dd-drop-icon {
+    visibility: hidden;
+}
+/* repair 回弹动画（等价 Ext StatusProxy.repair 的 .5s shift） */
+.x-dd-drag-proxy.x-dd-drag-repair {
+    transition: left .5s ease-out, top .5s ease-out;
+}
+/* DropTarget over 高亮示例类：原版 Ext.dd 的 overClass（默认 'x-dd-drop-over'）本身不附带任何
+   视觉规则（原生 ext-all.css / structure/dd.css / theme-*/dd.css 均无此选择器，视觉交由应用层
+   提供）。故此处不新增主题色、不新增中性色，保持原版「无强制高亮」表现——组件只负责在交互态
+   给 el 加 overClass，是否渲染、如何渲染由原生 dd.css 或应用决定，本主题层不干预。 */
+
+/* 面板：对齐 ExtJS 原生边框模型 —— .x-panel 元素本身无边框，
+   可见边框由 .x-panel-header / .x-panel-body 承担，使 x-panel-noborder 重新生效。
+   frame 面板（.x-panel-mc .x-panel-body / .x-panel-tl .x-panel-header）由 ext-all.css
+   原生规则把 CSS 边框置 0，改由 9 宫格 sprite 绘制，不在此叠加。 */
+.x-panel {
+    border: 0;
+    background: #fff;
+    font: 12px tahoma, arial, sans-serif;
+}
+.x-panel-header {
+    /* 完全对齐真实 Ext 3.2.1 的 non-framed .x-panel-header（我们的扁平 header 正好对应此模式；
+       9 宫格 .x-panel-tl/.tc/... 仅 frame:true 才有）。逐项映射：
+         ext-all.css:3685-3691 → overflow:hidden; padding:5px 3px 4px 5px;
+           border:1px solid; line-height:15px; background:transparent repeat-x 0 -1px
+         xtheme-blue.css:1324-1331 → color:#15428b; font-weight:bold; font-size:11px;
+           font-family:tahoma,arial,verdana,sans-serif; border-color:#99bbe8;
+           background-image:url(../images/default/panel/white-top-bottom.gif)
+       背景完全交给原生（不覆盖 background），让 white-top-bottom.gif sprite 直接作用；此处仅显式
+       锁定 Ext 在更外层写死、且本项目需对齐的项。header 自然高度 = 5(pad-t)+15(line)+4(pad-b)
+       +2(border) = 26px，与本项目的 HEADER_H=26 一致。不新增任何 CSS/图片资源。 */
+    overflow: hidden;
+    padding: 5px 3px 4px 5px;
+    /* 仅结构（width/style），border-color 完全交给 xtheme-*.css 的 .x-panel-header{border-color}
+       （blue #99bbe8 / gray #d0d0d0）覆盖 —— 对齐真实 ext-all.css:3689 .x-panel-header{border:1px solid}，
+       颜色不写死在默认主题里，切换主题时整圈边框自动跟随。
+       注意：此处必须用 longhand 的 border-width/border-style，绝不能用 `border:1px solid` 简写——
+       简写会把 border-color 重置为 currentColor，覆盖掉 @import 进来的 xtheme 颜色，导致边框变黑。 */
+    border-width: 1px;
+    border-style: solid;
+    /* 用 longhand 而非 font 简写：简写会把 line-height 重置为 normal（且 Vite 压缩会删掉被覆盖的
+       line-height:15px 死声明），导致 header 行高变 normal。Ext 原生也是 ext-all 设 line-height:15px、
+       xtheme 用 font longhand（不重置行高），此处同构对齐。 */
+    line-height: 15px;
+    font-weight: bold;
+    font-size: 11px;
+    font-family: tahoma, arial, verdana, sans-serif;
+    color: #15428b;
+}
+/* 手风琴子面板 header 沿用真实 Ext 的 .x-accordion-hd 文字色（#222，非普通面板头的蓝 #15428b）。
+   .x-accordion-hd 与 .x-panel-header 同为单类选择器、特异性相等，此处置于 .x-panel-header 之后，
+   使其对“带 x-accordion-hd 的 header”优先生效，对齐真实 Ext 手风琴灰标题。 */
+.x-accordion-hd {
+    color: #222;
+}
+.x-panel-header-text { user-select: none; }
+.x-panel-header-draggable { cursor: move; }
+/* .x-panel-body 的 border/overflow/position/color 完全交给原生 ext-all.css 定义；此处仅补一项：
+   - box-sizing 显式声明为 content-box（对齐原生默认：ext-all.css 的 .x-panel-body 未声明
+     box-sizing，故遵循初始 content-box 模型）。文档站 docs/src/docs.css 有 `*{box-sizing:border-box}`
+     全局重置，会把它变成 border-box，导致设固定 height 的 body 内容区被 border 挤占 2px。此处显式
+     声明 content-box 抵消该重置，使所有 .x-panel-body（含链B手写面板）统一对齐真实 Ext。
+   颜色不在此覆盖：真实 Ext 的 .x-panel-body 不声明 color，正文继承浏览器默认黑字（xtheme-blue.css
+   也未给 body/panel 设色），故沿用默认即可，不要自加 #222，否则与真实 Ext 出现文字色偏差。 */
+.x-panel-body {
+    /* 对齐真实 ext-all.css:3694-3699：non-framed 面板 body 自身带 1px 边框（border-top:0，
+       顶部边框由上方相邻 .x-panel-header 提供，避免 header 底/body 顶双线叠加）；
+       颜色完全交给 xtheme-*.css 的 .x-panel-body{border-color}（blue #99bbe8 / gray #d0d0d0）
+       覆盖，故边框随主题切换自动跟随、默认主题不写死颜色。结构与真实 Ext 完全一致，
+       region 面板（.x-border-panel）的整圈框即由 .x-panel-header + .x-panel-body 拼接。
+       box-sizing:content-box 抵消文档站 docs/src/docs.css 的全局 border-box 重置，
+       使设固定 width 的 body 内容区不被 1px 边框挤占（bodyW = box.w - 2 已预留两侧边框）。
+       边框颜色（border-color）由 @import 的 xtheme-*.css 提供，此处仅给结构与顶边留空。 */
+    border-width: 0 1px 1px;
+    border-style: none solid solid;
+    box-sizing: content-box;
+}
+/* 无 header 时 body 顶边需补回（对齐 ext-all.css:3713 .x-panel-body-noheader{border-top:1px solid}）；
+   同时本规则亦作用于布局根 .x-border-layout-ct（它兼带 x-panel-body-noheader），提供整篇布局的
+   最外层边框 —— 颜色同样由 xtheme 主题化，原版即如此（容器边框 = 其 .x-panel-body 边框）。
+   同样用 longhand，避免简写把 border-top-color 重置为 currentColor。 */
+.x-panel-body-noheader {
+    border-top-width: 1px;
+    border-top-style: solid;
+}
+/* 无 header 时 body 顶边由原生 .x-panel-body-noheader 规则（ext-all.css）提供，此处不重复。 */
+
+/* StatusProxy 内的面板形 ghost */
+.x-dd-panel-proxy {
+    opacity: .9;
+    pointer-events: none;
+}
+.x-dd-panel-proxy .x-panel-body { opacity: .85; }
+
+/* 门户 Portal / PortalColumn / Portlet（等价 Ext.ux.Portal / PortalColumn / Portlet） */
+.x-portal {
+    padding: 4px;
+}
+/* 注意：此处必须为普通块级容器，让内部的 ColumnLayout 根（.x-column-layout-ct）按父宽撑满；
+   若误设为 display:flex，唯一子项 .x-column-layout-ct 会被按「内容宽」收缩（内容初始为 0）
+   导致整列布局塌陷为 0 宽。列间距由 ColumnLayout 的 margins（Portal 传 '0 14 0 0'）提供。 */
+.x-portal-canvas {
+    position: relative;
+    min-height: 240px;
+}
+/* Portal 列：原生 Ext.ux.Portal 里 .x-portal-column 仅作布局槽位（float/overflow），无背景无边框，
+   主题外观完全由内部 .x-portlet（真实 .x-panel，经 xtheme 主题化、随主题切换）提供。故此处只保留
+   布局属性，不写任何颜色（不硬编码中性、也不硬编码主题蓝），对齐原生「列透明、Portlet 承载主题」
+   的结构，满足「零新增 CSS / 零硬编码色」铁律。拖拽悬停高亮（.x-portal-column-active）与占位符
+   （.x-portal-placeholder）的视觉由组件在 JS 中按交互态内联计算，不在此建 CSS 规则。 */
+/* 列仅作布局槽位：宽度由 ColumnLayout 内联 width 决定（float:left，列间距由 margins 提供），
+   内部 Portlet 靠 ux/Portal.css 的 margin-bottom 堆叠；box-sizing 让列宽计算包含内边距，
+   避免 float 列额外 padding 撑破容器。min-height 保证空列仍可放置。不写任何主题色（零硬编码）。 */
+.x-portal-column {
+    box-sizing: border-box;
+    min-height: 200px;
+}
+/* .x-portal-column-active / .x-portal-placeholder / .x-portal-placeholder-text 的视觉由组件内联
+   提供（交互态驱动），此处不定义颜色规则。 */
+/* Portlet = Ext.Panel + draggable：外观完全由原生 .x-panel / .x-panel-header / .x-panel-body
+   承载（边框颜色走 xtheme，切换 Gray 等主题时整圈框自动跟随）。.x-portlet 仅作原生
+   ux/Portal.css 的 margin-bottom 堆叠标记 + 拖拽手势（cursor:move），不叠加任何硬编码边框 /
+   圆角 / 阴影——否则会与 header/body 主题边框形成双层框且无法随主题切换，违反「零硬编码主题色、
+   原生优先」铁律。
+   注：.x-portlet-header / .x-portlet-header-text / .x-portlet-body / .x-portlet-ghost 均为死规则
+   （组件实际渲染 .x-panel-header / .x-panel-header-text / .x-panel-body，无任何元素使用这些
+   私有类），已删除，避免其中硬编码的 #cfd8e6 蓝边框 / #15428b 蓝字残留为不随主题切换的死色。 */
+.x-portlet {
+    cursor: move;
+}
+
+/* TabScrollerMenu 插件按钮（.x-tab-tabmenu-right）：核心 xtheme-blue / ext-all 均未提供该 class 样式，
+   属原始 ExtJS 亦缺失的真实缺口；仅补最小可用样式，布局摆位由组件内联样式还原原始插件行为。 */
+.x-tab-tabmenu-right {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 18px;
+    cursor: pointer;
+    z-index: 11;
+    text-align: center;
+    line-height: 22px;
+    color: #15428b;
+    font-size: 11px;
+    background-color: #deecfd;   /* 对齐 header 背景，避免透明叠在标签上 */
+    /* 高度由组件内联 height:arrowHeight 控制（对齐 scroller 箭头），此处不设 height 回退，避免首帧回退到 100% 铺满 */
+}
+.x-tab-tabmenu-right::before { content: '\25BE'; }   /* ▾ 无真实素材，纯文案占位 */
+.x-tab-tabmenu-over { background-color: #eaf2fb; }
+
+/* GroupTabs 面板基础外观（对齐 examples/ux/css/GroupTab.css:7-10）
+   真实 Ext 的 .x-grouptabs-panel 为 15px 蓝(#4E78B1)外框 + 同色背景，是 GroupTabs 的招牌外观。
+   因文档站全局 `*{box-sizing:border-box}` 重置，此处显式声明 content-box，使 15px 边框不挤占
+   内容区（等价 Ext 原生 content-box：height:300 时内容区保持 300px，而非被边框吃掉 30px）。 */
+.x-grouptabs-panel {
+    box-sizing: content-box;
+    background-color: #4E78B1;
+    border: solid 15px #4E78B1;
+}
+.x-grouptabs-panel.x-tab-panel-right {
+    flex-direction: row-reverse;
+}
+.x-grouptabs-panel-header {
+    border: 0;
+    background: transparent;
+    flex: 0 0 auto;
+    height: 100%;
+    overflow: hidden;
+}
+.x-grouptabs-bwrap {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+    position: relative;
+}
+/* 左侧分组条容器：高度撑满面板，内容超出时自身出现滚动条（等价 Ext 面板固定高、内容过多时左侧滚动，不浮出容器） */
+.x-grouptabs-panel .x-tab-strip-wrap {
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.x-grouptabs-strip {
+    width: auto;
+    display: block;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.x-grouptabs-strip li {
+    float: none;
+    margin: 0;
+    position: relative;
+    clear: both;
+    padding: 6px 0 2px 6px;
+}
+.x-grouptabs-strip a.x-grouptabs-text {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    color: #DFE8F6;
+    font-family: tahoma, arial, sans-serif;
+    font-size: 13px;
+    line-height: 18px;
+    font-weight: bold;
+    text-decoration: none;
+    cursor: pointer;
+    padding-left: 18px;
+}
+.x-tab-panel-right .x-grouptabs-strip a.x-grouptabs-text {
+    padding-left: 0;
+    padding-right: 18px;
+    text-align: right;
+}
+.x-grouptabs-strip a.x-grouptabs-text span {
+    vertical-align: middle;
+}
+.x-grouptabs-panel .x-grouptabs-strip-active > a.x-grouptabs-text {
+    color: #395B8E;
+}
+.x-grouptabs-sub {
+    display: none;
+    margin: 4px 0 2px 4px;
+    list-style: none;
+    padding: 0;
+}
+.x-grouptabs-sub a.x-grouptabs-text {
+    font-weight: normal;
+    font-size: 12px;
+    padding-left: 14px;
+}
+.x-grouptabs-expanded .x-grouptabs-sub {
+    display: block;
+}
+
+/* expand 开关：CSS +/- 复刻原 elbow-plus/elbow-minus gif（原文件用 gif，无背景色；此处 CSS 替代，蓝调与主题一致） */
+.x-grouptabs-expand {
+    position: absolute;
+    left: 7px;
+    top: 6px;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    z-index: 2;
+}
+.x-grouptabs-expand::before {
+    content: '+';
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 1;
+    color: #DFE8F6;
+    background: #3a5d8c;
+    border: 1px solid #6f93c4;
+    border-radius: 2px;
+    box-sizing: border-box;
+}
+.x-grouptabs-expanded .x-grouptabs-expand::before {
+    content: '\2212'; /* − */
+}
+.x-grouptabs-strip-active > .x-grouptabs-expand::before {
+    color: #395B8E;
+    background: #c9d8ee;
+    border-color: #9bb3d0;
+}
+
+/* 图标占位（demo 中通过 x-icon-* 自定义着色，无图片依赖） */
+.x-grouptabs-icon {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin-right: 4px;
+    border-radius: 2px;
+    background: #9bb3d0;
+    vertical-align: middle;
+}
+
+/* 激活分组：白底 + 白边 joint 复刻原 x-tab-joint 连接条 */
+.x-grouptabs-strip li.x-grouptabs-strip-active {
+    background: #fff;
+    border-top: 1px solid #999;
+    border-bottom: 1px solid #999;
+}
+.x-grouptabs-panel.x-tab-panel-left .x-grouptabs-strip li.x-grouptabs-strip-active {
+    border-left: 1px solid #999;
+    border-right: 3px solid #fff; /* joint 连接到右侧 body */
+}
+.x-grouptabs-panel.x-tab-panel-right .x-grouptabs-strip li.x-grouptabs-strip-active {
+    border-right: 1px solid #999;
+    border-left: 3px solid #fff;
+}
+.x-grouptabs-strip li.x-grouptabs-strip-active ul.x-grouptabs-sub {
+    background: transparent;
+}
+.x-grouptabs-strip li.x-grouptabs-strip-active ul.x-grouptabs-sub li.x-grouptabs-strip-active {
+    background-color: #EDEEF0;
+}
+.x-grouptabs-strip li.x-grouptabs-strip-active ul.x-grouptabs-sub li {
+    border-color: transparent;
+}
+
+/* 右侧内容区（等价 CardLayout 当前页） */
+.x-grouptabs-panel-body {
+    border: 1px solid #999;
+    background: #fff;
+    overflow: auto;
+    height: 100%;
+    box-sizing: border-box;
+}
+.x-grouptab-page {
+    min-height: 100%;
+}
+
+/* demo 图标着色 */
+.x-icon-tickets { background: #5a8f3c !important; }
+.x-icon-dashboard { background: #3892d4 !important; }
+.x-icon-sub { background: #2e7d32 !important; }
+.x-icon-users { background: #6a1b9a !important; }
+.x-icon-configuration { background: #ef6c00 !important; }
+.x-icon-templates { background: #00838f !important; }
+.x-icon-reports { background: #c62828 !important; }
+
+/* 工具栏重排与拖入 ToolbarReorderer / ToolbarDroppable */
+.x-toolbar-reorderer {
+    position: relative;
+    padding: 2px 0;
+}
+.x-toolbar-reorderer.x-toolbar-drop-over .x-toolbar {
+    outline: 2px dashed #3892d4;
+    outline-offset: 1px;
+}
+.x-toolbar-reorder-indicator {
+    position: absolute;
+    width: 2px;
+    background: #3892d4;
+    z-index: 15001;
+    pointer-events: none;
+    box-shadow: 0 0 0 1px rgba(56, 146, 212, .25);
+}
+
+/* ── ProgressBarPager：工具栏内进度条去"白底" + 垂直居中 ──────────────
+ * 1) 原始 Ext.ProgressBar 的 .x-progress-inner 底色为 #e0e8f3（极浅蓝，近似白），
+ *    嵌入工具栏（ProgressBarPager）后，未填充区域会露出这层白底，在边框与蓝色填充
+ *    之间显得像一块白底。在 .x-toolbar 上下文中仅令 inner 背景透明（露出工具栏底色），
+ *    保留 .x-progress-wrap 的蓝色边框与蓝色填充。
+ * 2) 垂直居中：.x-toolbar 有 padding:2px 但只有底边 1px 边框（border-width:0 0 1px 0），
+ *    导致整行内容相对工具栏中心偏上 0.5px；实心进度条比按钮更显眼。用纯视觉偏移
+ *    translateY(0.5px) 补偿（不影响布局/兄弟项）。 */
+.x-toolbar .x-progress-inner {
+  background-color: transparent;
+  background-image: none;
+}
+.x-toolbar .x-progress-wrap {
+  transform: translateY(0.5px);
+}
+
+/* ===== Grid 表格固定布局（保真修复：表头与数据行列宽对齐） =====
+   原版 ExtJS 由 GridView 运行时给 .x-grid3-row-table / 表头 table 注入 table-layout:fixed，
+   并靠 colgroup/td 显式宽度锁定列宽（resources/css/ext-all.css 未直接给出该规则，系 JS 注入）。
+   本实现只用内联 width 设列宽，若缺 table-layout:fixed，浏览器会按内容自动分配列宽，
+   导致数据行各列与表头错位（如长文本列把后续列挤偏）。此处显式锁定固定布局，使表头与
+   数据行严格对齐；配合各单元格内联 width（+末列吸收 slack）实现像素级对齐。 */
+.x-grid3-row-table,
+.x-grid3-header-offset > table {
+  table-layout: fixed;
+}
+
+/* ===== RowExpander（Ext.ux.grid.RowExpander）专属样式 =====
+   真值来源：resources/css/ext-all.css（行 2471–2498、5860–5862）。原版用
+   row-expand-sprite.gif 精灵图作 + / - 切换图标（收起 background-position:4px 2px 显示 +，
+   展开 .x-grid3-row-expanded 时 -21px 2px 显示 −），背景图由 ext-all.css 注入、素材位于
+   public/extjs-assets/images/default/grid/row-expand-sprite.gif，保真直接复用，不自绘。
+   此处只补少量交互/布局态，绝不覆盖原版的 width/height/background-position/background-image，
+   否则精灵图会错位、并与我们的图形叠加导致图标错乱。 */
+.x-grid3-td-expander { cursor: pointer; }
+.x-grid3-hd-expander { cursor: default; }
+.x-grid3-row-expander { cursor: pointer; user-select: none; }
+.x-grid3-row-body {
+  overflow: hidden;
+}
+.x-grid3-row-body-inner {
+  padding: 6px 22px 8px 24px;
+  font: 11px arial, helvetica, sans-serif;
+  color: #222;
+  background: #f7f9fc;
+  border-top: 1px solid #e0e6ef;
+  border-bottom: 1px solid #e0e6ef;
+}
+
+/* ===== CheckColumn（Ext.ux.grid.CheckColumn）专属样式 =====
+   原 Ext 用默认复选框（x-grid3-checkcol 包一个 <input type=checkbox>）。此处改用 CSS 绘制的
+   方块复选框 + 内联 SVG 对勾，自包含渲染（避免原生 checkbox 在不同浏览器下样式不一致）；
+   勾选态加 x-grid3-checkcol-on（蓝底白勾，对齐 Ext 选中色 #15428b）。表头不渲染选择-all，
+   仅显示列标题（对齐 Ext.ux.grid.CheckColumn 默认行为）。 */
+.x-grid3-td-checkcolumn { cursor: pointer; }
+.x-grid3-hd-checkcolumn { cursor: default; }
+.x-grid3-checkcol {
+  width: 13px;
+  height: 13px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  border: 1px solid #8a9bb3;
+  border-radius: 2px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #fff;
+  user-select: none;
+  transition: background-color 0.05s, border-color 0.05s;
+}
+.x-grid3-checkcol:hover { border-color: #5b7ab5; }
+.x-grid3-checkcol-on {
+  background: #15428b;
+  border-color: #15428b;
+}
+.x-grid3-checkcol-icon { display: block; }
+.x-grid3-checkcol:focus-visible {
+  outline: 1px solid #7f9de0;
+  outline-offset: 1px;
+}