# Fast Tortoise **Repository Path**: chensanjin/fast-tortoise ## Basic Information - **Project Name**: Fast Tortoise - **Description**: 愿景是打造一款好用的, 性能高的, 快速开发平台 Web 端 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2021-07-12 - **Last Updated**: 2021-07-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Fast Tortoise @[TOC](Fast Tortoise 快速研发平台) # Fast Tortoise 是什么? ## 基石 Fast Tortoise 是基于D2Admin的前端快速开发框架, D2Admin 是一个完全 开源免费 的企业中后台产品前端集成方案，使用最新的前端技术栈，小于 60kb 的本地首屏 js 加载，已经做好大部分项目前期准备工作，并且带有大量示例代码，助力管理系统敏捷开发。 相关核心依赖 : 1. Vue 2.6.11 2. Element UI 2.13.2 3. Vuex 3.1.2 ## 与 Trinity 的区别 Trinity 基于 vue-element-admin, 也是一款优秀的后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，并提供了丰富的功能组件。 相关核心依赖: 1. Vue 2.6.1 2. Element UI 2.15.3 3. Vuex 3.1.0 除了使用基础框架的划分, 相关核心依赖版本几乎一致, 代表着俩个前端框架平台代码几乎==百分百兼容== ## 新的改变 Fast Tortoise 进行了一些功能拓展与新技术的引入，除了标准的页面展示，增加了如下几点新功能： 1. **全新的界面设计** ，将会带来全新的用户体验； 2. 设置你喜爱的风格样式，Fast Tortoise **将页面样式以可配置形式** 进行展示； 3. 增加了 **卡片拖拽** 功能，你可以将指定页面的元素进行拖拽； 4. 全新的 **Lowdb** 框架引用； 5. 增加了支持**Markdown 导入** 插件； 6. 增加了 **路由快照** 页面存储功能； 7. 引入了 **Trintiy 常用** 部分工具类 8. 增加了 **顶部菜单, 页面搜索, 日志打印** 等功能 ## 亮点 D2Admin 底层支持 **AppWorks**, AppWorks 正式版本定位前端研发工具集，源自 淘系自研前端研发工具 > AppWorks 是社区受到开发者广泛关注的 VS Code 套件，在 VS Code 插件市场有 2w+ 的下载量，是 VS Code > 插件市场受开发者喜爱的百佳套件之一，多次登陆 VS Code 插件市场周/月趋势榜。在淘宝内部，AppWorks 日均创建项目 50+ > 次，日均区块被使用 50+ 次，DAU 400+。 - 快速环境快速集成 - 海量物料组件快速开发 以上功能意味着 Fast Tortoise 具有快速上手, 快速开发的一些基础能力! ## 短期进度 ```mermaid gantt dateFormat YYYY-MM-DD title Fast Tortoise R&D programme section 短期规划 顶部菜单 :done, des1, 2021-07-01,2021-07-06 动态菜单 :done, des1, 2021-07-06,2021-07-09 系统消息 :done, des2, 2021-07-09, 3d 工具采集 :active, des3, 2021-07-10, 3d 弹窗登录 : des4, after des3, 3d 选显卡缓存 : des5, after des4, 3d ``` # AppWorks 快速搭建环境 ## 下载方案1. 直接打开官网, 打开了vscode后点击安装, 会自动下载插件 [AppWorks Vscode 插件安装](https://appworks.site/) ## 下载方案2. 打开vscode, 点击插件扩展, 点击安装 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210711162612618.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2,size_16,color_FFFFFF,t_70) 下载好后, 重启Vscode, 打开代码根目录, 点击安装依赖后, 可一键安装环境 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210711163019872.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2,size_16,color_FFFFFF,t_70) # 菜单 Fast Tortoise 将用于不同等级的用户,但由于引入了角色的逻辑后, 会加大前端的复杂度, 希望前端只做数据渲染, 展示等初心, Fast Tortoise 将菜单分为俩类。 1. 静态菜单 (为支撑系统基础功能运行的板块, 以及一些不需要授权就能访问的菜单, 如公告等一些不需要授权的场景) 2. 动态菜单 (根据用户为单元, 将控制逻辑完全交给后端, 根据后端返回生成异步菜单) ## 静态菜单 源数据位于代码中的目录 `:router/routes.js:` Fast Tortoise 采用的顶部导航条设计, 导出的数据为单个数组, 每个顶部的菜单都是对象结构 如需要配置新的顶部导航条, 只需要在frameIn对象中新增一列, 即可, 如需改变现有菜单, 修改 frameIn 中 引入的对象文件即可 配置的数据格式为 ```javascript { path: '/demo/test', name: 'demo-test', meta: { ...meta, title: '测试顶部菜单' }, icon: 'plug', redirect: { name: 'demo-test-index' }, component: 'layout', children: [ { path: 'test1', name: 'demo-test-index', component: 'pages/Test01/index', meta: { ...meta, title: '剪贴板访问' }, title: '剪贴板访问', icon: 'home' } ] } ``` 页面加载静态菜单流程图。: ```mermaid graph LR A[Main.js] -- import router/index --> B{createRouter} B -- import router/routes --> C(解析菜单) C --> D((new Vue)) ``` ## 动态菜单 Fast Tortoise 采用了Mock Api的方式, 模拟了不同用户, 不同菜单的代码, 新增菜单的方法为: mock js 文件位于 api/modules/sys.user.api, 代码逻辑为 uid 为admin-uuid 时, 会显示, testRoutes 的菜单 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210711164010689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2,size_16,color_FFFFFF,t_70) # 物料使用 Pack 提供了基于物料的可视化开发方式，基于 AppWorks Material 提供的海量物料，通过区块组装生成页面，一键添加物料到代码，物料的文档、示例都可以在编辑器中直接触达： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210711164217383.gif#pic_center) 生成代码后, 把src/pages文件夹考入src/views目录下, 并配置静态路由, 或动态路由观看效果, 效果预览 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210711165635193.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2,size_16,color_FFFFFF,t_70) # 系统消息 Fast Tortoise 对Element UI的Message组件进行了二次封装, 目标是解决下图情况, 会造成很不友好的操作体验 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210711170608516.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2,size_16,color_FFFFFF,t_70) 封装代码: ```javascript /** * ZMessage.js * author xyang create by 2021/7/1 * * 实现: 该文件导出一个构造函数, 意味着 ZMessage() 是可执行的,会产生一个Message变量, * 该变量存放在ZMessage静态变量中, 静态变量是全局唯一的, 模仿 Element UI (Message) * * * 使用方法: * import ZMessage from './plugins/z-message/ZMessage' * * 自定义配置项 * ZMessage.setConfig({ max: 1, isQueue: true, showNewest: true }) * * 覆盖默认$message * Vue.prototype.$message = ZMessage * 100% 兼容Element message, 额外新增了 overall 属性, 会覆盖之前的全部属性 * */ import { Message } from 'element-ui' const messageTypes = ['success', 'warning', 'error', 'info'] function ZMessage (options) { if (!(this instanceof ZMessage)) { return new ZMessage(options) } this.init(options) } ZMessage.queue = [] // 未展示数据的消息队列 ZMessage.instances = [] // 消息体实例列表 // 配置项 ZMessage.config = { max: 0, // 最大显示数 isQueue: false, // 是否以队列形式存储为展示消息 showNewest: true // 是否后添加的消息覆盖前面的消息 } // 配置参数 ZMessage.setConfig = function (config = {}) { ZMessage.config = { ...ZMessage.config, ...config } } ZMessage.close = Message.close ZMessage.closeAll = Message.closeAll // 各消息类型静态方法 messageTypes.forEach(type => { ZMessage[type] = options => { let opts = options if (typeof options === 'string') { opts = { message: options } } return new ZMessage({ ...opts, type }) } }) // 初始化 ZMessage.prototype.init = function (options) { const { max, isQueue, showNewest } = ZMessage.config // 判断如果超出最大消息数时，删除消息 if (max > 0 && ZMessage.instances.length >= max && showNewest && !isQueue) { this.removeMessages() } // 传入了覆盖全部属性, 关闭全部消息 if (options.overall) { ZMessage.closeAll() // 清空所有队列消息 ZMessage.queue = [] } if (ZMessage.instances.length >= max && isQueue) { // 添加队列元素 ZMessage.queue.push(this.saveToQueue(options)) } else if (ZMessage.instances.length < max || !max) { // TODO 当max大于1时, 可能会消息重叠 this.setMessage(options) } } // 移除消息 ZMessage.prototype.removeMessages = function () { const { instances, config: { max } } = ZMessage ZMessage.instances = instances.filter((instance, index) => { if (index < instances.length - max + 1) { instance && instance.close() return false } return true }) } // 获取消息实例和添加事件监听 ZMessage.prototype.setMessage = function (options) { const instance = Message(options) // 监听消息消失事件，从实例列表移除当前消息实例 instance.$watch('visible', val => { ZMessage.instances = ZMessage.instances.filter(item => item !== instance) if (ZMessage.config.isQueue && ZMessage.queue.length) { // 取出一个队列元素运行 ZMessage.queue.shift()() } }) ZMessage.instances.push(instance) } // 生成队列元素，延迟执行 ZMessage.prototype.saveToQueue = function (options) { return () => { this.setMessage(options) } } export default ZMessage ``` 100% 兼容Element UI Message, 参数, 调用方式完全一致, 改造后的弹窗消息, 策略为 **一条发送完成发送下一条** ![在这里插入图片描述](https://img-blog.csdnimg.cn/2021071117163625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2,size_16,color_FFFFFF,t_70) 当重要消息时, 可在调用时传入 overall 属性, 该消息会清空所有消息站, 作为优先级第一的消息发出, Demo 如下 ```javascript this.$message({ message: '恭喜你，这是一条成功消息', type: 'success', overall: true }); ```