Naive UI 组件选择思维导图 - 功能展现角度

Naive UI 组件选择思维导图 - 功能展现角度

参考 按钮 Button - Naive UI

核心思维：从用户要做什么出发选择组件

用户要做什么？
├── 展示信息
├── 输入数据
├── 交互操作
├── 导航浏览
└── 获取反馈

1. 展示信息类

用户要看什么内容？

展示信息
├── 简单文本
│   ├── n-text (文本)
│   ├── n-title (标题)
│   └── n-paragraph (段落)
├── 数据列表
│   ├── n-list (列表)
│   ├── n-data-table (表格)
│   └── n-tree (树形结构)
├── 卡片展示
│   ├── n-card (卡片)
│   └── n-collapse (折叠面板)
├── 统计数据
│   ├── n-statistic (统计数据)
│   ├── n-progress (进度条)
│   └── n-skeleton (骨架屏)
├── 图片媒体
│   ├── n-image (图片)
│   ├── n-avatar (头像)
│   └── n-carousel (轮播图)
└── 时间信息
    ├── n-time (时间显示)
    └── n-calendar (日历)

选择指南：

• 简单文字 → n-text 系列
• 商品/文章列表 → n-list 或 n-card
• 结构化数据 → n-data-table
• 分类信息 → n-tree 或 n-collapse
• 数据统计 → n-statistic + n-progress

2. 输入数据类

用户要输入什么内容？

输入数据
├── 文本输入
│   ├── n-input (单行输入)
│   ├── n-input-number (数字输入)
│   └── n-textarea (多行输入)
├── 选择输入
│   ├── n-select (下拉选择)
│   ├── n-cascader (级联选择)
│   ├── n-tree-select (树形选择)
│   ├── n-auto-complete (自动完成)
│   └── n-mention (提及)
├── 多选输入
│   ├── n-checkbox (复选框)
│   ├── n-checkbox-group (复选框组)
│   ├── n-transfer (穿梭框)
│   └── n-upload (文件上传)
├── 单选输入
│   ├── n-radio (单选框)
│   ├── n-radio-group (单选框组)
│   └── n-rate (评分)
├── 时间输入
│   ├── n-date-picker (日期选择)
│   ├── n-time-picker (时间选择)
│   └── n-date-time-picker (日期时间)
└── 颜色输入
    └── n-color-picker (颜色选择)

选择指南：

• 姓名、邮箱等 → n-input
• 年龄、价格等数字 → n-input-number
• 详细描述 → n-textarea
• 从固定选项中选择 → n-select
• 多级分类选择 → n-cascader
• 多项选择 → n-checkbox-group
• 单项选择 → n-radio-group
• 文件上传 → n-upload

3. 交互操作类

用户要执行什么操作？

交互操作
├── 触发动作
│   ├── n-button (按钮)
│   ├── n-dropdown (下拉菜单)
│   └── n-popover (弹出框)
├── 页面跳转
│   ├── n-menu (菜单)
│   ├── n-tabs (标签页)
│   └── n-anchor (锚点)
├── 弹窗操作
│   ├── n-modal (模态框)
│   ├── n-drawer (抽屉)
│   └── n-popconfirm (确认弹窗)
├── 状态切换
│   ├── n-switch (开关)
│   ├── n-slider (滑块)
│   └── n-pagination (分页)
└── 搜索筛选
    ├── n-auto-complete (自动完成)
    ├── n-cascader (级联选择)
    └── n-tree-select (树形选择)

选择指南：

• 提交、保存等主要操作 → n-button
• 更多操作选项 → n-dropdown
• 页面内不同视图切换 → n-tabs
• 重要确认操作 → n-modal 或 n-popconfirm
• 侧边栏内容 → n-drawer
• 开关功能 → n-switch
• 调节数值 → n-slider

4. 导航浏览类

用户要如何浏览网站？

导航浏览
├── 顶部导航
│   ├── n-menu (导航菜单)
│   └── n-breadcrumb (面包屑)
├── 侧边导航
│   ├── n-menu (侧边菜单)
│   └── n-anchor (锚点导航)
├── 内容导航
│   ├── n-tabs (标签页)
│   ├── n-pagination (分页)
│   └── n-steps (步骤条)
├── 全局导航
│   ├── n-back-top (回到顶部)
│   └── n-affix (固钉)
└── 搜索导航
    └── n-auto-complete (搜索建议)

选择指南：

