# AI产品经理 指令技巧： | 名称 | 描述 | 示例 | | -------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | 指令词(linstruction) | 引导模型理解您所需任务或问题的词汇，帮助模型准确理解需求。 | "简述"、"解释"、"翻译"、"总结"、"润色"、"写一篇文章"等。 | | 输入(Input Data) | 提供给模型的问题或具体內容，应清晰、完整以确保模型生成满意答案。 | 当需要总结时，提供的文本；当需要编写SQL代码时，提供的数据库表和字段信息。 | | 背景 Context) -可选 | 与任务相关的其他信息，提供额外信息以帮助模型更好地理解需求。 | 同样是写关于量子计算的科普文章，是写给小学生还是物理专业大学生，得到的内容会完全不同。 | | 输出要求 (Output indicator)-可选 | 对模型生成答案的格式、长度等方面的限制。 | "用50字以内简述"、"请按以下格式回答：1.材料…2.步骤一.3.步骤二."等。 | ## 角色扮演 ``` 充当一位经验丰富的互联网产品经理，我需要完成一个管理后台的组件库项目，组件库项目需要为其他的前端项目（Web首页、小程序、桌面端、移动端等）各种终端的项目进行服务，作为内容管理的后台服务，我是一名经验丰富的前端全栈工程师，我希望与你讨论该项目的业务需求分析等内容，请从专业的角度尽可能详细而又结构化的输出，后续不需要我再额外的说明。 ``` ## 背景语料准备 ```` 针对业务需求分析部分，我需要尽可能的完善，请按照下面的功能内容进行设计： ``` 技术栈：应使用最新的前端技术栈，如Vue3, Vite4, TypeScript5，Iconify，UnoCSS，自动路由等。 UI组件库：应基于市面上流行的UI组件库，如Ant Design Vue、Naive UI、Element Plus等，评估上面我给这些方案，并使用主流的Vue侧的UI组件库。 动态路由和权限管理：组件库应包含动态路由和权限管理，解决用户权限问题。例如，提供基础固定权限如admin、test、editor和自定义用户权限，可自定义修改角色对应的菜单,可定义用户多角色。 布局：提供多种布局方式，如左右布局和上下布局，可自由切换。 主题：系统内置了多种主题，如混合主题、浅色主题，深色主题，可随意切换。 常用功能：包含后台管理系统常用的功能如表单，table表等。 业务模型页面：提炼了常用且具有代表性的业务模型页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能。 页面模版：提供多种页面模版，覆盖表格、列表、表单、工作台、可视化等场景。 ``` 按照先前的组件分类、功能需求、非功能需求进行输出。 ```` ## 知识解惑 ``` 请横向对比一下ant desgin vue与element plus，从技术特点、流行度、可配置性、易用性等角度进行评价。 ``` 回复： ``` Ant Design Vue和Element Plus都是非常优秀的Vue UI框架，它们各自有着独特的技术特点，流行度，可配置性和易用性。以下是我根据网络搜索结果的横向对比： **Ant Design Vue**¹²³⁴： - **技术特点**：Ant Design Vue是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的HTML结构和CSS样式也保持一致。目前已有60+个组件，Vue3包体积更小，更快，并且支持SSR³。在易用性、功能、性能上都有了很大的提升⁴。 - **流行度**：Ant Design Vue得到了蚂蚁官方认可，挂在蚂蚁金服底下的正式项目，保持了不错的更新和维护状态⁶。 - **可配置性**：Ant Design Vue提供了丰富的组件和API，可以满足大部分项目需求¹。 - **易用性**：Ant Design Vue在易用性、功能、性能上都有了很大的提升⁴。 **Element Plus**⁶⁷⁸： - **技术特点**：Element Plus是为了适配Vue 3对Element UI进行的重构⁶。它提供了68个组件⁶。如果需要用表格处理大量数据，Element Plus更合适，因为它自带virtual scroll⁶。 - **流行度**：Element Plus发布正式版后，下载量飙升，这也依托于Element UI的占有率和好口碑⁶。 - **可配置性**：Element Plus提供了丰富的组件和API，可以满足大部分项目需求⁸。 - **易用性**：Element Plus在易用性、功能、性能上都有了很大的提升⁶。 总的来说，这两个框架都是非常优秀的选择，具体选择哪一个取决于你的项目需求和个人喜好。希望这个对比能帮助你做出决定！ 源: 与必应的对话 (1) Ant Design Vue 3.0 的那些正经事儿 - 知乎 - 知乎专栏. https://zhuanlan.zhihu.com/p/423456742. (2) 后台管理系统基于VUE这些Ui框架都有啥优缺点？Antd-vue、Element-Ui、iView等？ - 知乎. https://www.zhihu.com/question/353525584. (3) 2023值得推荐的Vue3.0 PC端UI组件库 - 知乎 - 知乎专栏. https://zhuanlan.zhihu.com/p/616831237. (4) Element Plus 和 Ant Design Vue 对比测评，哪个更好？ - CSDN博客. https://blog.csdn.net/weixin_48201324/article/details/124011571. (5) Element Plus 和 Ant Design Vue 对比测评，哪个更好？ - 知乎. https://zhuanlan.zhihu.com/p/494222652. (6) 如何看待 element3 和 element plus 这两个仓库未来的发展？会共存还是一方碾压? - 知乎. https://www.zhihu.com/question/432693338. (7) Element Plus for Vue 3 入门教程 - 知乎 - 知乎专栏. https://zhuanlan.zhihu.com/p/494397074. (8) 最火的 Vue 前端框架，你用对了么？ - 知乎 - 知乎专栏. https://zhuanlan.zhihu.com/p/59627920. ``` 指令： ``` ant desgin vue是不是jsx/tsx语法写的，从vue3的性能角度出发，element plus的性能是不是要比ant design vue要更好。 ``` 回复： ``` Ant Design Vue确实使用了JSX/TSX语法¹²。这是因为Vue 3的组件库都在使用JSX/TSX²。在Options API和Composition API之间无须纠结，Composition API在逻辑复用、类型推导、可测性等方面均占优势²。对于JSX和template，在大部分场景下是推荐使用template的（尤其是在业务场景下）。Vue 3基于template分析做了很多优化，并且对使用者是透明的，编译器默默地完成了所有的优化操作²。 至于性能方面，我没有找到具体的性能对比数据。但是，根据网络上的一些讨论⁴⁵，Element Plus和Ant Design Vue都是非常优秀的框架，它们在性能上可能会有一些差异，但这些差异可能不会对大多数应用产生显著影响。选择哪一个框架更多的取决于你的具体需求和个人喜好，而不仅仅是性能。例如，如果你需要处理大量数据的表格，Element Plus可能会更合适，因为它自带virtual scroll⁴。总的来说，这两个框架都是非常优秀的选择，具体选择哪一个取决于你的项目需求和个人喜好。 源: 与必应的对话 (1) JSX简介以及在Vue3中使用JSX+antd开发组件 - 掘金. https://juejin.cn/post/7100812234472816676. (2) 为什么 Vue3 的组件库都在使用 jsx/tsx？ - 知乎. https://www.zhihu.com/question/436260027. (3) Element Plus 和 Ant Design Vue 对比测评，哪个更好？ - 知乎. https://zhuanlan.zhihu.com/p/494222652. (4) vue3版本下element-plus和antd-vue选哪个更好一些？ - 知乎. https://www.zhihu.com/question/464055499. (5) 从0搭建Vue3.0+TypeScript+antd-Vue+axios+JSX前端框架 - 掘金. https://juejin.cn/post/6872686596236247053. (6) view-design、element-plus、Ant Design Vue 组件库对比. https://segmentfault.com/a/1190000040316696. (7) undefined. https://www.antdv.com/docs/vue/introduce-cn/. ``` ## 产品文档输出 功能详细描述： ``` 模块包含： 1.首页： - 概览 - 看板 2.系统管理： - 用户管理 - 角色管理 - 菜单管理 - 部门管理 - 字典管理 - 系统日志 3.风格定制： - 主题配色 - 布局 - 暗黑模式 - 全屏 - 切换动画 4.模板页面： - 表单页 - 详情页 - 列表页 - 结果页 - 个人中心 - 异常页 5.基础组件： - 图标 - 表单 - 表格 - 选择器 - 菜单 - 动态展示 - 通知分享 - Excel处理 - 编辑器 - 展示 6.扩展功能： - 日历卡片 - 天气 - 倒计时 - 过渡动画 - 图片裁剪 - 文件下载 - 打印 - 国际化 - 水印 - 验证组件 - 复制图片 - 音频播放 - 视频播放 7.图表 - Echarts集成 - 地图应用 - AntV G2 - D3.js 8.打包构建 - Vite - 简化配置 - git版本控制 - 组件单元测试 - 性能优化 - 桌面跨端方案 - 构建脚本 - tsup - unbuild - 工作流 - 集成测试 - Electron 9.部署与发布 10.AI工具 ``` 基本要求： 1. **产品介绍**：这部分包含对产品或新功能的高级别概述。可能包括产品的目标、主要功能以及目标用户。 2. **背景和目标**：这部分解释了为什么需要产品或新功能，以及希望通过实现它来实现什么。这应包括清晰的业务目标和关键的成功指标(KPIs)。 3. **用户故事和场景**：这部分详细描述了目标用户以及他们如何使用该产品或新功能。这通常包括用户故事和用户场景，以帮助团队理解产品将如何在实践中使用。 4. **功能需求**：这部分详细列出了产品或新功能的所有功能需求。这应该尽可能具体，描述每个功能的工作方式、观感以及与其他功能的交互方式。 5. **非功能需求**：这部分列出了产品或新功能的非功能性需求，如性能要求、安全要求、可用性要求、可维护性要求等。 6. **数据需求**：这部分描述了产品的数据输入和输出需求，包括需要哪些数据、如何收集数据，以及如何使用和显示数据。 7. **界面和用户体验设计**：这部分包含初步的界面设计和用户体验设计，可能包括草图、布局图、流程图和其他可视化工具。 8. **约束条件**：这部分列出了影响产品设计和实现的所有已知的约束条件，包括技术约束、法律或监管约束、时间和预算约束等。 9. **项目计划和时间线**：这部分列出了产品开发的关键里程碑、阶段和预计完成时间。 10. **附录**：这部分可以包含任何其他相关的信息，如市场研究结果、竞争对手分析、技术细节等。 ## 核心开发路径 ```mermaid gantt dateFormat YYYY-MM-DD title 开发计划 section 产品经理 需求分析 :pm1, 2023-09-25, 5d 文档编写 :pm2, after pm1, 5d 进度跟踪 :pm3, 2023-10-01, 60d section UI设计 界面设计 :ui1, 2023-09-25, 10d 交互设计 :ui2, after ui1, 10d section 基础组件 开发图标 :a1, 2023-10-01, 3d 开发表单 :a2, after a1, 4d 开发表格 :a3, after a2, 4d section 风格定制 主题配色 :b1, after a3, 4d 布局设计 :b2, after b1, 3d 暗黑模式 :b3, after b2, 3d section 模板页面 表单页 :c1, after b3, 4d 详情页 :c2, after c1, 4d 列表页 :c3, after c2, 4d section 系统管理 用户管理 :d1, after c3, 5d 角色管理 :d2, after d1, 5d 菜单管理 :d3, after d2, 5d section 扩展功能 日历卡片 :e1, after d3, 4d 天气组件 :e2, after e1, 3d section 打包构建 Vite配置 :f1, after e2, 3d git版本控制 :f2, after f1, 2d ``` ## 参考 https://chat.openai.com/share/474472fc-aaf2-4a43-bbaf-42580ff43050