Bilibili 用户备注 UI 使用说明

这是原B站一键备注的TypeScript + Alpinejs 完全重写的版本

原作者：pxoxq

代码仓库：https://github.com/kaixinol/Bilibili-User-Memo

本文档根据当前 UI 代码生成，面向使用者说明面板与调试窗口的功能和操作方式。

兼容性说明

不兼容的脚本：一切同时修改了备注的脚本
兼容的脚本：
- Bilibili 账号已注销修正
  
  兼容方式：让 Bilibili 账号已注销修正 比此脚本先运行即可。
  
  具体设置：油猴菜单栏 -> Edit -> Settings -> General -> Position，设置为1
会尽量兼容的脚本：
- the1812/Bilibili-Evolved 的全部功能
- SukkaW/Make-Bilibili-Great-Than-Ever-Before 的全部功能

暴露的API

使用方法：

const getBiliMemoAPI = (() => {
    let p = null;
    return () => p ??= new Promise(r => {
        const t = setTimeout(() => r(null), 200);
        window.dispatchEvent(new CustomEvent("biliMemo:request-api", {
            detail: (api) => { clearTimeout(t); r(api); }
        }));
    });
})();
(async () => {
    const api = await getBiliMemoAPI();
    if (api) {
        console.log("成功拿到了 API！");
        const user = api.getUserMemo("123");
        console.log("UID 123 的备注:", user?.memo);
        console.log("UID 123 的详细备注:", user?.memoDetail);
    }
})();

界面介绍

界面概览

备注管理面板固定在页面底部，可通过左下角的表情按钮开/关。
面板包含：显示模式切换、主题与样式设置、控制栏、备注列表、（可选）自定义 CSS。
用户列表以网格卡片展示，宽屏三列、窄屏自动变两列/一列。
油猴菜单可禁用/启用脚本是否在当前页面运行

昵称显示模式

昵称：仅显示昵称。
备注(昵称)：优先显示备注，括号内显示昵称。
昵称(备注)：优先显示昵称，括号内显示备注。
备注：仅显示备注。

用户卡片

头像与昵称：昵称可点击，打开对应的 Bilibili 主页。
昵称空间链接：按住 Alt 悬浮可临时切换为已注销形态（https://www.bilibili.com/list/<uid>），松开发开 Alt 或移开鼠标即复原；用于手动打开注销用户页面。已注销用户本来就显示该形态，不受影响。
默认头像（noface）用户可右键头像，手动填写头像 URL。
非默认头像用户可中键点击头像，手动填写头像 URL（可选同时关闭静默更新头像功能）。
BilibiliID：点击可复制，复制后短暂显示“已复制”；ID 过长时悬停整个信息区可展开查看完整 ID。
备注：点击进入编辑，Enter 或失焦自动保存；Shift + Enter 可强制将当前昵称保存为备注。
详细备注（memoDetail）：中键点击页面中已渲染的备注标签（或在面板卡片备注区右键）可打开详细备注对话框，用于填写长文本备注，失焦即自动保存。详细备注会同步显示在页面标题和元素 title 属性中。
删除：右上角垃圾桶图标删除单个用户。
注意：将备注清空会直接删除该用户记录（不会再弹确认）。

搜索与筛选

搜索框支持昵称、备注、详细备注、ID 模糊搜索，输入后按 Enter 执行搜索。
搜索框使用浏览器原生表单记忆，历史建议由浏览器自动管理。
简体、繁体中文可互通搜索，例如用“备注”也能搜到“備註”。
右侧“×”按钮清空搜索。
当搜索词命中「详细备注」时，对应卡片会显示一段带高亮的「详细备注」片段，便于定位匹配位置。

注销筛选

列表中若存在已注销用户，控制栏会出现「注销筛选」下拉，提供「全部 / 仅显示已注销 / 隐藏已注销」三态。
「仅显示已注销」只保留已注销账号；「隐藏已注销」则将其过滤掉。
该选项不持久化，每次打开面板自动重置为「全部」。

批量操作