• 网站主导航 → n-menu
• 当前位置指示 → n-breadcrumb
• 页面内不同部分 → n-tabs
• 长页面快速跳转 → n-anchor
• 分步骤引导 → n-steps
• 回到页面顶部 → n-back-top

5. 获取反馈类

用户需要什么反馈？

获取反馈
├── 消息通知
│   ├── n-message (消息提示)
│   ├── n-notification (通知)
│   └── n-alert (警告框)
├── 加载状态
│   ├── n-spin (加载中)
│   ├── n-skeleton (骨架屏)
│   └── n-progress (进度条)
├── 操作结果
│   ├── n-result (结果页)
│   ├── n-empty (空状态)
│   └── n-statistic (统计结果)
├── 表单反馈
│   ├── n-form (表单)
│   ├── n-form-item (表单项)
│   └── n-form-item-row (表单项行)
└── 用户反馈
    ├── n-modal (对话框)
    ├── n-drawer (抽屉)
    └── n-popconfirm (确认框)

选择指南：

• 操作成功/失败提示 → n-message
• 重要系统通知 → n-notification
• 页面级别警告 → n-alert
• 数据加载中 → n-spin
• 数据加载前占位 → n-skeleton
• 操作完成结果 → n-result
• 无数据状态 → n-empty

完整选择流程图

用户要做什么？
│
├── 要看信息？
│   ├── 看简单文字 → n-text 系列
│   ├── 看列表数据 → n-list / n-data-table
│   ├── 看卡片内容 → n-card
│   ├── 看统计数据 → n-statistic
│   ├── 看图片媒体 → n-image / n-avatar
│   └── 看时间信息 → n-time / n-calendar
│
├── 要输入数据？
│   ├── 输入文本 → n-input / n-textarea
│   ├── 选择项目 → n-select / n-radio
│   ├── 多选项目 → n-checkbox-group
│   ├── 上传文件 → n-upload
│   ├── 选择时间 → n-date-picker
│   └── 选择颜色 → n-color-picker
│
├── 要执行操作？
│   ├── 触发功能 → n-button
│   ├── 更多选项 → n-dropdown
│   ├── 弹窗确认 → n-modal / n-popconfirm
│   ├── 开关功能 → n-switch
│   └── 调节数值 → n-slider
│
├── 要浏览导航？
│   ├── 网站导航 → n-menu
│   ├── 页面导航 → n-tabs
│   ├── 位置导航 → n-breadcrumb
│   └── 步骤导航 → n-steps
│
└── 要获得反馈？
    ├── 消息提示 → n-message
    ├── 加载状态 → n-spin
    ├── 操作结果 → n-result
    └── 表单验证 → n-form 系列

实际应用场景示例

1. 用户注册页面

注册页面需要：
├── 展示信息：标题、说明文字
│   → n-title + n-text
├── 输入数据：用户名、密码、邮箱等
│   → n-input + n-form
├── 交互操作：提交按钮、重置按钮
│   → n-button
├── 获取反馈：成功/失败提示
│   → n-message + n-result
└── 导航浏览：返回登录链接
    → 普通链接或 n-button

2. 商品管理后台

管理后台需要：
├── 展示信息：商品列表、统计数据
│   → n-data-table + n-statistic
├── 输入数据：搜索框、筛选条件
│   → n-input + n-select
├── 交互操作：添加商品、编辑、删除
│   → n-button + n-modal
├── 导航浏览：侧边菜单、分页
│   → n-menu + n-pagination
└── 获取反馈：操作结果提示
    → n-message + n-notification

3. 个人中心页面

个人中心需要：
├── 展示信息：个人信息、头像、统计数据
│   → n-card + n-avatar + n-statistic
├── 输入数据：修改个人信息表单
│   → n-form + n-input 系列
├── 交互操作：保存、取消按钮
│   → n-button
├── 导航浏览：不同信息标签页
│   → n-tabs
└── 获取反馈：保存成功提示
    → n-message

选择原则总结

1. 功能匹配原则

• 组件功能要与用户需求完全匹配
• 不要为了炫酷而选择复杂组件

2. 用户体验原则

• 选择用户熟悉的交互方式
• 保持界面一致性

3. 性能考虑原则

• 大量数据用 n-data-table
• 简单列表用 n-list
• 复杂结构用 n-tree

4. 可维护性原则

• 优先选择文档完善、使用广泛的组件
• 避免过度自定义

这个思维导图帮助你从用户实际需求出发，快速找到最适合的 Naive UI 组件！