demo 整合架构
monaco-editor
实时编辑 预览
同架构 同代码复制粘贴即可使用
同架构设计 稳定高效
中后台系统
前台
1.主要功能
1.1 约定式路由 -（vue-router 考虑集成
1.2 权限管理
菜单权限
按钮权限
页面权限
以上三者在不同程度上有交叉
1.3 字典处理
字典数据处理（高效）注意版本问题 打包生成版本文件
具体方案 请求结果 返回字典 ss 中 同样数据减少 请求 数量，注意 生产时 更新问题及时销毁
1.4 配置文件
配置文件处理（高效）
通过 js 配置路径 指定页面加载内容 避免重复加载配置文件 配置文件 可以通过文件名称进行访问 在缓存中访问
1.5 样式
样式响应式系统 采用 tailwind 来解决
主题配置 （用户选择颜色生成主题）
UI 组件库 （element-plus 后期 增加 ant-design 版本）
1.6 打包
打包方案 代码良好的不超过 1000 行
合理分包 三方库（版本较为固定） 自己的代码（版本较为固定）
打包生成版本文件 版本文件更新 通知用户 更新
……
1.7 规范开发方案
eslint
prettier
commitlint
husky
lint
staged
commitizen
1.8 技术选型
vue(all) + ts + vite + tailwind + element-plus
2.UI
不做原型设计考虑
3.业务功能
3.1 表单二次封装
验证问题 级联验证问题
3.2 级联数据 权限问题 级联限制
3.3 表格二次封装 支持导出 格式 word xlsx
3.4 文件上传
文件上传 进度 tip
3.5 轮播图
3.6 音视频
4.feature
自定义配置管理
主题配置 （用户选择颜色生成主题）
国际化（vue-i18n） 仅支持中英文
后台管理系统
后台
使用 nestjs-admin 框架 （ruoyi）
1.feature
- 考虑 接入数据库的成本 修改方案的成本
- 考虑 微服务成本
- 考虑 登录接入成本
qahub
简单社交站点 渐进式的增加需求
主要功能模块与接口设计
1.用户模块
难点 解决状态存储问题 难点 解决接口权限校验的中间件 接口设计 1.1 注册用户 1.2 用户登录 1.3 修改用户信息 1.4 退出登录 1.5 获取用户信息（包括 用户脱敏信息等 ） 1.6 修改用户密码 1.7 搜索相关用户 1.8 获取点赞列表 1.9 获取收藏列表 1.11 获取粉丝列表
2.帖子模块
绑定所属用户关系 接口设计 2.1 发布帖子 2.2 删除帖子 2.3 修改帖子 2.4 获取帖子 2.5 获取帖子列表 携带基本信息 包含用户 点赞 评论 收藏 2.6 获取帖子详情 没必要 实现 2.7 点赞帖子 2.8 取消点赞帖子 2.9 收藏帖子 2.10 取消收藏帖子 2.11 搜索相关帖子
3.评论模块
难点 数据库多层关联实现 pid id 查找 id === pid ，返回给 children 递归实现 发起人 文章 回复人 三者信息关联 存在 多层关联 如被删除父级评论 其子该如何处理 回复的页面设计 父级评论 子集评论 嵌套 （设计思路，所有的回复信息 都是围绕着父级和帖子之间的关系 展开讨论的 ） 评论存储 需要发起人 被评论文章 之间的关系 接口设计 3.1 发布评论 3.2 删除评论 3.3 修改评论 3.4 获取评论 3.5 获取评论列表 携带基本信息 包含用户 点赞 评论 收藏 3.6 评论点赞 3.8 取消点赞评论
4.点赞模块
这里提到的 点赞属于 帖子点赞 点赞存储 需要发起人 被点赞文章 之间的关系 接口设计 4.1 点赞帖子 4.2 取消点赞帖子 4.3 ……
5.关注模块
关注动作触发，更新用户列表；同时，更新粉丝列表。 接口设计 5.1 关注用户 5.2 取消关注用户 5.3 ……
6.收藏模块
收藏 指的文章被收藏，涉及到文章与用户之间的关系 接口设计 6.1 收藏文章 6.2 取消收藏文章 6.3 ……
7.通知模块
难点 消息的实时传递 websocket 还是其他方式 推测思路 查询到所有 未读的通知返回数据 当用户点击了，调用已读接口 更新数据状态即可 如何实现 没有思路（代码层面的 webSocket） 接口设计 7.1 获取通知列表 7.2 获取通知详情 7.3 删除通知 7.4 标记通知已读 7.5 获取未读通知数量 7.6 获取未读通知列表 7.7 获取未读通知详情
8.即时通信模块
即时通信的方式效率 用户 发起聊天 from user 、 to user 时间 给予关联值 作为聊天记录查询条件 接口设计 8.1 获取聊天记录 8.2 发送聊天消息 8.3 ……
技术选型
1.vue + vue-router + vite + ?fabricjs + tailwind
2.node + express + mongodb + mongoose + redis + websocket
9.……
支持多端
1.web 端
2.移动端 安卓端 暂定套壳 uniapp webview
3.小程序 待选
4.……
工业互联网组态
2D
1.设计组件的拖拉拽
2.修改组件的基本信息、数据源
3.考虑自定义组件 导入方式
4.动态获取更新数据
5.拖拉拽 fabricjs? graphicsjs？ 腾讯？ paperjs ?
6.丰富的资源图库 尽量（适配 厂商常见的 icon 格式 和 动图格式等）； 采用 svg 适配 基础的图片格式
7.动画效果的实现 水流等，流动效果 js 实现 还是 css 实现做选型
技术选型
vue + vue-router + vite + ?fabricjs + tailwind
2.5 D
……
movies list 多端 APP
主要做移动端 安卓端 uniapp
todolist
- 功能 注册登录 crud list 自动保存内容 存储内容
- electron pc uniapp 多端适配
- pc 快捷键开启 常驻后台 开机自启 询问 自定义安装路径 置顶 手动点击实现 默认非置顶状态
- 导出 格式 待定
- 尝试调用接口 免费润色导出 今日日报
- 支持批量导出 todo 内容 可选日期区间
- 未完成内容时间挂日期 放置在页面上方
- 可自定义级别 提示逾期 最后的完成期限
- 若逾期已完成自动 设为不展示
- 可设置任务置顶功能
- 可修改 查询内容 内容可按照等级 查询日期范围 关键词查询
- 逾期 微信公众号提醒等 邮箱提醒 自动配置等