fast-iot-slidev/slides.md

theme	background	highlighter	lineNumbers	transition	mdc
seriph	https://source.unsplash.com/collection/94734566/1920x1080	shiki	true	slide-left	true

Fast Iot Web

工业互联网前端开源平台模版介绍

---

layout: center

1. 模版基础

---

layout: image-right image: /vben.png backgroundSize: contain

模版介绍

yudao-ui-admin-vben vue-vben-admin

Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的 vue3、vite4、TypeScript 等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。

• 最新技术栈: 使用 Vue3/vite2 等前端前沿技术开发
• TypeScript: 应用程序级 JavaScript 的语言
• 主题: 可配置的主题
• 国际化: 内置完善的国际化方案
• 权限: 内置完善的动态路由权限生成方案
• 组件: 二次封装了多个常用的组件

---

layout: image-right image: /fast-iot-web.png backgroundSize: contain

模版技术栈

Fast iot web

• vue@3.3.8 -> 最新 vue@3.4.19
• vite@4.5.1 -> 最新 vite@5.1.4
• ant-design-vue@4.0.8 -> 最新 ant-design-vue@4.1.2
• typescript@5.3.3
• unocss@0.58.3
• @antfu/eslint-config@2.6.2
• node>=18.12.0
• pnpm>=8.10.0

---

layout: image-right image: /command.png backgroundSize: contain

项目命令

• dev -> 开发环境
• build -> 构建生产环境
• type:check -> 执行 TS 检查
• lint -> 执行 Eslint 检查
• changelog -> 生成版本日志
• release -> 版本发布

---

layout: image-right image: /dir.png backgroundSize: contain

项目目录

• /build -> 构建项目代码，例如：vite config、plugin
• /api -> 后端请求交互

|-- user
  -- index.ts
  -- types.ts

• /views -> 页面

|-- user
  -- index.vue
  -- data.ts
  -- UserFormModal.vue
  -- ?form.vue

---

菜单路由

路由使用的 BACK （后端路由模式），移除了 ROLE (角色权限) 和 ROUTE_MAPPING (路由映射) 两种模式。

新增路由在 系统管理 -> 菜单管理 页面动态增加：

---

按钮权限

项目中存在三种权限判断方式，分别为：

1. 函数
2. 组件
3. 指令

<button v-if="hasPermission(codes)">Create</button>

<Authority :value="codes">
  <button>Create</button>
</Authority>

<button v-auth="codes">Create</button>

推荐使用函数方式

---

layout: center

2. 常用组件介绍

---

BasicTable

<script setup lang='ts'>
  import { BasicTable, TableAction, useTable } from '@/components/Table'
  import { columns, searchFormSchema } from './data'
  import { getUserList } from '@/api/user'
  import type { SystemUser } from '@/api/user/types'

  const [registerTable, { reload }] = useTable({
    api(params) {
      return getUserList({ ...params, deptId: selectionDept.value })
    },
    columns,
    formConfig: {
      schemas: searchFormSchema,
    },
  })
</script>

<template>
  <BasicTable :api="async () => ([] as SystemUser[])" @register="registerTable">
    <template #bodyCell="{ record }">
      ...
    </template>
  </BasicTable>
</template>

---

BasicForm

<script setup lang='ts'>
  import { BasicForm, useForm } from '@/components/Form'
  import { formSchema } from './data'

  const [registerForm, { setFieldsValue, validate }] = useForm({
    labelWidth: 120,
    baseColProps: { span: 24 },
    schemas: formSchema,
    showActionButtonGroup: false,
    actionColOptions: { span: 23 },
  })
</script>

<template>
 <BasicForm @register="registerForm" />
</template>

---

BasicModal

BasicModal 用法使用两个 Hook 实现，useModal 和 useModalInner

useModal

<script setup lang='ts'>
  import { useModal } from '@/components/Modal'
  import UserFormModal from './UserFormModal.vue'

  const [registerModal, { openModal }] = useModal<string>()
</script>

<template>
  <UserFormModal @register="registerModal" />
</template>

---

BasicModal

useInnerModal

<script setup lang='ts'>
  import { BasicModal, useModalInner } from '@/components/Modal'

  const [registerModal] = useModalInner(async (id: string) => {
    ...
  })
</script>

<template>
  <BasicModal v-bind="$attrs" @register="registerModal" />
</template>

const [ModalComponent, { openModal }] = useModal(Component)
const { openModal } = useModal(Component)

openModal(state)

---

Icon

移除了之前的 <Icon /> 组件，使用 unocss presetIcon 代替, 图标集：Icones

<span class='i-ant-design:edit-outlined'></span>

项目集成了 Icones 中所有的图标集，但下面这些会更常用:

• Ant Design Icons
• IonIcons
• Material Design Icons
• Carbon

VsCode Plugins:

• UnoCSS
• Iconify IntelliSense

---

layout: center

3. 其他

---

项目规范

项目使用 git hooks 强制约束代码规范与提交规范:

1. 使用 Eslint，不使用 Prettier

2. 项目用一个简单的正则来约束 CommitLint

const commitRE
  = /^(revert: )?(feat|fix|docs|style|refactor|perf|test|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/

3. 移除了 Stylelint

4. 使用 type:check 校验 TS 类型正确性 (执行时间会稍微有点长)

---

layout: image-right image: https://source.unsplash.com/collection/94734565/1920x1080

开源分享

• GitHub CICD 流程介绍
• Git 提交规范与 changelog 生成
• BasicForm TS 类型优化
• BasicTable 与 UseTable 泛型支持
• 更多

语雀 - 开源知识点总结

---

下一步需要做的

1. 升级 Vue、Ant-design 版本 (等待 ant-design 更新)
2. 解决循序引用问题（复杂度较高）
3. 树形 Table 不支持异步加载
4. BasicTree 组件异步加载不生效（BUG）
5. 重复组件问题（BasicTree / ApiTree）
6. 完善系统管理、新增产品、设备、监控页面
7. 样式调整？

---

layout: end

End