u

2026-10-11 22:14:13 +08:00
1 parent 32d423b759
commit 78eb811ff7
@@ -0,0 +1,18 @@
+---
+'@g3soft/ui': minor
+---
+
+新增 `G3Attachment` 附件管理器（分类 / 列表 / 预览三栏）。
+
+**与业务解耦**：组件不发任何请求，只消费 `files` + `categories` 两份数据，用户意图全部以事件抛出；需要组件代跑请求时传 `uploadRequest` / `removeRequest`。
+
+- 布局走 `G3Splitter`：默认「分类 200 + 列表自适应」两栏；`showPreview`（默认 `false`）打开后追加 360 的预览栏。`showCategory` / `showPreview` 为假时对应面板不渲染；预览栏关掉时 `preview` 事件照常抛出，业务可自行开弹窗。
+- 分类用 `G3Tree`，在传入的 `categories` 之上合成「全部」根节点（对外用 `categoryKey === ''` 表示），`categoryChange` 会把原始分类对象一并带出。
+- 上传三条入口：底栏选择、拖拽、`pasteUpload`（opt-in，默认关，避免多实例抢 `document`）。入队前按 `accept` / `maxSize` / `maxCount` 校验，被拒文件走 `invalid` 事件（`info.message` 已按语言包生成）。
+- 待上传队列在列表最前面渲染（带「待上传」标记）；未传 `uploadRequest` 时点上传即抛 `upload` 并清空队列（所有权移交业务），传了则托管请求、失败保留队列可重试。blob 预览地址由组件统一释放。
+- 多选批量下载 / 删除；删除内建确认 `Modal`（`confirmRemove` 可关，不使用命令式 `Modal.confirm`，避免依赖全局挂载容器）；下载默认按 `item.url` 内建触发（`builtinDownload` 可关）。
+- 分页：未传 `total` 视为客户端分页（组件切片），传了则为服务端分页（`files` 即当前页）；`page` / `pageSize` 非受控，不传时组件内部维护。
+- 字段名中性（`id` / `name` / `size` / `ext` / `url` / `categoryId`），业务字段走 `item.raw` 原样回传；文件族配色映射到 `--g3-color-danger` / `success` / `warning` / `primary`，并留 `--g3-attachment-type-*` 供主题覆盖。
+- 视觉与交互按当前设计语言落地：尺寸 / 间距 / 圆角 / 过渡全部走令牌；工具栏整行统一 12px 字 / 24px 控件、高度写死并用 1px 竖线分组，窄面板（容器查询）下文字收成图标，勾选前后高度恒定；操作默认藏在 hover / `:focus-within` 里（`@media (hover: none)` 常显）；空态就是虚线投放区并顺带写明 `accept` / `maxSize` / `maxCount` 限制；待上传队列非空时底栏整块染主色淡底（脏状态）；上传与分页合成一块，不再出现两条并排分隔线；卡片封面用 `aspect-ratio` + `object-fit: cover`，封面底边是 2px 上传进度条；面板之间的分割线常显且收成 1px。
+- 语言包新增 `attachment` 分组（zh-CN / en-US）：**自定义 `Locale` 对象的项目需要补上这一组**，否则类型不完整。
+- 附单测（`src/attachment/Attachment.test.ts` 组件契约 + `file.test.ts` 纯函数）与文档 / 4 个示例，文档见 `docs/content/ui/data/attachment.md`。
@@ -0,0 +1,5 @@
+---
+'@g3soft/ui': patch
+---
+
+修复 `FormItem` 纵向布局下控件区不撑满：`.g3-form-item--vertical` 只改了 `flex-direction`，没有重置基础类的 `align-items: flex-start`（那是给横向布局写的），于是控件区按内容宽度收缩 —— 表现为 `layout="vertical"` 的输入框只有十几个字符宽。现在纵向布局显式 `align-items: stretch`。
@@ -0,0 +1,44 @@
+---
+'@g3soft/ui': minor
+---
+
+`RichText` 工具条补齐对齐与颜色，表格操作栏收敛为结构操作；修复内容区空白处点不聚焦。
+
+**新增（聚焦反馈）**
+
+- 编辑器获得焦点时，**正文区**四周亮起 2px 主色描边（工具条不参与，参考 TinyMCE 给 `.tox-edit-area` 做的激活反馈）。用 `inset box-shadow` + `border-radius`（与外框 1px 边框同心）实现：不参与布局所以聚焦不会挤动正文，且滚动容器的阴影不随内容滚动 —— 换成 `::after` 覆盖层滚一下就跟着正文跑掉了。触发条件取根节点的 `:focus-within`，这样点工具条按钮（焦点临时落在按钮上）描边不会闪。
+
+**修复**
+
+- 内容区（`.g3-rich-text__content`）里只有可编辑区那一小块能点：`.tiptap` 原本写的 `min-height: inherit` 继承的是 EditorContent 那层包裹 DOM 的 computed 值（恒为 0，与 `minHeight` / `maxHeight` 无关），于是空文档时 200px 的内容区里只有约 45px 能点，下方全是「点上去既不聚焦也不落光标」的死区。现改为两层都用 `flex: 1 0 auto` 撑满：内容短时整块都是可编辑区，内容长时按内容撑开、由内容区滚动（不裁切）；另外落在编辑器 DOM 之外的 `mousedown` 会兜底聚焦并把光标放到正文末尾（宿主样式改坏撑高时也有效）。
+
+**新增（工具条）**
+
+- 对齐：左 / 居中 / 右三个按钮（`@tiptap/extension-text-align`，作用于 `paragraph` / `heading`）。用 `toggleTextAlign`，再点当前档位即取消对齐，不需要额外的「取消」按钮。
+- 字体颜色 / 背景颜色：两个取色按钮（图标 + 当前色条）。面板给出预设色板一屏、`无颜色` 清除属性、系统取色器选任意色；取色后面板自动收起，两个面板不会同时打开。
+- 工具条与正文之间改为双层柔和投影（`0 2px 2px -2px` + `0 8px 8px -4px`，观感对齐 TinyMCE），同时去掉原来的 1px `border-bottom`（线会把投影的起笔压死）；投影颜色抽成 `--g3-rich-text-toolbar-shadow-near/-far` 两个局部变量便于调深浅。工具条 `position: relative; z-index: 1` 抬在正文之上，内容滚到工具条下沿时投影不会被正文盖住；`toolbar="bottom"` 时两层投影翻到上方。
+
+**调整（工具条）**
+
+- **图标分量**：图标 16px、描边保持 lucide 原生粗细，前景从 ghost 默认的 `text-2`（65% 黑）提到 `text-1`（88%）—— 实测「发虚」的主因是浅灰前景而不是线宽，只加深颜色、不加重描边（试过描边 2.5 与放大到 24px，都偏重）。工具条与表格操作栏一起改，保持同一分量。
+- **重排**：撤销 / 重做移到最前（历史先于格式），正文格式下拉紧接其后；按钮 32px（等于 `--g3-control-height`）、组内间隙 4px、内边距 8px / 10px（左右 10px 让首列图标与正文的 12px 内边距对齐），高度 36 → 48px。
+- **字体 / 字号收进 `⋯ 更多`**：改为二级菜单（`字体` / `字号`），选中态跟随光标，工具条上不再有那两个会随内容改宽度的下拉。另收起删除线 / 上标 / 下标 / 引用（`格式` 组）与视频（`插入` 组）；表格插入按钮仍留在工具条（要先选行列）。自然宽度从 928px 降到 **744px**：760px 以上的容器都是一行。
+- **`⋯` 菜单**带分组标题、快捷键提示与选中态，与工具条共用同一份 `ToolButton` 定义。
+
+**调整（G3Dropdown）**
+
+- 菜单面板上限从写死的 `256px` 改为**按视口算**：`--g3-dropdown-max-height` 兜底 `calc(100vh - 48px)`。256px 只够放 8 个菜单项，10 项的操作菜单就会在面板内部出滚动条（富文本 `⋯` 菜单 295px 即如此）。现在菜单随内容长、长到屏幕放不下才滚，短菜单不再无谓地滚。
+- 新增 `menuMaxHeight?: boolean | number | string` 按实例调整：`false` 不限制、数字按 px、字符串原样（如 `'320px'` / `'min(480px, 70vh)'`）、不传/`true` 用默认；子菜单沿用同一个值。面板 Teleport 到 body，调用方没法用 CSS 局部覆盖那个变量，所以要按实例控制只能靠它。注意 `withDefaults` 里显式写了 `default: undefined` —— 类型含 `boolean` 时 Vue 会把缺省值转成 `false`（正好等于「不限制」），不写就改掉了默认行为。
+
+**修复（G3Dropdown 子菜单）**
+
+- 鼠标点击子菜单项此前**完全无效**：`useFloating` 在 `document` 的 pointerdown **捕获阶段**判定「点击外部」，而子菜单面板 Teleport 到 body、不在父面板 DOM 里 → 父浮层先关闭，子项的 `click` 永远收不到（键盘路径同理）。现给 `Popover` 增加 `popupScope`（同一条浮层链的标识），Dropdown 的根面板与各级子菜单带上同一个值，链内面板不再算外部点击。回归用例见 `packages/ui/src/dropdown/DropdownSubmenu.test.ts`（此前只覆盖 hover 高亮与根层键盘导航，所以漏了这条）。
+
+**调整（表格操作栏）**
+
+- 移除单元格左 / 中 / 右对齐与「取消单元格对齐」——单元格内容是 `paragraph`，对齐统一走顶部工具条（文档已注明）。
+- 移除「切换表头行」（插入表格面板已有「包含表头行」开关）；保留切换表头列 / 表头单元格。
+- 「合并或拆分单元格」拆成两个独立按钮：`mergeCells` / `splitCell`，各自按 `can()` 置灰。
+- 删除行 / 删除列的图标改为按 lucide 规范手绘的「表格 + × 角标」——原先复用的 `table-rows-split` / `table-columns-split` 是「拆分行列」的画法，看不出删除语义。
+
+文档见 `docs/content/ui/form/rich-text.md`；e2e 见 `packages/ui/e2e/rich-text-focus.spec.ts`（内容区几何 / 聚焦）、`packages/ui/e2e/rich-text-toolbar.spec.ts`（对齐 / 颜色）与 `packages/ui/e2e/rich-text-table.spec.ts`（合并拆分 / 删除行列 / 单元格对齐）。
@@ -0,0 +1,31 @@
+---
+'@g3soft/ui': minor
+---
+
+修复并增强 `RichText` 表格编辑。
+
+**修复**
+
+- 初始为 `disabled` / `readonly` 的编辑器恢复可编辑后，列宽拖拽仍失效：Tiptap 在创建时按 `isEditable` 决定是否注册 `columnResizing` 插件，而 `setEditable` 不会重建插件。现改为始终按可编辑创建、挂载后按 props 降级，插件集完整保留。
+- 光标落在单元格文本内时，操作浮层定位崩溃（`domAtPos().node` 返回文本节点，`closest` 不存在抛 `TypeError`）。已归一化节点类型后再取表格元素。
+- 浮层 `z-index` 硬编码 `1000`，会被 modal（1101+）盖住；改用 `nextZIndex('popup')` 领取、隐藏即归还。
+- 页面级滚动 / 窗口缩放时浮层位置漂移：新增 `window` 捕获阶段 `scroll` / `resize` 监听跟随重定位。
+- 插入表格面板行列数不校验，输入 0 / 负数 / 超大值会生成畸形表格：现在插入时夹回 1–20。
+
+**增强**
+
+- 补齐表头能力：切换表头列、切换表头单元格（此前仅表头行）。
+- 单元格水平对齐：左 / 中 / 右对齐（写入 `style="text-align: …"`），激活态高亮，支持一键取消。
+- 「合并或拆分」单键智能操作：选中多格合并、单格有合并则拆分。
+- 分组分隔线 + 去重图标，危险操作（删除表格）单独分组防误点。
+- 插入面板新增「包含表头行」开关、Enter 键提交；只读 / 禁用态浮层自动隐藏。
+
+**列宽拖拽重构**
+
+- 布局从 `table-layout: auto` 改为 `fixed`：拖拽只动被拖列、其余列纹丝不动，不再出现「拖第 2/3 列线时第 1 列被动变窄」的联动错位。
+- 拖拽结束 / 插入表格后自动把整表各列实际宽度固化回 `colwidth`，保证后续每次拖拽严格隔离相邻列。
+- 最小列宽从 80px 调整为 10px。
+- 移除拖拽时的黑色竖线指示条（只保留 `col-resize` 光标提示）。
+- fixed 布局消除 auto 布局下每次 mousemove 的整表重排，拖拽不再卡顿。
+
+文档见 `docs/content/ui/form/rich-text.md`，e2e 见 `packages/ui/e2e/rich-text-table.spec.ts`。
@@ -0,0 +1,12 @@
+---
+'@g3soft/ui': minor
+---
+
+新增 `G3SliderCaptcha` 滑块验证码。
+
+- 按住手柄拖到**行内结束端**即通过；`v-model` 绑 `boolean`，`success` 在通过瞬间触发一次，`resume()` 供校验失败后复位。
+- 拖拽走 Pointer Events + `setPointerCapture`（与 `bindDrag` / `bindResize` 同一套），指针移出组件、触屏、手写笔都能正确收尾，不往 `document` 挂全局监听。
+- 键盘可达：`role="slider"` + `aria-valuenow` / `aria-valuetext`，← → 微调、Home 复位、End 直达终点（`keyboard={false}` 可关）。
+- RTL：位置用逻辑属性 `inset-inline-start`，位移按行内方向折算，方向键左右随方向翻转。
+- 文案走语言包（新增 `captcha` 分组：`slide` / `verified` / `sliderLabel`），`text` / `successText` 只作覆盖；`size` 支持 small / medium / large。
+- 附单测（拖拽 / 回弹 / 禁用 / 键盘 / RTL / 受控 / resume）与真浏览器 e2e（真实指针拖拽、回弹、RTL 起步边），文档见 `docs/content/ui/form/slider-captcha.md`。