azon_seeker/plans/MulInputModal_modification.md

MulInputModal.vue 修改计划

目标

修改 src/sidepanel/views/components/MulInputModal.vue 组件，使其支持从 Excel 复制一列值粘贴到输入框，并提供格式验证和确认后的消息通知。

需求详情

1. 输入格式：每行一个值（换行分隔），不允许空行。
2. 实时验证：在用户输入时检查格式是否正确，并给出提示。
3. 确认通知：点击确认按钮后，显示 n-message 通知成功或失败。

当前组件分析

当前组件是一个简单的模态对话框，包含一个文本区域输入框。它通过 v-model:show-modal 控制显示，但没有处理输入值或验证逻辑。

设计修改

1. 模板修改

• 保留现有的 n-modal 和 n-dialog 结构。
• 修改 n-dialog 属性：
  • 移除 content 属性（因为其内容与功能不符）。
  • 动态设置确认按钮的文本和状态：格式正确时显示“确认”，格式错误时显示“格式错误”并禁用按钮。
• 增强 n-input：
  • 添加 placeholder 提示用户粘贴格式。
  • 设置 autosize 适应多行内容。
  • 绑定 v-model:value 到本地输入文本。
• 添加验证提示区域：
  • 显示验证状态消息（成功/错误）。
  • 显示行数统计。

2. 脚本修改

• 导入必要的 Vue 和 Naive UI API。
• 定义模型：
  • showModal：控制模态框显示。
  • modelValue：可选，用于双向绑定关键词数组（字符串数组）。
• 定义本地响应式数据：
  • inputText：文本区域的绑定值。
• 计算属性 validation：
  • 根据输入文本实时验证格式。
  • 返回 valid、lines（非空行数组）、message。
• 验证规则：
  1. 输入不能为空（去除首尾空格后）。
  2. 不允许空行（任何一行 trim 后为空即无效）。
  3. 检测制表符（警告用户可能粘贴了多列）。
• 确认处理函数 handleConfirm：
  • 检查验证结果，如果无效则显示错误消息并返回。
  • 如果有效，更新 modelValue，发出 confirm 事件，显示成功消息，关闭模态框。
• 初始化：当 modelValue 变化时，将数组转换为换行分隔的文本并填充到输入框。

3. 样式修改

• 添加验证提示区域的样式，根据状态改变颜色。
• 调整布局间距。

代码草案

详见 MulInputModal.vue 草案

向后兼容性

• 添加的 modelValue 模型为可选，不影响现有使用（父组件可以不传递）。
• 现有的 showModal 模型保持不变。
• 新增的 confirm 事件可选，父组件可以监听以获取导入的行。

测试计划

1. 手动测试从 Excel 复制一列值并粘贴到输入框。
2. 验证实时提示是否正确显示。
3. 测试确认按钮在格式正确/错误时的行为。
4. 测试 n-message 通知是否正常弹出。

下一步

完成详细设计后，切换到 Code 模式实施修改。