非你网

该后台使用 vite + ts + pnpm + vue3 + element-plus + tailwindcss 等技术栈构成。没有添加任意可视化图标等插件。以最小功能，最基础功能展现。用户可以额外添加可使用的插件逻辑。

该后台后端使用 php8.2 + laravel 10 + mysql

该后台后端 go 语言版本开发中。将使用 gframe2.5.2

源码： https://github.com/vini123/simpleAdmin

在线体验： https://www.zeipan.com/admin

权限以及密码一键复位: https://v3test.yuepaibao.com/admin/api/reset

测试账号以及密码： zhoulin@xiangrong.pro、 111111 （如果发现登录不了，可一键复位谢谢）

阅读全文 >>

约拍宝，专为摄影爱好者准备的交互平台。可去官网扫码体验。

ios 已上架，欢迎使用

官网：
https://www.yuepaibao.com

https://www.yuepaibao.net

阅读全文 >>

阅读全文 >>

https://beikeshop.com/

阅读全文 >>

https://www.kylinos.cn/

离线安装

1. 查看系统架构

   uname -p

   根据输出结果（如 x86_64 或 aarch64），方便选择对应的 Docker 离线安装包。

2. 访问 docker 官网，下载对应的包。 https://download.docker.com/linux/static/stable/
   当前最新版本是 27.5.1。完整下载地址是。https://download.docker.com/linux/static/stable/aarch64/docker-27.5.1.tgz

3. 将下载好的包先解压到某个目录。比如 /opt 目录下。

   tar -zxvf docker-27.5.1.tgz -C /opt