点击“多选用户”进入多选模式，卡片左侧出现勾选框。
Ctrl + A（Windows/Linux）或 Cmd + A（macOS）在多选模式下对当前筛选结果执行全选/反选。
“删除所选用户”按钮会显示已选数量，未选择时不可用。
多选模式下选择用户后，“一键刷新数据”会变为“刷新所选”，只刷新已选用户。
多选模式下未选择用户时，刷新按钮不可用。

添加用户

点击 添加 可手动添加用户。
UID 与备注为必填项，UID 只支持数字。
详细备注（memoDetail）可选，用于填写长文本备注。
头像 URL 可选；留空时会自动获取头像，若账号已注销则使用默认头像并标记为已注销。

导入/导出

导入：选择 JSON 文件，支持旧格式；导入校验严格，字段不合法会提示错误而非静默忽略。
导入会自动“新增/更新”对应用户，并提示统计结果。
导出：按日期生成文件名，导出当前全部用户数据（含昵称、备注与详细备注 memoDetail）。

刷新数据

“一键刷新数据”会拉取最新昵称、头像，并同步更新账号的已注销状态（正常账号标记为未注销、已注销账号标记为已注销）。
非多选模式下刷新当前列表全部用户。
多选模式下仅刷新已选择的用户。
刷新过程中显示进度与计数，完成后自动恢复按钮状态。

静默更新头像

油猴菜单可开启/关闭"静默更新头像"功能（默认关闭）。
开启后，访问用户空间页时会自动将该用户的最新头像同步到备注列表。
中键修改非默认头像时，可选择同时关闭此功能以保护手动设置的头像。

默认预注入全部卡片

油猴菜单可开启/关闭"默认预注入全部卡片"功能（默认开启）。
开启后，页面加载时会预先注入所有用户卡片的备注。
关闭后，未打开面板前将延后加载列表，减少初始页面负担。

主题与样式

右侧太阳/月亮图标切换浅色/深色主题。
主题状态会持久保存，下次打开自动恢复。

自定义备注颜色

点击“自定义备注颜色”选择颜色，颜色预览块会同步显示。
中键点击可清除自定义颜色并恢复默认。

自定义备注样式（CSS）

右键点击“自定义备注颜色”可打开/关闭 CSS 编辑对话框。
支持完整 CSS 选择器，建议只作用于以下类名： .bili-memo-tag、.editable-textarea、.bili-memo-input
输入后约 1 秒自动应用，失焦也会立即应用。
若存在语法问题会显示“语法警告/错误/解析警告”。

示例：

.bili-memo-tag {
  font-style: italic;
  letter-spacing: 0.5px;
}
.editable-textarea {
  background: rgba(0, 0, 0, 0.08);
  border-bottom: 2px solid pink;
}

调试窗口（开发者）

调试窗口为可拖拽、可缩放浮窗，带性能监视（FPS / Long Tasks / Heap）。
可输入 CSS 选择器并“加入”，或点击“扫描”重新匹配元素。
规则列表支持启用/禁用、改名、改选择器、改颜色与删除。
被匹配元素会显示彩色覆盖框，便于定位 UI 区块。
该窗口通常仅在调试模式或开发场景中使用。

快捷与提示

表情按钮右键可修改开/关按钮文字。
ID 文本可点击复制，昵称点击打开主页。
多选模式下支持快捷键批量选择。
页面备注标签内已有选中文字（直接拖选即可）、或按住 Alt 点击时，都不会弹出输入框，可直接复制文字。双击选词请按住 Alt。

关于调试模式

建议在调试时，将 Editable 改成 Minimal，以防止样式污染。

加载中…

Bilibili 用户备注 UI 使用说明

这是原B站一键备注的TypeScript + Alpinejs 完全重写的版本

原作者：pxoxq

代码仓库：https://github.com/kaixinol/Bilibili-User-Memo

本文档根据当前 UI 代码生成，面向使用者说明面板与调试窗口的功能和操作方式。

兼容性说明

