快速研发平台Fast Tortoise 设计资料

布满荆棘的人生 2022-10-19 12:44 130阅读 0赞

### Fast Tortoise 快速研发平台 ###

*  Fast Tortoise 是什么?
 *   *  基石
     *  与 Trinity 的区别
     *  新的改变
     *  亮点
     *  短期进度
 *  AppWorks 快速搭建环境
 *   *  下载方案1.
     *  下载方案2.
 *  菜单
 *   *  静态菜单
     *  动态菜单
 *  物料使用
 *  系统消息

# 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 具有快速上手, 快速开发的一些基础能力!

## 短期进度 ##

Mon 05Mon 12Mon 19顶部菜单 动态菜单 系统消息 工具采集 弹窗登录 选显卡缓存短期规划Fast Tortoise R&D programme

# AppWorks 快速搭建环境 #

## 下载方案1. ##

直接打开官网, 打开了vscode后点击安装, 会自动下载插件  
[AppWorks Vscode 插件安装][AppWorks Vscode]

## 下载方案2. ##

打开vscode, 点击插件扩展, 点击安装  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70]

下载好后, 重启Vscode, 打开代码根目录, 点击安装依赖后, 可一键安装环境

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 1]

# 菜单 #

Fast Tortoise 将用于不同等级的用户,但由于引入了角色的逻辑后, 会加大前端的复杂度, 希望前端只做数据渲染, 展示等初心, Fast Tortoise 将菜单分为俩类。

1.  静态菜单 (为支撑系统基础功能运行的板块, 以及一些不需要授权就能访问的菜单, 如公告等一些不需要授权的场景)
2.  动态菜单 (根据用户为单元, 将控制逻辑完全交给后端, 根据后端返回生成异步菜单)

## 静态菜单 ##

源数据位于代码中的目录 `:router/routes.js:`  
Fast Tortoise 采用的顶部导航条设计, 导出的数据为单个数组, 每个顶部的菜单都是对象结构  
如需要配置新的顶部导航条, 只需要在frameIn对象中新增一列, 即可, 如需改变现有菜单, 修改 frameIn 中 引入的对象文件即可

配置的数据格式为

{ 
      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'
        }
      ]
    }

页面加载静态菜单流程图。:

import router/index

import router/routes

Main.js

createRouter

解析菜单

new Vue

## 动态菜单 ##

Fast Tortoise 采用了Mock Api的方式, 模拟了不同用户, 不同菜单的代码, 新增菜单的方法为:  
mock js 文件位于 api/modules/sys.user.api, 代码逻辑为 uid 为admin-uuid 时, 会显示, testRoutes 的菜单

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 2]

# 物料使用 #

Pack 提供了基于物料的可视化开发方式，基于 AppWorks Material 提供的海量物料，通过区块组装生成页面，一键添加物料到代码，物料的文档、示例都可以在编辑器中直接触达：  
![在这里插入图片描述][20210711164217383.gif_pic_center]  
生成代码后, 把src/pages文件夹考入src/views目录下, 并配置静态路由, 或动态路由观看效果, 效果预览  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 3]

# 系统消息 #

Fast Tortoise 对Element UI的Message组件进行了二次封装, 目标是解决下图情况, 会造成很不友好的操作体验  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 4]

封装代码:

/** * 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, 参数, 调用方式完全一致, 改造后的弹窗消息, 策略为 **一条发送完成发送下一条**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 5]

当重要消息时, 可在调用时传入 overall 属性, 该消息会清空所有消息站, 作为优先级第一的消息发出, Demo 如下

this.$message({ 
              message: '恭喜你，这是一条成功消息',
              type: 'success',
              overall: true
    });

[AppWorks Vscode]: https://appworks.site/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70]: /images/20221005/1188842cfce249ca836f56117eadeed0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 1]: /images/20221005/3b79c107a21c41fb91ed4f291b864e5a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 2]: /images/20221005/f69be5b0570f4055a1c56d5688e9b507.png
[20210711164217383.gif_pic_center]: /images/20221005/02ff904a197546c1bd46798e9e93114d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 3]: /images/20221005/472b036041934f1b87497281ed32c75a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 4]: /images/20221005/437560ba23164e6980aa5e93a2f93490.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 5]: /images/20221005/08742631d4754566b43c977cd0a03f68.png