博客 (158)

展开“订单/配送”，选择“配送管理”

在“运费模版”框中点击“切换”

即可新建、编辑或切换默认运费模板。

第一步：在电脑版微信左侧菜单中打开“收藏”，然后“新建笔记”

第二步：添加文件，选择你要上传的视频文件

上传完成后在“收藏”中可以看到这个笔记

第四步：打开手机微信 - 我 - 收藏，打开这个笔记，点击播放视频，长按屏幕 - 转发给朋友。这样发送的视频是清晰无损的。值得一提的是，在电脑微信的收藏中转发仍然是模糊的。

本文过程较为复杂，且部分内容已无法实现，建议点击这里查阅最新的操作方法！

前言：本文操作需要你具备浏览器安装和使用扩展插件的能力、以及简单的使用命令行的能力。

第一步：下载视频

首先我使用 Edge 浏览器（Chrome 操作类似，不过安装扩展需要科学上网）。

2023 年初的时候，用 FetchV 这个扩展是非常方便的，它会自动嗅到网页中的视频，即使没有嗅到也可以用录制的方式来保存。

但到了过了一两个月发现 FetchV（及其马甲）经常打不开，或者无法嗅到视频流，更别提录制了。

所以我找到了另一款专业视频下载神器：

当然它的马甲们用法也是大同小异，主界面是这样的：

开启捕获，同意下载多个文件，然后播放视频，耐心等待。

心急的朋友可以用修改播放速度的扩展（如 视频加速减速控制），例如用 16 倍速，那么一个 16 分钟的视频用 1 分钟就播放完成了。（或者在 F12 的控制台中使用 JS 代码加速：document.querySelector('video').playbackRate = 16; ）

等小浮框提示“捕获完成 点击下载”的时候就可以保存到磁盘上了。

第二步：音频修复

下载后它会有两个 .mp4 文件保存到电脑上，其中较大的是视频部分，较小的是音频部分。

但是有个小问题是，这个音频文件用 Windows 自带播放器播放正常，用 potplayer 等第三方播放器或者一些视频编辑软件播放就会有问题。

我在 Microsoft Store 中找了一款叫 Movie Maker - Video Editor 的应用，

在这个软件中添加刚才的只有音轨的视频文件会提示转码，转码后的 .mp4 文件音轨就正常了。

具体步骤是依次点击“Create New Project”，“Add clip”，“Photo/Video”，选择文件后“Transcode”，保存以后默认会在文件名后加上“ (Transcoded).mp4”。

第三步：音视频合成

接下来是合成视频和音频，将视频文件命名为 v.mp4，音频文件命名为 a.mp4。

在 FFmpeg 官网下载 Windows 版，然后使用这个命令从音频文件中提取音轨：

ffmpeg -i a.mp4 -vn -acodec copy a.aac

再用这个命令将 v.mp4 的视频和 a.aac 的音频合成一个新的文件

ffmpeg -i v.mp4 -i a.aac -c:v copy -c:a copy -map 0:v:0 -map 1:a:0 output.mp4

相比于其它的视频转换工具，ffmpeg 直接提取合并的速度是极快的。

Tips：

• 小鹅通中学习过的课程再次打开会从上次关闭的地方开始播放，这会导致捕获不全，可以将进度条手动拖到末尾，这样它会停止播放，再次刷新就会从头开始播放。

• 浮框中“点击下载”可能没反应，估计是在合成文件，过几秒钟多点几下，不会重复下载。

• 如果要下载的视频比较长或者比较多，可以像我一样在虚拟机里进行，把视频播放器的音量开到最大，把操作系统的声音关闭。

从 2023 年 4 月的 22621.1635 版本起，Windows 11 支持在任务栏上显示“秒”。

需要安装 KB5025305 更新，家庭版从 Microsoft®Update Catalog 手动安装，其它版本直接在 Windows Update 中更新补丁。

然后只需在注册表中添加一个配置项即可，位置：

\HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced

新建 DWORD (32 位)值，名称为：ShowSecondsInSystemClock，把值改为 1。

