Commit 577fca07 authored by Data Governance Dev's avatar Data Governance Dev

fix(web3): RuleModal 规则名/规则说明行的右边缘对齐「复制」按钮

原来两行 input/textarea 独占整行右侧,视觉上跟下面 Python 函数/正则行
(右侧带 复制 按钮)对不齐,弹窗右边空旷不对称。

按 .btn(padding 0 16px + 1px border + 14px 中文 2 字 ≈ 28px = 62px)
设 .rule-line-spacer 占位宽度,规则名 / 规则说明行也用 .rule-flex-line
包成 [input/textarea][62px 占位] 跟 .code-line / .test-line 同一套结构。

flex 子项显式 min-width: 0,覆盖全局 .text-input { min-width: 160px }
避免窄容器溢出。顺手给原裸 textarea 补 padding/border/radius/font
跟其他输入框视觉一致。
parent ddbe0048
......@@ -40,20 +40,35 @@
<div class="rule-item-row">
<span class="rule-item-label"><span class="required">*</span>规则名称</span>
<div class="rule-item-ctrl">
<!--
2026-08-24:用 .rule-flex-line 包一层,把右侧宽度预留成 复制 按钮同宽(62px),
让规则名 / 规则说明的右边缘跟下面 Python 函数 / 正则的输入框对齐,
视觉上不再「独占整行」。
-->
<div class="rule-flex-line">
<input
type="text"
class="text-input"
class="text-input rule-flex-input"
v-model="rule.name"
:placeholder="namePlaceholder(rule.rule_type)"
maxlength="64"
/>
<span class="rule-line-spacer" aria-hidden="true"></span>
</div>
</div>
</div>
<div class="rule-item-row">
<span class="rule-item-label">规则说明</span>
<div class="rule-item-ctrl">
<textarea v-model="rule.desc" :placeholder="descPlaceholder(rule.rule_type)"></textarea>
<div class="rule-flex-line">
<textarea
class="rule-flex-textarea"
v-model="rule.desc"
:placeholder="descPlaceholder(rule.rule_type)"
></textarea>
<span class="rule-line-spacer" aria-hidden="true"></span>
</div>
</div>
</div>
......@@ -492,4 +507,39 @@ function onSave() {
.code-line .btn {
align-self: flex-start;
}
/* 2026-08-24:规则名 / 规则说明行用同样的 [input/textarea][占位] flex 结构,
让右边缘对齐下面 Python 函数 / 正则输入框;占位宽度跟 .btn(复制/测试)一致 */
.rule-flex-line {
display: flex;
gap: 8px;
align-items: stretch;
}
/* 显式 min-width: 0 —— 覆盖全局 .text-input { min-width: 160px },
否则 flex 子项默认 min-width: auto,窄容器里会被内容撑开溢出 */
.rule-flex-input,
.rule-flex-textarea {
flex: 1;
min-width: 0;
}
.rule-flex-textarea {
padding: 6px 8px;
border: 1px solid #dcdfe6;
border-radius: 4px;
background: #fff;
color: #303133;
font-size: 13px;
line-height: 1.55;
resize: vertical;
outline: none;
font-family: inherit;
}
.rule-flex-textarea:focus {
border-color: #409eff;
}
/* 跟 .btn(padding 0 16px + 1px border + 14px 字体中文 2 字 ≈ 28px)等宽,约 62px */
.rule-line-spacer {
width: 62px;
flex-shrink: 0;
}
</style>
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment