科研专用数值输入组件

ParameterInput.vue 是一个高度封装的受控组件（Controlled Component）。在煤热解动力学仿真中，某些参数跨度极大，该组件通过焦点感知逻辑，实现了“编辑时显示原始值，脱焦时显示格式化科学值”的交互体验。

---

🧩 交互设计逻辑

为了平衡编辑的便捷性与阅读的严谨性，组件采用了动态显示策略。

✨ 设计规范

核心特性

焦点状态感知

利用 isFocused 变量切换显示模式：聚焦时展示未截断的原始字符串，便于精确修改。

科学计数法转换

支持 toExponential(3)，自动将极小数值格式化为学术论文常用的科学计数形式。

紧凑型 UI

采用 Tailwind w-28 h-6 紧凑布局，适配参数配置侧边栏（Sidebar）的有限空间。

自动类型修正

在 blur 阶段自动将 string 转换为 number，确保传给后端的数据类型一致性。

交互行为

1. 静态呈现：根据 isScientific 属性，展示如 1.500e-2 或 0.015。
2. 激活编辑：点击输入框，显示原始录入的完整数字，不进行截断。
3. 双向绑定：通过 v-model (modelValue) 实时同步父组件状态。
4. 数据落地：失去焦点时，执行 Number() 转换并触发最终格式化。

💻 源码逻辑分析

关键函数分析

1. 动态显示逻辑 (displayValue)

/**
 * @description 根据焦点状态和配置属性决定输入框的文本呈现
 */
const displayValue = computed(() => {
  // 1. 正在输入时，必须显示原始值，避免因格式化导致光标跳变
  if (isFocused.value) return props.modelValue?.toString() || '';

  const num = Number(props.modelValue);
  if (isNaN(num)) return props.modelValue?.toString() || '';

  // 2. 格式化逻辑：科学计数法 vs 四舍五入浮点数
  return props.isScientific
    ? num.toExponential(3)               // 输出：1.234e+2
    : parseFloat(num.toFixed(4)).toString(); // 输出：123.4
});

2. 事件分发与类型强制 (onBlur)

/**
 * @description 处理输入框失焦，执行数据类型归一化
 */
const onBlur = () => {
  isFocused.value = false;
  const val = Number(props.modelValue);

  // 如果输入的是合法数字，则强制向上游发送 number 类型
  // 这能避免后端 Python 接收到字符串形式的数字导致 422 错误
  if (!isNaN(val)) {
    emit('update:modelValue', val);
  }
};

3. 模板结构定义

<div class="flex items-center justify-end w-full gap-2">
  <span class="text-right flex-1 select-none">{{ symbol || label }}</span>
  <input class="w-28 h-6 font-mono" /> <div class="w-14"> <span v-if="unit" class="italic">{{ unit }}</span>
  </div>
</div>

Tip

CSS 注脚：使用了 select-none 防止用户在快速点击输入框时意外选中旁边的文本标签。

---

🔌 接口协议 (Interface)

Props

属性名	类型	默认值	描述
modelValue	number | string	必填	输入框绑定的数值
label	string	''	备用描述标签
symbol	string	''	物理量符号（如 $E_a$, $k_0$）
unit	string	''	物理单位（如 kJ/mol, s⁻¹）
isScientific	boolean	false	是否开启科学计数法展示模式

---

精度提示

toFixed(4) 在处理极小值（如 $10^-7$）时会显示为 0。对于此类参数，必须将 isScientific 属性设置为 true。