不知道从哪个版本的 Chrome 或 Edge 开始，我们无法通过 ctrl+v 快捷键将时间格式的字符串粘贴到 type 为 date 的 input 框中，我们想办法用 JS 来实现。

方式一、监听 paste 事件：

const input = document.querySelector('input[type="date"]');
input.addEventListener('paste', (event) => {
    input.value = event.clipboardData.getData('text');
});

这段代码实现了从页面获取这个 input 元素，监听它的 paste 事件，然后将粘贴板的文本内容赋值给 input。

经测试，当焦点在“年”的位置时可以粘贴成功，但焦点在“月”或“日”上不会触发 paste 事件。

方式二、监听 keydown 事件：

const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
    if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
        event.preventDefault();
        var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
        input.value = clipboardData.getData('text');
    }
});

测试发现报错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'getData')

Uncaught TypeError: Cannot read properties of undefined (reading 'clipboardData')

看来 event 中没有 clipboardData 对象，改为从 window.navigator 获取：

const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
    if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
        event.preventDefault();
        window.navigator.clipboard.readText().then(text => {
            input.value = text;
        });
    }
});

缺点是需要用户授权：

仅第一次需要授权，如果用户拒绝，那么以后就默认拒绝了。

以上两种方式各有优缺点，选择一种适合你的方案就行。接下来继续完善。

兼容更多时间格式，并调整时区

<input type="date" /> 默认的日期格式是 yyyy-MM-dd，如果要兼容 yyyy-M-d 等格式，那么：

const parsedDate = new Date(text);
if (!isNaN(parsedDate.getTime())) {
    input.value = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
}

以 text 为“2023-4-20”举例，先转为 Date，如果成功，再转为英国时间格式“20-04-2023”，以“/”分隔，逆序，再以“-”连接，就变成了“2023-04-20”。

当然如果希望支持中文的年月日，可以先用正则表达式替换一下：

text = text.replace(/\s*(\d{4})\s*年\s*(\d{1,2})\s*月\s*(\d{1,2})\s*日\s*/, "$1-$2-$3");

处理页面上的所有 <input type="date" />

const inputs = document.querySelectorAll('input[type="date"]');
inputs.forEach((input) => {
    input.addEventListener(...);
});

封装为独立域

避免全局变量污染，使用 IIFE 函数表达式：

(function() {
  // 将代码放在这里
})();

或者封装为函数，在 jQuery 的 ready 中，或 Vue 的 mounted 中调用。

在 Vue 中使用

如果将粘贴板的值直接赋值到 input.value，在 Vue 中是不能同步更新 v-model 绑定的变量的，所以需要直接赋值给变量：

<div id="app">
    <input type="date" v-model="a" data-model="a" v-on:paste="fn_pasteToDateInput" />
    {{a}}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data: function () {
            return {
                a: null,
            }
        },
        methods: {
            fn_pasteToDateInput: function (event) {
                const text = event.clipboardData.getData('text');
                const parsedDate = new Date(text);
                if (!isNaN(parsedDate.getTime())) {
                    const att = event.target.getAttribute('data-model');
                    this[att] = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
                }
            },
        }
    });
    const vm = app.mount('#app');
</script>

示例中 <input /> 添加了 data- 属性，值同 v-model，并使用 getAttribute() 获取，利用 this 对象的属性名赋值。 

如果你的 a 中还有嵌套对象 b，那么 data- 属性填写 a.b，方法中以“.”分割逐级查找对象并赋值

let atts = att.split('.');
let target = this;
for (let i = 0; i < atts.length - 1; i++) {
    target = target[atts[i]];
}
this.$set(target, atts[atts.length - 1], text);

ChatGPT：

当你从 <textarea> 中获取到的数据中包含换行符时，如果直接在 Vue 模板中使用插值表达式 {{}} 显示，是无法保持换行的。因为在 HTML 中，多个连续的空格和换行符都会被视为一个空格，因此如果直接将 \n 显示在模板中，会被渲染成一个空格。

