mirror of
https://github.com/primedigitaltech/azon_seeker.git
synced 2026-01-29 18:53:19 +08:00
78 lines
2.9 KiB
Markdown
78 lines
2.9 KiB
Markdown
# 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 模式实施修改。
|