# 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 模式实施修改。