4. 将解压好的 Docker 二进制文件移动到 /usr/local/bin 目录下。

   mv /opt/docker/* /usr/local/bin

5. 配置 Docker 服务。创建并编辑/usr/lib/systemd/system/docker.service文件。

[Unit]
Description=Docker Application Container Engine
Documentation=https://docs.docker.com
After=network-online.target firewalld.service
Wants=network-online.target

[Service]
Type=notify
ExecStart=/usr/local/bin/dockerd
ExecReload=/bin/kill -s HUP $MAINPID
LimitNOFILE=infinity
LimitNPROC=infinity
TimeoutStartSec=0
Delegate=yes
KillMode=process
Restart=on-failure
StartLimitBurst=3
StartLimitInterval=60s

[Install]
WantedBy=multi-user.target

6. 设置 docker.service 权限，启动，并设置自启动。

chmod +x /usr/lib/systemd/system/docker.service

systemctl daemon-reload
systemctl start docker
systemctl enable docker

7. 查看 docker 版本

   docker -v

只安装 docker 还不够，还得安装个 docker-compose

安装 docker-compose

1. 打开下载地址： https://github.com/docker/compose/tags ,根据系统选择对应的版本,下载到 /opt 目录下。

wget wget https://github.com/docker/compose/releases/download/v2.32.4/docker-compose-linux-aarch64

2. 移动到 /usr/local/bin 下，并设置权限。

v docker-compose-linux-aarch64 /usr/local/bin/docker-compose

chmod +x /usr/local/bin/docker-compose

docker-compose --version

配置镜像源

如果不配置镜像源，国内很难下载到想要的镜像。配置镜像源是很必须的。

mkdir /etc/docker

vim /etc/docker/daemon.json
#内容如下
{
  "registry-mirrors": [
    "https://docker.1ms.run",
    "https://docker.xuanyuan.me"
    ]
}

systemctl daemon-reload
systemctl restart docker

参考：https://cloud.tencent.com/developer/article/2485043

阅读全文 >>

The left-hand side of an assignment expression may not be an optional property access.t ts 中，这个报错通常是在给可能为空或undefined的对象赋值引起的。

使用可选链操作符 ?. 来给一个可能为 undefined 的对象赋值也会引起上边这个错误。如：

obj?.name = '123'

?.链式操作符仅用于读取属性或调用方法，而不能用于赋值。

解决方法

1. 使用 if 判断

if (obj) {
    obj.name = '123'
}

2. 使用逻辑与操作符 &&

   obj && (obj.name = '123')

3. 使用非空断言操作符
   如果你确定对象不会是 undefined 或 null，可以使用非空断言操作符（!）

   obj!.name = value

   但这种方法比较危险，因为如果 obj 确实是 undefined 或 null，运行时会抛出错误

阅读全文 >>

前端 html 页面中，选择上传视频文件，获取视频文件的长度以及截取封面是个很常见的功能。前端 js 也能实现这个功能。

流程： file -> loadedmetadata(获取视频元信息)->currentTime(定格到视频的位置)->绘制到 canvas->转换成图片

1. 通过 input(file) 选择文件。
   https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file

   <div>
   <label class="upload-btn" for="video">
       <span class="text">上传</span>
   </label>
   <input class="hidden" id="video" name="video" type="file" accept="video/mp4" @change="changeVideo" />
   </div>

2. 获取视频元信息。
   https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

使用 createObjectURL 创建的URL是一个blob:开头的临时路径，这个路径可以在浏览器中直接访问，访问到的内容就是上传的视频文件。当页面关闭后，此路径也随之失效。

function changeVideo() {
    const fileInput: HTMLInputElement = document.getElementById('video') as HTMLInputElement
    const files: FileList = fileInput?.files as FileList
    const file = files[0]

    const video = document.createElement('video')
    video.src = URL.createObjectURL(file)
    video.addEventListener('loadedmetadata', function () {
        console.log(video.duration)
    })
}

3. 定格到视频位置

   // 设置视频自动播放
   video.autoplay = true
   // 设置视频播放的时间(方便截图)
   video.currentTime = 1

4. 绘制 canvas

   const canvas = document.createElement("canvas");
   canvas.width = video.videoWidth;
   canvas.height = video.videoHeight;
   const ctx = canvas.getContext("2d");
   if (ctx) {
   ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
   // document.body.appendChild(canvas);
   }

5. 将 canvas 转换成图片

   canvas.toBlob((blob) => {
   if (blob) {
   const url = URL.createObjectURL(blob);
   }
   });

完整的 ts。

interface VideoInfo {
    name: string
    width: number
    height: number
    thumbnail?: string
    duration?: number
}

function getVideoInfo(file: File, maxWidth = 320) {
    return new Promise<VideoInfo>((resolve) => {
        const index = file.name.lastIndexOf('.')
        const name = index > 0 ? file.name.substring(0, index) : ''
        const videoMedia: VideoInfo = {
            name,
            width: 0,
            height: 0
        }

        const video = document.createElement('video')
        video.src = URL.createObjectURL(file)
        video.addEventListener('loadedmetadata', function () {
            videoMedia.width = video.videoWidth
            videoMedia.height = video.videoHeight
            videoMedia.duration = video.duration
        })

        // 监听视频跳转完成事件
        video.addEventListener('seeked', function () {
            // 创建画布并绘制视频帧
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')

            if (video.videoWidth > maxWidth) {
                canvas.width = maxWidth
                canvas.height = Math.round((maxWidth / video.videoWidth) * this.videoHeight)
            } else {
                canvas.width = video.videoWidth
                canvas.height = video.videoHeight
            }

            if (ctx) {
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
                canvas.toBlob((blob) => {
                    if (blob) {
                        videoMedia.thumbnail = URL.createObjectURL(blob)
                        resolve(videoMedia)
                    } else {
                        resolve(videoMedia)
                    }
                })
            } else {
                resolve(videoMedia)
            }
            // 释放创建的临时URL
            // URL.revokeObjectURL(video.src)
        })

        // 设置视频自动播放
        video.autoplay = true
        // 设置视频播放的时间(方便截图)
        video.currentTime = 1
    })
}

阅读全文 >>

局域网内，即使不配置 stun/turn， webrtc 也是能音视频通话。如果在广域网环境，必须得有 turn 服务。那么自己构建一个 turn 服务就很有必要。不过广域网的 webrtc 对带宽的消耗也是很大。

STUN
STUN（Session Traversal Utilities for NAT，NAT 会话穿越应用程序）是一种网络协议，它允许位于NAT（或多重NAT）后的客户端找出自己的公网地址，查出自己位于哪种类型的NAT之后以及NAT为某一个本地端口所绑定的 Internet 端端口。这些信息被用来在两个同时处于 NAT 路由器之后的主机之间创建 UDP 通信。该协议由 RFC 5389 定义。(提供客户端检测自己的公共 IP 地址和端口)

STUN 并不是每次都能成功的为需要 NAT 通话设备分配 IP 地址的，P2P 在传输媒体流时，使用的本地带宽，在多人视频通话的过程中，通话质量的好坏往往需要根据使用者本地的带宽确定。

TURN
TURN 的全称为 Traversal Using Relays around NAT，是 STUN/RFC5389 的一个拓展，主要添加了 Relay 功能。如果终端在 NAT 之后， 那么在特定的情景下，有可能使得终端无法和其对等端（peer）进行直接的通信，这时就需要公网的服务器作为一个中继， 对来往的数据进行转发。这个转发的协议就被定义为 TURN。

在 STUN 分配公网 IP 失败后，可以通过 TURN 服务器请求公网 IP 地址作为中继地址。这种方式的带宽由服务器端承担，在多人视频聊天的时候，本地带宽压力较小，并且，根据 Google 的说明，TURN 协议可以使用在所有的环境中。（中继流量，当点对点连接不可用时，Coturn 会接管通信。）

ICE 跟 STUN 和 TURN 不一样，ICE 不是一种协议，而是一个框架（Framework），它整合了 STUN 和 TURN。coturn 开源项目集成了 STUN 和 TURN 的功能。

阅读全文 >>

要实现前端 js 通过 url 给 unity webgl 传参，可以通过两步来实现。第一步是 unity 调用 js 脚本。第二步是将参数给到 url。

unity webgl 和 js 交互 https://docs.unity3d.com/cn/2018.4/Manual/webgl-interactingwithbrowserscripting.html

这个是从 Unity 5.6 开始，5.6 和以后的版本可以这样使用。

步骤

1. unity 端在 Assets 文件夹中的 Plugins 文件夹下新建 default.jslib 文件，填入一下代码。

mergeInto(LibraryManager.library, {
  GetURLParam: function(key) {
    var params = new URLSearchParams(window.location.search)
    var returnStr = params.get(key)
    if (returnStr) {
      var bufferSize = lengthBytesUTF8(returnStr) + 1
      var buffer = _malloc(bufferSize)
      stringToUTF8(returnStr, buffer, bufferSize)
      return buffer
    }
    return null
  }
});

如果要返回字符串给 unity 用，必须要经过

      var bufferSize = lengthBytesUTF8(returnStr) + 1
      var buffer = _malloc(bufferSize)
      stringToUTF8(returnStr, buffer, bufferSize)

处理。

2. unity 调用。

   
   using UnityEngine;
   using System.Runtime.InteropServices;

public class NewBehaviourScript : MonoBehaviour {
[DllImport("__Internal")]
private static extern string GetURLParam(string key);

void Start() {
    string step = GetURLParam("step");
    Debug.Log(step);
}

}

阅读全文 >>

这里使用 pnpm + vite 构建 官网：https://nuxt.com/docs/getting-started/installation

安装

pnpm dlx nuxi@latest init vini123

cd vini123

pnpm install

pnpm  dev -o

配置 typescript

https://nuxt.com/docs/guide/concepts/typescript

pnpm add -D vue-tsc typescript

npx nuxi typecheck

修改 nuxt.config.ts 配置。

export default defineNuxtConfig({
  typescript: {
    typeCheck: true,
    strict: true
  }
})

ui 框架

https://primevue.org/

https://daisyui.com/

阅读全文 >>

tauri 2 默认打出的安装包是英文的。配置下，就可以打出中文安装包。

操作

修改 src-tauri/tauri.conf.json 文件，在 bundle 节点下追加 windows 节点（默认是没有的），然后将 wix 的 language 设置为 zh-CN 即可。

  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/icon.png",
      "icons/128x128.png",
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ],
    "windows": {
      "allowDowngrades": true,
      "certificateThumbprint": null,
      "digestAlgorithm": null,
      "nsis": null,
      "signCommand": null,
      "timestampUrl": null,
      "tsp": false,
      "webviewInstallMode": {
        "silent": true,
        "type": "downloadBootstrapper"
      },
      "wix": {
        "language": "zh-CN"
      }
    }
  }

阅读全文 >>

自古以来，对于桌面应用，系统托盘是不可缺少的一部分。tauri 2 也是一样。

官网文档：https://v2.tauri.app/learn/system-tray/
参考博客：https://blog.csdn.net/xiaoyuanbaobao/article/details/143781484

对于 tarui 2，很多服务端的功能，前端也可以实现。它会提供一套 api，使得前端可以构建服务端的能力。当然，也可以在服务端去实现，然后用前端去调用。

简单记录一下

有上边的文档和博客，就可以完成基础的托盘创建。这里做以下简单的记录。

阅读全文 >>

1. Error failed to bundle project: https://github.com/wixtoolset/wix3/releases/download/wix3141rtm/wix314-binaries.zip: Connection Failed: Connect error: 由于连接方在一段时间后没有正确答复或连接的主机没有反 应，连接尝试失败。 (os error 10060)

执行 pnpm tauri build，然后就会遇到上边这个问题。不管你是否用了梯子，都会出现这个问题。的却是有点坑。既然上边提示下载 zip 失败，那就手动下载下来，然后解压放到对应的位置就可以。这里放在

C:\Users\{user}\AppData\Local\tauri 下，可以在终端中使用 cd ~/AppData/Local/tauri 即可达到。然后将文件夹重命名为 WixTools314 即可，这个很重要，一定要命名为 WixTools314 而不是 WixTools

2. Error failed to bundle project: error running light.exe: failed to run C:\Users\Windows\AppData\Local\tauri\WixTools314\light.exe

编辑 tauri.conf.json ，bundle 节点中新增以下配置。

    "windows": {
      "allowDowngrades": true,
      "certificateThumbprint": null,
      "digestAlgorithm": null,
      "nsis": null,
      "signCommand": null,
      "timestampUrl": null,
      "tsp": false,
      "webviewInstallMode": {
        "silent": true,
        "type": "downloadBootstrapper"
      },
      "wix": {
        "language": "zh-CN"
      }
    }

主要就是 wix 的 language 一定要设置成 zh-CN。这个是配置中，包名使用中文引起的。

参考

https://blog.csdn.net/qq_41614928/article/details/128145938

https://blog.csdn.net/weixin_44786530/article/details/143132166

阅读全文 >>