Skip to content

feat: support multi-line field descriptions - #113

Open
RavenHogWarts wants to merge 2 commits into
vran-dev:masterfrom
RavenHogWarts:feat/description-input-textarea-multiline
Open

feat: support multi-line field descriptions#113
RavenHogWarts wants to merge 2 commits into
vran-dev:masterfrom
RavenHogWarts:feat/description-input-textarea-multiline

Conversation

@RavenHogWarts

Copy link
Copy Markdown
Collaborator

closed #111

变更说明

1. 字段描述支持多行输入

描述输入框由单行 <input> 改为 <textarea>,支持换行和多行文本编辑,默认 2 行高度。

2. 长文本溢出修复

  • 表单字段描述(form--CpsFormItemInfoDescription):添加 white-space: pre-wrapword-break: break-alloverflow-wrap: break-word,长文本自动换行不再溢出容器
  • 动作备注文本(form--CpsFormActionRemarkText):white-space: nowrap 改为 white-space: normal,并添加相同的断词规则

改动文件

  • DescriptionSetting.tsx<input><textarea rows={2}>
  • DescriptionSetting.css:适配 textarea 样式
  • CpsFormItem.css:描述文本添加换行和断词规则
  • CpsFormAction.css:备注文本修复溢出

将描述字段的输入框从单行 input 改为多行
textarea,支持换行显示。调整样式以适配新的
输入框类型,包括移除悬停效果、调整对齐方式
为 flex-start、添加透明背景和垂直调整大小
功能。同时在表单项标签样式中添加 pre-wrap
以正确显示换行符。
修改表单项和操作设置的样式以改进长文本的
换行行为。在 CpsFormItem 中添加
word-break 和 overflow-wrap 属性以确保
长文本正确换行。在 CpsFormAction 中将
white-space 从 nowrap 改为 normal,并添加
相同的换行属性以支持多行文本显示。同时
调整 box-shadow 的格式以提高代码可读性。
@RavenHogWarts
RavenHogWarts requested a review from vran-dev April 11, 2026 15:51
@vran-dev

Copy link
Copy Markdown
Owner

感谢贡献!Review 结论如下,方向没问题,小修后可合。

功能与方向

  • 多行输入 + 溢出修复方向正确,表单配置走 JSON 持久化,换行转义安全 ✅
  • 一个需要调整的点:issue [FR]: 字段的描述扩展功能 #111 其实有两个诉求——①描述支持多行输入;②显示时支持点击/悬浮 ℹ️ 查看详情。本 PR 交付了输入侧,但 ℹ️ 未实现;而且 pre-wrap 会让长描述在表单视图里全量展开,在显示侧方案落地前,表单膨胀的问题反而更明显。建议把描述里的 "closed [FR]: 字段的描述扩展功能 #111" 改为 "partially addresses [FR]: 字段的描述扩展功能 #111",保持 issue open,等显示侧(ℹ️ 折叠查看)一起交付后再关闭。

具体修改建议

  1. 行数与描述不一致:变更说明写"默认 2 行高度",代码是 rows={4}(DescriptionSetting.tsx)。建议改回 2 行起步或做 auto-grow——固定 4 行会让每个字段的设置面板都明显变高,对只需一行描述的场景是可用性回退。
  2. word-break: break-all 对散文过强(会在英文单词中间断行),overflow-wrap: break-word 通常已够用;break-all 更适合路径/URL 场景。两处 CSS(CpsFormItem.css、CpsFormAction.css)同。
  3. 顺带删除了设置行的 hover 背景效果(原 .form--CpsFormFieldSettingDescription:hover 规则),如果非有意建议补回。

手工验收

  • 桌面 + 移动端:多行输入、换行在表单视图按 pre-wrap 正确显示
  • 长 URL / 中文长段落不溢出容器

结论:PASS(小修),优先级不高,等 #111 显示侧方案一起考虑更完整。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FR]: 字段的描述扩展功能

2 participants