不兼容的脚本：一切同时修改了备注的脚本
兼容的脚本：
- Bilibili 账号已注销修正
  
  兼容方式：让 Bilibili 账号已注销修正 比此脚本先运行即可。
  
  具体设置：油猴菜单栏 -> Edit -> Settings -> General -> Position，设置为1
会尽量兼容的脚本：
- the1812/Bilibili-Evolved 的全部功能
- SukkaW/Make-Bilibili-Great-Than-Ever-Before 的全部功能

暴露的API

使用方法：

const getBiliMemoAPI = (() => {
    let p = null;
    return () => p ??= new Promise(r => {
        const t = setTimeout(() => r(null), 200);
        window.dispatchEvent(new CustomEvent("biliMemo:request-api", {
            detail: (api) => { clearTimeout(t); r(api); }
        }));
    });
})();
(async () => {
    const api = await getBiliMemoAPI();
    if (api) {
        console.log("成功拿到了 API！");
        const user = api.getUserMemo("123");
        console.log("UID 123 的备注:", user?.memo);
        console.log("UID 123 的详细备注:", user?.memoDetail);
    }
})();

界面介绍

界面概览

备注管理面板固定在页面底部，可通过左下角的表情按钮开/关。
面板包含：显示模式切换、主题与样式设置、控制栏、备注列表、（可选）自定义 CSS。
用户列表以网格卡片展示，宽屏三列、窄屏自动变两列/一列。
油猴菜单可禁用/启用脚本是否在当前页面运行

昵称显示模式

昵称：仅显示昵称。
备注(昵称)：优先显示备注，括号内显示昵称。
昵称(备注)：优先显示昵称，括号内显示备注。
备注：仅显示备注。

用户卡片

头像与昵称：昵称可点击，打开对应的 Bilibili 主页。
昵称空间链接：按住 Alt 悬浮可临时切换为已注销形态（https://www.bilibili.com/list/<uid>），松开发开 Alt 或移开鼠标即复原；用于手动打开注销用户页面。已注销用户本来就显示该形态，不受影响。
默认头像（noface）用户可右键头像，手动填写头像 URL。
非默认头像用户可中键点击头像，手动填写头像 URL（可选同时关闭静默更新头像功能）。
BilibiliID：点击可复制，复制后短暂显示“已复制”；ID 过长时悬停整个信息区可展开查看完整 ID。
备注：点击进入编辑，Enter 或失焦自动保存；Shift + Enter 可强制将当前昵称保存为备注。
详细备注（memoDetail）：中键点击页面中已渲染的备注标签（或在面板卡片备注区右键）可打开详细备注对话框，用于填写长文本备注，失焦即自动保存。详细备注会同步显示在页面标题和元素 title 属性中。
删除：右上角垃圾桶图标删除单个用户。
注意：将备注清空会直接删除该用户记录（不会再弹确认）。

搜索与筛选

搜索框支持昵称、备注、详细备注、ID 模糊搜索，输入后按 Enter 执行搜索。
搜索框使用浏览器原生表单记忆，历史建议由浏览器自动管理。
简体、繁体中文可互通搜索，例如用“备注”也能搜到“備註”。
右侧“×”按钮清空搜索。
当搜索词命中「详细备注」时，对应卡片会显示一段带高亮的「详细备注」片段，便于定位匹配位置。

注销筛选

列表中若存在已注销用户，控制栏会出现「注销筛选」下拉，提供「全部 / 仅显示已注销 / 隐藏已注销」三态。
「仅显示已注销」只保留已注销账号；「隐藏已注销」则将其过滤掉。
该选项不持久化，每次打开面板自动重置为「全部」。

批量操作

点击“多选用户”进入多选模式，卡片左侧出现勾选框。
Ctrl + A（Windows/Linux）或 Cmd + A（macOS）在多选模式下对当前筛选结果执行全选/反选。
“删除所选用户”按钮会显示已选数量，未选择时不可用。
多选模式下选择用户后，“一键刷新数据”会变为“刷新所选”，只刷新已选用户。
多选模式下未选择用户时，刷新按钮不可用。

