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

最新推荐文章于 2024-12-10 09:24:07 发布

削了个杨桃。

最新推荐文章于 2024-12-10 09:24:07 发布

阅读量2.5k

点赞数

分类专栏： web项目 element 架构文章标签：架构 web app vue

本文链接：https://blog.csdn.net/qq_40794266/article/details/118639304

版权

web项目同时被 3 个专栏收录

20 篇文章

订阅专栏

架构

2 篇文章

订阅专栏

element

1 篇文章

订阅专栏

Fast Tortoise 快速研发平台

Fast Tortoise 是什么?
AppWorks 快速搭建环境
- 下载方案1.
- 下载方案2.
菜单
- 静态菜单
- 动态菜单
物料使用
系统消息

Fast Tortoise 是什么?

基石

Fast Tortoise 是基于D2Admin的前端快速开发框架, D2Admin 是一个完全开源免费的企业中后台产品前端集成方案，使用最新的前端技术栈，小于 60kb 的本地首屏 js 加载，已经做好大部分项目前期准备工作，并且带有大量示例代码，助力管理系统敏捷开发。
相关核心依赖 :

Vue 2.6.11
Element UI 2.13.2
Vuex 3.1.2

与 Trinity 的区别

Trinity 基于 vue-element-admin, 也是一款优秀的后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，并提供了丰富的功能组件。
相关核心依赖:

Vue 2.6.1
Element UI 2.15.3
Vuex 3.1.0

除了使用基础框架的划分, 相关核心依赖版本几乎一致, 代表着俩个前端框架平台代码几乎百分百兼容

新的改变

Fast Tortoise 进行了一些功能拓展与新技术的引入，除了标准的页面展示，增加了如下几点新功能：

全新的界面设计 ，将会带来全新的用户体验；
设置你喜爱的风格样式，Fast Tortoise 将页面样式以可配置形式 进行展示；
增加了 卡片拖拽 功能，你可以将指定页面的元素进行拖拽；
全新的 Lowdb 框架引用；
增加了支持Markdown 导入 插件；
增加了 路由快照 页面存储功能；
引入了 Trintiy 常用 部分工具类
增加了 顶部菜单, 页面搜索, 日志打印 等功能

亮点

D2Admin 底层支持 AppWorks, AppWorks 正式版本定位前端研发工具集，源自淘系自研前端研发工具

AppWorks 是社区受到开发者广泛关注的 VS Code 套件，在 VS Code 插件市场有 2w+ 的下载量，是 VS Code
插件市场受开发者喜爱的百佳套件之一，多次登陆 VS Code 插件市场周/月趋势榜。在淘宝内部，AppWorks 日均创建项目 50+
次，日均区块被使用 50+ 次，DAU 400+。

快速环境快速集成
海量物料组件快速开发

以上功能意味着 Fast Tortoise 具有快速上手, 快速开发的一些基础能力!

短期进度

AppWorks 快速搭建环境

下载方案1.

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

下载方案2.

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

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

在这里插入图片描述

菜单

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

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

静态菜单

源数据位于代码中的目录 :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'
    }
  ]
}

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

动态菜单

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

在这里插入图片描述

物料使用

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

系统消息

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

封装代码:

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

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

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