commit
521554670d
19 changed files with 6185 additions and 0 deletions
@ -0,0 +1,7 @@
|
||||
node_modules |
||||
.DS_Store |
||||
dist |
||||
*.local |
||||
index.html |
||||
.remote-assets |
||||
components.d.ts |
||||
@ -0,0 +1,11 @@
|
||||
# Welcome to [Slidev](https://github.com/slidevjs/slidev)! |
||||
|
||||
To start the slide show: |
||||
|
||||
- `npm install` |
||||
- `npm run dev` |
||||
- visit http://localhost:3030 |
||||
|
||||
Edit the [slides.md](./slides.md) to see the changes. |
||||
|
||||
Learn more about Slidev on [documentations](https://sli.dev/). |
||||
@ -0,0 +1,37 @@
|
||||
<script setup lang="ts"> |
||||
import { ref } from 'vue' |
||||
|
||||
const props = defineProps({ |
||||
count: { |
||||
default: 0, |
||||
}, |
||||
}) |
||||
|
||||
const counter = ref(props.count) |
||||
</script> |
||||
|
||||
<template> |
||||
<div flex="~" w="min" border="~ main rounded-md"> |
||||
<button |
||||
border="r main" |
||||
p="2" |
||||
font="mono" |
||||
outline="!none" |
||||
hover:bg="gray-400 opacity-20" |
||||
@click="counter -= 1" |
||||
> |
||||
- |
||||
</button> |
||||
<span m="auto" p="2">{{ counter }}</span> |
||||
<button |
||||
border="l main" |
||||
p="2" |
||||
font="mono" |
||||
outline="!none" |
||||
hover:bg="gray-400 opacity-20" |
||||
@click="counter += 1" |
||||
> |
||||
+ |
||||
</button> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,16 @@
|
||||
[build] |
||||
publish = "dist" |
||||
command = "npm run build" |
||||
|
||||
[build.environment] |
||||
NODE_VERSION = "20" |
||||
|
||||
[[redirects]] |
||||
from = "/.well-known/*" |
||||
to = "/.well-known/:splat" |
||||
status = 200 |
||||
|
||||
[[redirects]] |
||||
from = "/*" |
||||
to = "/index.html" |
||||
status = 200 |
||||
@ -0,0 +1,16 @@
|
||||
{ |
||||
"name": "fast-iot-ppt", |
||||
"type": "module", |
||||
"private": true, |
||||
"scripts": { |
||||
"build": "slidev build", |
||||
"dev": "slidev --open", |
||||
"export": "slidev export" |
||||
}, |
||||
"dependencies": { |
||||
"@slidev/cli": "^0.48.0-beta.6", |
||||
"@slidev/theme-default": "latest", |
||||
"@slidev/theme-seriph": "latest", |
||||
"vue": "^3.4.19" |
||||
} |
||||
} |
||||
@ -0,0 +1,27 @@
|
||||
# Multiple Entries |
||||
|
||||
You can split your slides.md into multiple files and organize them as you want using the `src` attribute. |
||||
|
||||
#### `slides.md` |
||||
|
||||
```markdown |
||||
# Page 1 |
||||
|
||||
Page 2 from main entry. |
||||
|
||||
--- |
||||
src: ./subpage.md |
||||
--- |
||||
``` |
||||
|
||||
<br> |
||||
|
||||
#### `subpage.md` |
||||
|
||||
```markdown |
||||
# Page 2 |
||||
|
||||
Page 2 from another file. |
||||
``` |
||||
|
||||
[Learn more](https://sli.dev/guide/syntax.html#multiple-entries) |
||||
|
After Width: | Height: | Size: 151 KiB |
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 274 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 149 KiB |
|
After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 522 KiB |
@ -0,0 +1,400 @@
|
||||
--- |
||||
theme: seriph |
||||
background: https://source.unsplash.com/collection/94734566/1920x1080 |
||||
highlighter: shiki |
||||
lineNumbers: true |
||||
transition: slide-left |
||||
mdc: true |
||||
--- |
||||
|
||||
# Fast Iot Web |
||||
|
||||
工业互联网前端开源平台模版介绍 |
||||
|
||||
--- |
||||
layout: center |
||||
--- |
||||
|
||||
# 1. 模版基础 |
||||
|
||||
--- |
||||
layout: image-right |
||||
image: /vben.png |
||||
backgroundSize: contain |
||||
--- |
||||
|
||||
# 模版介绍 |
||||
|
||||
<a href='https://gitee.com/yudaocode/yudao-ui-admin-vben'>yudao-ui-admin-vben</a> <carbon-direction-straight-right /> <a href='https://github.com/vbenjs/vue-vben-admin'>vue-vben-admin</a> |
||||
|
||||
Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的 vue3、vite4、TypeScript 等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 |
||||
|
||||
- 最新技术栈: 使用 Vue3/vite2 等前端前沿技术开发 |
||||
- TypeScript: 应用程序级 JavaScript 的语言 |
||||
- 主题: 可配置的主题 |
||||
- 国际化: 内置完善的国际化方案 |
||||
- 权限: 内置完善的动态路由权限生成方案 |
||||
- 组件: 二次封装了多个常用的组件 |
||||
|
||||
<!-- |
||||
1. Vben 在 Vue3 刚推出时就出现了，一直迭代至今，目前最新版本是 v2.10.0, 而 yudao-ui-admin-vben fork 了 Vben, 大约是在 v.2.7.0 版本之前，所以目前的模版是基于 Vben 的，但是有一定的差距，其次 Vben 原维护者已经停止维护，目前由社区人员维护，目前有点过重了 |
||||
--> |
||||
|
||||
--- |
||||
layout: image-right |
||||
image: /fast-iot-web.png |
||||
backgroundSize: contain |
||||
--- |
||||
|
||||
# 模版技术栈 |
||||
|
||||
<div><a href='http://223.99.228.240:33000/liukai/fast-iot-web'><carbon:logo-github /> Fast iot web</a></div> |
||||
|
||||
<br/> |
||||
|
||||
- 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 |
||||
|
||||
<!-- |
||||
1. 目前仓库在 gitea，还没有放在 git 或 gitee 上 |
||||
2. vite 为什么不用最新版？后面会提及，这里暂时不介绍，vue、ant-design-vue 不用最新版的原因是 Slot 插槽 TS 类型有问题 |
||||
3. 强制 TS 类型安全，在提交时会执行 type:check |
||||
4. 没有 prettier，只需用 Eslint（因为个人原因，antfu 生态） |
||||
5. 这里主要列举了一些核心包，其他包看下 package.json |
||||
6. 目前仓库 git 提交比较混乱，因为改动较大，最后会整合一下 git 提交记录 |
||||
7. 强制使用 pnpm，基于 npx only-allow pnpm 这个命令 |
||||
--> |
||||
|
||||
--- |
||||
layout: image-right |
||||
image: /command.png |
||||
backgroundSize: contain |
||||
--- |
||||
|
||||
# 项目命令 |
||||
|
||||
<br /> |
||||
|
||||
- dev -> 开发环境 |
||||
- build -> 构建生产环境 |
||||
- type:check -> 执行 TS 检查 |
||||
- lint -> 执行 Eslint 检查 |
||||
- changelog -> 生成版本日志 |
||||
- release -> 版本发布 |
||||
|
||||
<!-- |
||||
1. changelog: 基于约定式提交规范生成版本日志 (git 提交记录要更细) |
||||
2. release: 集成了一个第三方库 bumpp ，自动发布版本，包含：修改版本号、执行 changelog 命令、创建版本提交记录、创建 Tag、推送提交记录和 Tag 到 Git 仓库，一般来说发版时直接执行 release 就可以了 |
||||
3. 后面有文章介绍这两个命令的集成 |
||||
4. 顺便讨论一个 Git 工作流的应用，git rebase + marge(fast forward) 与 git rebase + git merge --squash (/skwɒʃ/) |
||||
--> |
||||
|
||||
--- |
||||
layout: image-right |
||||
image: /dir.png |
||||
backgroundSize: contain |
||||
--- |
||||
|
||||
# 项目目录 |
||||
|
||||
- /build -> 构建项目代码，例如：vite config、plugin |
||||
- /api -> 后端请求交互 |
||||
|
||||
```plain |
||||
|-- user |
||||
-- index.ts |
||||
-- types.ts |
||||
``` |
||||
|
||||
- /views -> 页面 |
||||
|
||||
```plain{1,2,3,4} |
||||
|-- user |
||||
-- index.vue |
||||
-- data.ts |
||||
-- UserFormModal.vue |
||||
-- ?form.vue |
||||
``` |
||||
|
||||
<!-- |
||||
1. 多语言支持，但是没有怎么去使用 |
||||
2. css 使用 unocss |
||||
3. 下面的 types 目录是公共的类型 |
||||
4. data.ts 用法后面介绍 |
||||
5. components 目录下存放的是公共组件（与业务无关），如果是与业务有关的公共组件，可以新建 /views/components |
||||
6. 如果新建、编辑、详情是页面的话，可以增加 form.vue / detail.vue 小写开头的 .vue 文件（或者有更好的命名方式？） |
||||
--> |
||||
|
||||
--- |
||||
|
||||
# 菜单路由 |
||||
|
||||
路由使用的 `BACK` （后端路由模式），移除了 `ROLE` (角色权限) 和 `ROUTE_MAPPING` (路由映射) 两种模式。 |
||||
|
||||
新增路由在 系统管理 -> 菜单管理 页面动态增加： |
||||
|
||||
<div flex='~ gap-10px items-center' class='gap-[10px]'> |
||||
<img src='/menu-1.png' class='flex-1 w-0 shadow-lg'/> |
||||
<img src='/menu-2.png' class='flex-1 w-0 shadow-lg'/> |
||||
<img src='/menu-3.png' class='flex-1 w-0 shadow-lg'/> |
||||
</div> |
||||
|
||||
<!-- |
||||
1. 路由路径和组件路径一般是相同的 |
||||
2. 当开启 keep-alive 时，组件名称是必须且唯一 |
||||
3. 是否在菜单栏显示，用于添加不再菜单栏展示的页面（如：新增、编辑、详情或其他） |
||||
4. 路由遵从嵌套路由规则 |
||||
5. 所有子路由默认都会转为二级路由，所以不能存在二层以上的内嵌路由 |
||||
--> |
||||
|
||||
--- |
||||
|
||||
# 按钮权限 |
||||
|
||||
项目中存在三种权限判断方式，分别为： |
||||
1. 函数 |
||||
2. 组件 |
||||
3. 指令 |
||||
|
||||
```ts{1|3-5|7} |
||||
<button v-if="hasPermission(codes)">Create</button> |
||||
|
||||
<Authority :value="codes"> |
||||
<button>Create</button> |
||||
</Authority> |
||||
|
||||
<button v-auth="codes">Create</button> |
||||
``` |
||||
|
||||
推荐使用函数方式 |
||||
|
||||
--- |
||||
layout: center |
||||
--- |
||||
|
||||
# 2. 常用组件介绍 |
||||
|
||||
--- |
||||
|
||||
# BasicTable |
||||
|
||||
```ts{2|3|4,7-11|12-14|5,19-23} |
||||
<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> |
||||
``` |
||||
<!-- |
||||
1. 使用 hooks 方式 |
||||
2. useTable 支持泛型，但不用手动传递，会根据 api 的返回值自动推断 |
||||
3. Vue 泛型组件不能传递泛型，只能通过 Props 推断，但是我们使用 useTable 时，使用 register 传递的 props，所以就无法推断出来了 (这样可以获取到 slot 泛型支持) |
||||
4. 更多的使用，参考 Vben 和 ant-design Table 文档 |
||||
--> |
||||
|
||||
--- |
||||
|
||||
# BasicForm |
||||
|
||||
```ts{2-3|5-11|15} |
||||
<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> |
||||
``` |
||||
|
||||
<!-- |
||||
1. 使用 hooks 方式 |
||||
2. 目前 useForm 不支持泛型 (之前没加，但是加上最好，谁有兴趣的话可以做一下) |
||||
--> |
||||
|
||||
--- |
||||
|
||||
# BasicModal |
||||
|
||||
BasicModal 用法使用两个 `Hook` 实现，`useModal` 和 `useModalInner` |
||||
|
||||
useModal |
||||
|
||||
```ts{2,3|5,9|none} |
||||
<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> |
||||
``` |
||||
|
||||
<!-- |
||||
1. useModal 在父组件中使用 （如：user.vue） |
||||
2. useModal 支持泛型，可以约束 openModal 函数调用参数类型 |
||||
--> |
||||
|
||||
--- |
||||
|
||||
# BasicModal |
||||
|
||||
useInnerModal |
||||
|
||||
```ts{2|4-6|10} |
||||
<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> |
||||
``` |
||||
|
||||
<br/> |
||||
|
||||
<v-click> |
||||
|
||||
```ts |
||||
const [ModalComponent, { openModal }] = useModal(Component) |
||||
const { openModal } = useModal(Component) |
||||
|
||||
openModal(state) |
||||
``` |
||||
|
||||
</v-click> |
||||
|
||||
<!-- |
||||
1. $attrs 是必须的，它会将父组件的 register 传递下去 |
||||
2. 这种用法怎么样（探讨 Modal 新形势） |
||||
--> |
||||
|
||||
--- |
||||
|
||||
# Icon |
||||
移除了之前的 `<Icon />` 组件，使用 unocss presetIcon 代替, 图标集：<a href='https://icones.js.org/' target='__blank'>Icones</a> |
||||
|
||||
```html |
||||
<span class='i-ant-design:edit-outlined'></span> |
||||
``` |
||||
|
||||
项目集成了 Icones 中所有的图标集，但下面这些会更常用: |
||||
|
||||
- Ant Design Icons |
||||
- IonIcons |
||||
- Material Design Icons |
||||
- Carbon |
||||
|
||||
<br/> |
||||
|
||||
VsCode Plugins: |
||||
|
||||
- UnoCSS |
||||
- Iconify IntelliSense |
||||
|
||||
<!-- |
||||
1. Icon 是按需引入的（除了 Ant Design Icons） |
||||
2. 项目引入了 Ant Design Icons 所有的图标，用于 IconPicker 组件 |
||||
3. 其他的组件查看代码或者 Vben 文档 |
||||
--> |
||||
|
||||
|
||||
--- |
||||
layout: center |
||||
--- |
||||
|
||||
# 3. 其他 |
||||
|
||||
--- |
||||
|
||||
# 项目提交规范 |
||||
|
||||
项目使用 git hooks 强制约束代码规范与提交规范: |
||||
|
||||
1. 项目用一个简单的正则来校验 Git Message |
||||
|
||||
```ts |
||||
const commitRE |
||||
= /^(revert: )?(feat|fix|docs|style|refactor|perf|test|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/ |
||||
``` |
||||
<br> |
||||
|
||||
2. 使用 `type:check` 校验 TS 类型正确性 (执行时间会稍微有点长) |
||||
|
||||
--- |
||||
layout: image-right |
||||
image: https://source.unsplash.com/collection/94734565/1920x1080 |
||||
--- |
||||
|
||||
# 开源分享 |
||||
|
||||
- [ ] GitHub CICD 流程介绍 |
||||
- [ ] Git 提交规范与 changelog 生成 |
||||
- [ ] BasicForm TS 类型优化 |
||||
- [ ] BasicTable 与 UseTable 泛型支持 |
||||
- [ ] 更多 |
||||
|
||||
<br> |
||||
<br> |
||||
<br> |
||||
|
||||
<a href='https://www.yuque.com/g/yuqueyonghurkd3lk/lfm6ik/collaborator/join?token=QlhaZiT6IAREiGWC&source=book_collaborator# 邀请你共同编辑知识库《开源知识点总结》' target='__blank'> |
||||
语雀 - 开源知识点总结 |
||||
</a> |
||||
|
||||
--- |
||||
|
||||
# 下一步需要做的 |
||||
|
||||
1. 升级 Vue、Ant-design 版本 (等待 ant-design 更新) |
||||
2. 解决循序引用问题（复杂度较高） |
||||
3. 树形 Table 不支持异步加载 |
||||
4. BasicTree 组件异步加载不生效（BUG） |
||||
5. 重复组件问题（BasicTree / ApiTree） |
||||
6. 完善系统管理、新增产品、设备、监控页面 |
||||
7. 样式调整？ |
||||
|
||||
<!-- |
||||
1. 目前 Table 异步加载，依靠 onExpand 事件实现 |
||||
2. PR 提交，与 review |
||||
--> |
||||
@ -0,0 +1,9 @@
|
||||
/* eslint-disable no-console */ |
||||
|
||||
// #region snippet
|
||||
function hello() { |
||||
console.log('Hello from snippets/external.ts') |
||||
} |
||||
// #endregion snippet
|
||||
|
||||
export default hello |
||||
Reference in new issue