添加用户

点击 添加 可手动添加用户。
UID 与备注为必填项，UID 只支持数字。
详细备注（memoDetail）可选，用于填写长文本备注。
头像 URL 可选；留空时会自动获取头像，若账号已注销则使用默认头像并标记为已注销。

导入/导出

导入：选择 JSON 文件，支持旧格式；导入校验严格，字段不合法会提示错误而非静默忽略。
导入会自动“新增/更新”对应用户，并提示统计结果。
导出：按日期生成文件名，导出当前全部用户数据（含昵称、备注与详细备注 memoDetail）。

刷新数据

“一键刷新数据”会拉取最新昵称、头像，并同步更新账号的已注销状态（正常账号标记为未注销、已注销账号标记为已注销）。
非多选模式下刷新当前列表全部用户。
多选模式下仅刷新已选择的用户。
刷新过程中显示进度与计数，完成后自动恢复按钮状态。

静默更新头像

油猴菜单可开启/关闭"静默更新头像"功能（默认关闭）。
开启后，访问用户空间页时会自动将该用户的最新头像同步到备注列表。
中键修改非默认头像时，可选择同时关闭此功能以保护手动设置的头像。

默认预注入全部卡片

油猴菜单可开启/关闭"默认预注入全部卡片"功能（默认开启）。
开启后，页面加载时会预先注入所有用户卡片的备注。
关闭后，未打开面板前将延后加载列表，减少初始页面负担。

主题与样式

右侧太阳/月亮图标切换浅色/深色主题。
主题状态会持久保存，下次打开自动恢复。

自定义备注颜色

点击“自定义备注颜色”选择颜色，颜色预览块会同步显示。
中键点击可清除自定义颜色并恢复默认。

自定义备注样式（CSS）

右键点击“自定义备注颜色”可打开/关闭 CSS 编辑对话框。
支持完整 CSS 选择器，建议只作用于以下类名： .bili-memo-tag、.editable-textarea、.bili-memo-input
输入后约 1 秒自动应用，失焦也会立即应用。
若存在语法问题会显示“语法警告/错误/解析警告”。

示例：

.bili-memo-tag {
  font-style: italic;
  letter-spacing: 0.5px;
}
.editable-textarea {
  background: rgba(0, 0, 0, 0.08);
  border-bottom: 2px solid pink;
}

调试窗口（开发者）

调试窗口为可拖拽、可缩放浮窗，带性能监视（FPS / Long Tasks / Heap）。
可输入 CSS 选择器并“加入”，或点击“扫描”重新匹配元素。
规则列表支持启用/禁用、改名、改选择器、改颜色与删除。
被匹配元素会显示彩色覆盖框，便于定位 UI 区块。
该窗口通常仅在调试模式或开发场景中使用。

快捷与提示

表情按钮右键可修改开/关按钮文字。
ID 文本可点击复制，昵称点击打开主页。
多选模式下支持快捷键批量选择。
页面备注标签内已有选中文字（直接拖选即可）、或按住 Alt 点击时，都不会弹出输入框，可直接复制文字。双击选词请按住 Alt。

关于调试模式

建议在调试时，将 Editable 改成 Minimal，以防止样式污染。

B站一键备注 Rev

Bilibili 用户备注 UI 使用说明

暴露的API

界面介绍

界面概览

昵称显示模式

用户卡片

搜索与筛选

注销筛选

批量操作

添加用户

导入/导出

刷新数据

静默更新头像

默认预注入全部卡片

主题与样式

自定义备注颜色

自定义备注样式（CSS）

调试窗口（开发者）

快捷与提示

关于调试模式

Bilibili 用户备注 UI 使用说明

暴露的API

界面介绍

界面概览

昵称显示模式

用户卡片

搜索与筛选

注销筛选

批量操作

添加用户

导入/导出

刷新数据

静默更新头像

默认预注入全部卡片

主题与样式

自定义备注颜色

自定义备注样式（CSS）

调试窗口（开发者）

快捷与提示

关于调试模式