Write the Code. Change the World.

分类目录
3月 13

LogicFlow 默认有一些节点。但有时候,默认的节点完成不了项目需求。这个就需要自定义节点,刚好LogicFlow 支持自定义节点。

https://07.logic-flow.cn/guide/advance/customNode.html

如上图,现在需要一个输入口,n 个输出口,这个 n 是大于 0 的整数。一般也就最多 10 以下的整数吧。默认的节点就不支持,这里就需要自定义了。

要解决以下问题。

  • 节点支持 resize (继承 RectResize,就可以实现)
  • 根据输出口的数字动态生成锚点(1 个默认输入锚点, n 个输出锚点)
  • 在锚点旁边加入数字进行标识(大于 1 个的时候,需要和数据一一对应,所以需要标识)

继续阅读

3月 06

daisyui 的 Dropdown 组件,点击展开对象时,怎么自动关闭展开对象呢?daisyui 默认没提供这个功能。只需要在点击对象时,触发 blur 方法即可。

if (document.activeElement instanceof HTMLElement) {
    document.activeElement.blur()
}
1月 10

demo

https://meet.livekit.io/

工具库

https://livekit.io/

https://github.com/feross/simple-peer

技术博客

https://juejin.cn/post/7271974618565705785

服务端 sdk

https://github.com/livekit/server-sdk-go

https://github.com/livekit/livekit

小程序支持 webrtc 吗

https://developers.weixin.qq.com/community/develop/doc/000e8cb70b003807069ff683856c00?_at=1704840491166

https://developers.weixin.qq.com/community/develop/doc/00006083a3cf1001b60f413ac5b400?_at=1704607708116

11月 28

tauri dev 项目的时候,axios 是没有问题。当 build 后,安装使用,axios 就会出现问题。这个时候,需要给 axios 增加一个 adapter 就好。 当然 tauri 的 allowlist 的配置也是要好的。

https://github.com/persiliao/axios-tauri-api-adapter

操作

pnpm add axios-tauri-api-adapter

# 在封装 axios 的地方加入下边的配置
import axiosTauriApiAdapter from 'axios-tauri-api-adapter';

const defaultConfig: AxiosRequestConfig = {
  baseURL: VITE_APP_BASE_API,
  timeout: 20000,
  withCredentials: false,
  adapter: axiosTauriApiAdapter
}

然后修改 tauri.conf.json 文件。

  "tauri": {
    "allowlist": {
      "all": true,
      "http": {
        "all": true,
        "request": true,
        "scope": ["http://**", "https://**"]
      }
    }
  }

好了,再去打包就没问题了。

pnpm tauri build
11月 25

将 web 项目打包成桌面应用程序是一种常见的方式。用到的工具有 electron 和 tauri 等。这里使用 tauri。

准备工作

  1. 安装配置 tarui 环境。 https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites
  2. 准备一个 web 项目。

tauri 是可以从零开始创建项目,然后去完善项目的。但是,有的时候,项目已经完成了,这个时候,就需要在项目中加入 tauri。然后再构建打包了。

继续阅读

11月 24

用了 ts 的 vue3 项目,会经常遇到类型问题。组件问题也是类型问题的一种。这里简单总结一下写法。

组件类型声明

无论是第三方库,还是自定义组件,都可以通过这种方式来搞定。

这里分别以 element plus 中的组件和自定义组件为例。

# element plus 的 ElTable 组件
<template>
<el-table ref = "userTableRef">
    <el-table-column property="nickname" label="昵称" />
</el-table>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ElTable } from "element-plus";

const userTableRef = ref<InstanceType<typeof ElTable>>()
</script>

下边是自定义组件。

<template>
<MediaPlayer ref="mediaPlayer" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import MediaPlayer from '@/components/MediaPlayer/MediaPlayer.vue'

const mediaPlayer = ref<InstanceType<typeof MediaPlayer>>()
</script>

最后

定义好了类型后,代码提示就很友好了。

11月 20

在 ts 中,如果对一个接口对象的属性进行 delete 的话。该 delete 必须为可选属性。否则就会报 The operand of a 'delete' operator must be optional. 错误。\

比如:

interface User {
    nickname: string 
    gender: number
}

const user:User = {nickname: 'vini', gender: 1}

delete user['gender']

# 这个时候就会报错。只需将 User 接口的 gender 定义改为 下边这样即可

interface User {
    nickname: string 
    gender?: number
}

在 strictNullChecks 中使用 delete 运算符时,操作数现在必须为 any、unknown、never 或为可选(因为它在类型中包含 undefined)。否则,使用 delete 运算符是错误的。