解决这个问题的方法之一是使用 CSS 样式来控制换行的显示。可以为显示数据的元素添加 white-space: pre-wrap; 样式，该样式可以保留换行符并自动换行。

例如，假设你的数据保存在 text 变量中，可以这样在模板中使用：

<pre style="white-space: pre-wrap;">{{ text }}</pre>

在上面的例子中，使用 <pre> 元素来包裹要显示的数据，并添加 white-space: pre-wrap; 样式，这样数据中的换行符就能被保留并自动换行了。

另外，如果你在 Vue 组件中使用了 v-html 指令来显示数据，也可以在数据中使用 <br> 标签来手动添加换行符，然后使用 v-html 来渲染数据。但是，这种方法需要注意 XSS 攻击的问题，因为 v-html 可以渲染任意的 HTML 标签和内容，如果数据中包含恶意代码，很容易被攻击者利用。

群晖系统暂时没有类似 TreeSize 的磁盘文件管理工具，但是我们可以用磁盘映射的方式将群晖系统上的目录挂载到电脑上。这样，在电脑上就可以用 TreeSize 扫描群晖上的磁盘文件了。具体步骤如下：

一、群晖上安装 WebDAV Server

二、启用 WebDAV Server

三、新建群晖用户

千万要设置好权限。

切换到“应用程序”选项卡，关闭除 WebDAV Server 以外的所有应用程序

切换到“权限”选项卡，勾选需要访问的目录

四、在电脑上安装 RaiDrive

从官网下载，免费版即可。

五、配置 RaiDrive

打开 RaiDrive，点击顶部的“添加”，选择“NAS”，选择“Synology”，并填相应的地址和账户

技巧：将群晖提供的外部访问地址（在 控制面板-外部访问 中查看）直接在浏览器上打开，如果与群晖在同一局域网，那么会跳转到 https://[IP].[QuickConnect ID].direct.quickconnect.cn:5001/，那么参照这个地址填入到 RaiDrive 中即可在局域网中连接；如果不在同一局域网，那么会跳转到公网地址，同样可以将公网地址填入，但必须在路由器上映射端口才能在外网映射磁盘到 NAS。

六、访问文件

一切顺利，你就可以在“此电脑”中看到新建的盘符，像访问本地磁盘一样访问群晖文件。

众所周知，VMware Workstation 中分配的硬盘大小与实际的 .vmdk 文件尺寸是不一致的。

譬如为虚拟机创建了一块 60GB 的硬盘，安装完系统后使用了 20GB 的空间，此时在宿主机上查看到的 .vmdk 的大小是 20GB。

当虚拟机的磁盘空间不足时，可以在 VMware 中扩展容量或添加硬盘。

扩展容量：虚拟机 - 设置 - 硬件 - 硬盘 - 扩展 - 设置最大磁盘大小。譬如设置为 160GB，那么虚拟机的磁盘 0 的大小会变成 160GB，C 盘 60GB 不变，在磁盘管理中可以将未分配的 100GB 创建为 D 盘。

添加硬盘：虚拟机 - 设置 - 硬件 - 添加 - 硬盘 - 设置最大磁盘大小。譬如设置为 100GB，那么虚拟机会增加一块大小为 100GB 的磁盘 1，在磁盘管理中可以将它创建为 100GB 的 D 盘。

当虚拟机内删除文件后，观察到 .vmdk 文件的大小并没有相应地减小，网上搜索后找到很多办法，但未测试成功。索性删除并重装系统比较方便，如果虚拟机里安装了许多软件不方便重装的朋友继续研究。今天终于发现原来 VMware 自带就有磁盘清理功能：虚拟机 - 管理 - 清理磁盘。

今天在控制台应用程序中删除和覆盖文件时，遇到指定路径的文件被禁止操作：

Access to the path is denied.

在网上找到的答案都是给所在目录添加 Everyone 的权限，尝试无果。

后来发现原因是被操作的文件被勾选了“只读”权限，取消就正常了。