博客 (165)

从 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); // vue2
target[atts[atts.length - 1]] = text; // vue3

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 的权限，尝试无果。

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

中国蚁剑

https://github.com/AntSwordProject

https://github.com/AntSwordProject/AntSword-Loader

http://t.zoukankan.com/liang-chen-p-14181806.html

使用说明：

下载 AntSword-Loader 和 antSword 并解压；

打开 AntSword.exe，初始化时选择 antSword 目录；

右键“添加数据”，填 URL，选择连接类型，以 PHP 为例，服务器上放置一个 PHP 文件，格式如：

<?php @ev删除这七个汉字al($_POST['value']); ?>

那么，“连接密码”就填 POST 的参数名 value。

添加完成，双击可打开树状菜单，显示服务器上所有有权限的文件。

Burp：篡改请求（譬如上传图片时将文件名改为.php，并添加shell脚本）

https://portswigger.net/burp

使用方法：https://zhuanlan.zhihu.com/p/537053564

一句话木马：https://www.icode9.com/content-4-1081174.html

错误 TS5055 无法写入文件“***.js”，因为它会覆盖输入文件。

添加 tsconfig.json 文件有助于组织包含 TypeScript 和 JavaScript 文件的项目。有关详细信息，请访问 https://aka.ms/tsconfig。

检查“输出”窗口，找到“error”的行，并修复该错误。

一种可能的情况是，使用了 vue3 的 computed 计算属性。原因未知，尝试又定义了一个变量并使用 watch 侦听原变量来给它赋值，同样报错。

第一步，创建用户和 AccessKey

登录阿里云控制台后，从头像处进入 AccessKey 管理

“开始使用子用户 AccessKey”

点击“创建用户”，填写用户名（本文以 oss-bbs 为例），并勾选“Open API 调用访问”

点击确定创建成功，可以看到 AccessKey ID 和 AccessKey Secret

第二步，创建权限策略

在阿里云控制台左侧菜单“RAM 访问控制”中展开“权限管理”，选择“权限策略”

点击“创建权限策略”，切换到“脚本编辑”

输入以下策略文档（JSON 格式）

{
    "Version": "1",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                    "oss:ListBuckets",
                    "oss:GetBucketStat",
                    "oss:GetBucketInfo",
                    "oss:GetBucketAcl" 
                      ],    
            "Resource": "acs:oss:*:*:*"
        },
        {
            "Effect": "Allow",
            "Action": [
                    "oss:Get*",
                    "oss:Put*",
                    "oss:List*",
                    "oss:DeleteObject"
                    ],
            "Resource": "acs:oss:*:*:bbs"
        },
        {
            "Effect": "Allow",
            "Action": [
                    "oss:Get*",
                    "oss:Put*",
                    "oss:List*",
                    "oss:DeleteObject"
            ],
            "Resource": "acs:oss:*:*:bbs/*"
        }
    ]
}

脚本中第一段表示允许用户登录，第二段表示允许操作 Bucket，第三段表示允许操作 Bucket 内的文件对象。

示例中的 bbs 是 Bucket Name，请修改为自己的 Bucket 名称。

点击下一步，填写名称，确定即可。

第三步，添加用户权限

转到“用户”页面，在刚才创建的用户行“添加权限”

切换到“自定义策略”，将上一步创建的权限策略添加到右侧“已选择”区

确定。

相关信息：

You have no right to access this object because of bucket acl.