# 资源
- https://www.mindvideo.ai/zh/sora-2/


# Sora2 漫剧分镜

```text
你是一位拥有视听语言能力的动画导演兼 AI 视频生成专家。你擅长将简短的主题或故事转化为精确的、可视化的动画分镜头脚本。你深知 Sora 2 模型对物理规律、光影细节、镜头运动及时间控制的高要求。请通读全文，请拆分第一集，第一集的时长应该在4分钟以上，所以最少18组镜头，要求如下：
1.日漫风格，2D
2.按15s一组的方式进行划分，每组不少于4-6个镜头，如果对话太长，也要用多个镜头来表达，避免画面单一。
3.单个镜头（Shot）的时长需精确到小数点后一位（如 1.3s, 2.5s），当一个镜头≥4s时，提示词上要写用多角度多镜头来表达。
##注意事项：
1.不要漏掉或改变原文的任何情节和对话 ，对话要写全，不要用省略号代替，同时要注意，如果有对话，要预估对话的时长，避免镜头结束了，话还没讲完，或者把对话分到两到三个镜头里，要中文提示词。
2.要注意镜头与镜头之间的过渡，如果这组镜头和前后组都有密切关联，可以在第一个镜头连带上上一组的最后一个镜头。
3.高光时刻的描绘，激烈场景的着重刻画，如果某个镜头是重点，可以只将这个镜头用15s来着重表达，但要注重镜头的丰富性，做到连贯，丰富，用多镜头多视角多表达，这样的词来刻画，不要一个画面太长。
4.在表达多人物时由于太多人会崩，尽量将多人物只放在一个镜头，其他的一组镜头只表达最多两个人，如果要表达的人大于两个人，多的人物可以放在下一组镜头来表达，如果三个人，可以两个人在第一组，两个人在第二组，以此来保障视频生成的质量和容易度，流畅度。
##每个镜头的格式为：- Duration: [X.X] sec

Scene (简述): [用户视角的简单描述]
Sora Prompt (详细): [用于生成的中文详细提示词，包含主体+环境+动作+运镜+光影+画质词]
Dialogue（详细讲话）:[用于配音，保留全部对话，不做任何修改]
Camera: [例如：Close-up, Dolly Zoom, Low angle]。
由于sora成视频的逻辑是每组镜头都是由一个关键帧生成的，所以要给出每组镜头这个关键帧图片的具体的描述词：
(Keyframe Prompt)：
[视觉锚点组：资产参考 + 布局指令 + 风格指引]
人物资产描述（Character Assets）：明确当前组内角色的具体视觉特征。需包含：[角色名] + [当前情绪表情] + [特有服饰/道具细节]。（注：方便生图师制作多视图 Character Sheet）
场景资产描述（Environment Assets）：描述环境空间。包含：[核心地标] + [深度空间感（如：远景建筑、近景遮挡物）] + [天气/材质细节]。
光影风格锚点（Visual Style）：[主光源方向与颜色] + [胶片质感/画风描述] + [核心色调]。
拼贴布局要求（Layout Note）：（生图师专用） 建议采用“左侧人物细节/表情+右侧场景氛围”的二分构图，或“中心角色+四周特写”的拼贴布局，作为 Sora 生成的视觉强引导。
```

```text
你现在是一名顶级的Sora视频提示词导演与视觉架构师. 你不仅精通电影语言 (包括摄影, 灯光, 剪辑和叙事节奏), 而且对Sora模型的优势和局限性了如指掌. 你知道如何将抽象的创意转化为Sora能够理解并出色执行的, 具体的, 视觉化的镜头指令.

你的核心任务是: 接收我给出的一个简单想法或主题, 然后通过你的专业知识, 将其扩展成一个完整, 详尽, 且高度优化的Sora视频提示词脚本.

### 你的工作流程与响应结构:

当我给你一个核心创意时 (例如: "一只猫在赛博朋克城市里冒险"), 你必须严格遵循以下专业流程来构建和呈现最终的提示词脚本.

**第一步: 概念深化与框架设定 (Conceptualization & Framework)**
*   **核心解读:** 首先, 用一句话提炼并升华我给出的创意核心.
*   **整体框架构建:** 按照以下列表, 建立整个视频的基调和核心元素. 你需要填充具体内容.
    *   `主题 (Theme):` [例如: 孤独的探索, 科技与自然的冲突, 意外的友谊]
    *   `整体风格 (Overall Style):` [例如: ultra-realistic cinematic, 8K, photorealistic, moody and atmospheric, Blade Runner aesthetic, Ghibli anime style]
    *   `核心色调与光线 (Color Palette & Lighting):` [例如: a palette of neon blues and purples contrasted with deep shadows, constant rain-slicked surfaces reflecting holographic ads, volumetric lighting from flying vehicles]
    *   `视频时长 (Duration):` [设定一个合适的时长, 通常在15-45秒之间]

**第二步: 核心要素设计 (Key Element Design)**
*   **场景设计 (Scene Design):** 详细描述视频发生的主要环境.
    *   [例如: A sprawling, multi-layered cyberpunk city. Lower levels are dense with chaotic street markets, noodle stalls, and steam rising from grates. Upper levels feature sleek, towering skyscrapers with massive holographic billboards. Rain is persistent.]
*   **角色设计 (Character Design):** 详细描述主角的外观和关键特征.
    *   [例如: Main character is a ginger cat with one cybernetic blue eye that glows faintly. It wears a small, weathered high-tech collar. Its fur is slightly matted from the rain, and its movements are cautious yet curious.]

**第三步: 分镜脚本创作 (Shot-by-Shot Storyboard)**
这是最核心的部分. 你需要像电影导演一样, 逐个镜头地设计整个故事序列. 使用**时间戳**来规划节奏.

*   `Time 0-5s (开场/建立场景 - Opening/Establishing Shot):`
    *   **机位/运镜 (Camera Position/Movement):** [例如: Wide shot, slow panning across the rainy cityscape at night. Camera then tilts down, moving through layers of traffic and buildings to find a small alleyway.]
    *   **画面描述 (Shot Description):** [例如: Neon signs blur in the rain. A ginger cat with a glowing cybernetic eye is briefly seen as a silhouette in a dimly lit alley, looking out at the massive city.]
    *   **细节与特效 (Details & Effects):** [例如: Raindrops hitting the pavement, steam rising from vents, lens flare from neon lights.]

*   `Time 5-10s (引入角色/初级行动 - Character Intro/Action):`
    *   **机位/运镜:** [例如: Medium shot, tracking the cat as it skillfully navigates the cluttered alley, jumping over discarded crates and pipes.]
    *   **画面描述:** [例如: The cat moves with stealth. Its cybernetic eye scans its surroundings. It pauses, looking up at a giant holographic koi fish swimming between buildings.]
    *   **动作要点:** [例如: Nimble jump, head tilt in curiosity, ears swiveling to a distant electronic sound.]

*   `Time 10-20s (发展/核心事件 - Development/Core Event):`
    *   **机位/运镜:** [例如: Close-up on the cat's face as it watches a small, hovering delivery drone get stuck in some wires. Then, a quick cut to a low-angle shot from the drone's perspective looking at the cat.]
    *   **画面描述:** [例如: The cat decides to act. It climbs a nearby rusty fire escape. Its paws make soft metallic sounds. It carefully nudges the drone free with its head.]
    *   **转场:** [例如: Match cut from the drone spinning its propellers to the cat's eye blinking.]

*   `Time 20-25s (高潮/结局 - Climax/Resolution):`
    *   **机位/运镜:** [例如: Handheld shot following the freed drone as it hovers in front of the cat for a moment. It projects a small, simple holographic heart ♡ before flying away.]
    *   **画面描述:** [例如: The cat watches the drone disappear into the city's neon haze. It sits on the fire escape, looking less lonely for a moment.]
    *   **细节与特效:** [例如: The holographic heart flickers slightly, casting a warm light on the cat's face. The rain seems to soften.]

**第四步: 整体指令总结 (Final Prompt Summary)**
*   最后, 将以上所有视觉元素整合成一段连贯的, 高度优化的英文提示词, 作为最终交付物. 这段话应该简洁但包含所有关键视觉信息.
    *   **[示例最终提示词]:** `An ultra-realistic cinematic shot of a ginger cat with a glowing blue cybernetic eye in a rainy, neon-lit cyberpunk city in the style of Blade Runner. The video begins with a wide pan of the city, then follows the cat through a cluttered alley. Close-up on the cat as it helps a small, stuck delivery drone. The drone thanks the cat with a holographic heart projection before flying away. Moody, atmospheric lighting, with rain-slicked surfaces and volumetric neon lights.`

现在, 请准备好. 我将给你我的第一个创意, 请启动你的导演流程.
```

【AI】提示词

## 前言

随着 JetBrains 在 2025.3 版本中正式引入 **Agent Client Protocol (ACP)** 的 Beta 支持，我们终于可以在 IDE 的原生 AI Chat 窗口中直接运行各种外部 AI Agent 了。

Anthropic 推出的 **Claude Code** 是一款强大的终端编码助手，结合 ACP 协议，它能与 WebStorm 实现无缝集成：**直接在 IDE 内进行多文件编辑、原生 Diff 预览以及代码重构。**

但在实际配置过程中，很多开发者会遇到两个棘手问题：
1.  使用 `fnm` (Fast Node Manager) 管理 Node 版本时，IDE 无法找到正确的 `npx` 路径。
2.  需要连接自定义的 API 地址（如 LiteLLM、Bedrock 或其它中转服务），而不是官方默认端点。

本文将提供一份经过实测的完整配置方案，帮你完美避坑。

---

## 🛠 前提条件

在开始之前，请确保你的开发环境满足以下要求：

*   **IDE 版本**：WebStorm 2025.3 或更高版本。
*   **插件要求**：已启用官方 **AI Assistant** 插件。
*   **基础工具**：
    *   已安装 Claude Code CLI（建议：`npm install -g @anthropic-ai/claude-code`）。
    *   使用 `fnm` 管理 Node.js 环境。
    *   终端运行 `npx --version` 能正常输出。

---

## 🚀 配置步骤

### 第一步：安装 ACP 适配器

我们需要一个“桥梁”将 Claude Code 转换为 IDE 能听懂的 ACP 协议。推荐使用 Zed 官方维护的适配器：

```bash
npm install -g @zed-industries/claude-code-acp
```

### 第二步：配置 WebStorm ACP

这是最关键的一步。我们需要通过修改配置文件来告诉 IDE 如何启动 Claude Code，并注入必要的环境变量。

1.  打开 WebStorm，进入 **AI Chat** 工具窗口（`View` → `Tool Windows` → `AI Chat`）。
2.  点击窗口右上角的 **齿轮图标 ⚙️**，选择 **Configure ACP Agents**。
3.  系统会自动打开 `acp.json` 配置文件：
    *   **macOS / Linux**: `~/.jetbrains/acp.json`
    *   **Windows**: `%USERPROFILE%\.jetbrains\acp.json`

请将文件内容替换为以下配置（请根据实际情况修改 API Key 和 URL）：

```json
{
  "agent_servers": {
    "Claude Code (Custom)": {
      "command": "/bin/zsh",
      "args": [
        "-c",
        "pkill -f 'npx.*@zed-industries/claude-code-acp' || true; fnm exec -- npx @zed-industries/claude-code-acp"
      ],
      "env": {
        "ANTHROPIC_API_KEY": "your-custom-api-key-here",
        "ANTHROPIC_BASE_URL": "https://your-custom-api-url.com/v1"
      }
    }
  }
}
```

### 💡 配置原理解析（为什么这么写？）

这段配置看似复杂，实则解决两个核心痛点：

1.  **自动清理僵尸进程 (`pkill ... || true`)**：
    每次重启 IDE 或 Agent 时，旧的进程可能依然驻留。这行命令会在启动新服务前强制清理旧的 adapter 进程，防止端口占用或内存泄漏。`|| true` 保证了即使没有旧进程，命令也不会报错退出。

2.  **解决 fnm 路径问题 (`fnm exec --`)**：
    WebStorm 启动子进程时，默认的 `$PATH` 可能不包含 `fnm` 动态注入的 Node 路径。直接写 `npx` 往往会报错。
    使用 `fnm exec --` 可以强制在当前 shell 上下文中动态加载正确的 Node 环境，彻底解决“找不到命令”的问题。

3.  **自定义 API 支持 (`env` 字段)**：
    通过显式注入 `ANTHROPIC_BASE_URL`，你可以轻松切换到任何兼容 OpenAI/Anthropic 格式的接口（务必确保 URL 以 `/v1` 结尾）。

---

## 💻 使用方法

1.  保存 `acp.json` 文件。
2.  **完全重启 WebStorm**（确保配置重载）。
3.  打开 **AI Chat** 窗口。
4.  点击输入框上方的 Agent 选择下拉菜单，你应该能看到 **"Claude Code (Custom)"**。
5.  选中它，开始对话！尝试让它“重构当前文件”或“修复这个 Bug”，你会发现更改会直接显示在 IDE 的 Diff 视图中，体验极佳。

---

## ❓ 常见问题排查 (FAQ)

**Q1: Agent 选项没有出现，或者启动报错怎么办？**
*   **查看日志**：点击 AI Chat 窗口右上角齿轮 → **Get ACP Logs**。
*   **检查 JSON**：确保 JSON 格式合法（尤其是逗号和引号）。
*   **全局安装**：确认适配器已安装：`npm ls -g @zed-industries/claude-code-acp`。

**Q2: 自定义 API 似乎没有生效？**
*   检查 `ANTHROPIC_BASE_URL` 是否包含协议头（`https://`）和版本后缀（`/v1`）。
*   建议先在终端手动测试连接：
    ```bash
    ANTHROPIC_API_KEY=xxx ANTHROPIC_BASE_URL=yyy npx @zed-industries/claude-code-acp
    ```

**Q3: 为什么不直接使用 `/bin/bash`？**
*   如果你是 macOS 用户，默认 Shell 通常是 `zsh`，且 `fnm` 配置通常在 `~/.zshrc` 中。如果你使用 bash，请将配置中的 `/bin/zsh` 改为 `/bin/bash`。

---

## 🔗 参考资料

*   [JetBrains ACP 官方文档](https://www.jetbrains.com/help/ai-assistant/acp.html)
*   [Zed Claude Code ACP Adapter (GitHub)](https://github.com/zed-industries/claude-code-acp)
*   [Claude Code 官方文档](https://code.claude.com/docs)


【ACP】WebStorm + Claude Code

# 深度解析 `lpr` 命令：Linux/macOS 下的打印瑞士军刀

在 Linux 和 macOS 系统中，`lpr`（Line Printer Remote）命令是一个强大而实用的工具，它允许用户从命令行发送文件到打印队列。虽然现在图形界面的打印选项更为常见，但 `lpr` 在脚本、自动化任务以及需要精确控制打印行为的场景中依然扮演着不可或缺的角色。

## `lpr` 是什么？

`lpr` 是 CUPS (Common Unix Printing System) 打印系统的一部分，它负责将指定的文件发送到打印假脱机（spool）目录，然后由打印守护进程（通常是 `lpd` 或 CUPS 自身）处理并将内容发送到实际的打印机。简单来说，它就是命令行下的"打印"按钮。

## 为什么你需要了解 `lpr`？

1. **自动化和脚本编写**：在批处理、自动化报告生成或服务器端打印任务中，`lpr` 可以轻松集成到 shell 脚本中，实现无人值守的打印。
2. **远程打印**：尽管名称中带有 "Remote"，但现代 CUPS 环境下，`lpr` 主要用于本地打印。不过，其背后的协议（LPD）确实支持网络打印。
3. **精确控制**：`lpr` 提供了多种选项，允许你精确控制打印机选择、份数、纸张大小等。
4. **诊断和故障排除**：了解 `lpr` 有助于你理解打印流程，并在打印出现问题时进行诊断。

## `lpr` 的基本用法

最简单的 `lpr` 命令就是将一个文件发送到默认打印机：

```bash
lpr filename.txt
```

如果 `filename.txt` 是一个文本文件，它将被直接打印。如果文件是 PostScript 或 PDF 格式，CUPS 会自动处理并将其发送到打印机。

## 常用选项

`lpr` 提供了丰富的选项来定制打印行为：

### `-P printer_name`：指定打印机

指定要使用的打印机。这是最常用的选项之一。

```bash
lpr -P MyOfficePrinter document.pdf
```

**如何查看打印机名称？**

使用 `lpstat -p` 命令可以列出所有可用的打印机及其名称：

```bash
lpstat -p
```

### `-# num_copies`：指定打印份数

```bash
lpr -# 3 report.docx
```

### `-o option=value`：指定打印选项

指定各种打印选项。这些选项通常与打印机驱动程序相关，非常强大和灵活。以下是一些常见示例：

#### 纸张大小 (Page Size)

```bash
lpr -o media=A4 document.pdf
```

常见值：`Letter`, `Legal`, `A4`, `A3` 等。

#### 双面打印 (Duplex/Two-Sided)

```bash
lpr -o Duplex=DuplexNoTumble document.pdf  # 长边翻转
lpr -o Duplex=DuplexTumble document.pdf    # 短边翻转
```

常见值：`DuplexNoTumble` (长边翻转), `DuplexTumble` (短边翻转), `None` (单面)。

#### 每页打印的页数 (N-up)

将多页内容缩小打印到一张纸上。

```bash
lpr -o number-up=2 document.pdf  # 每页打印2版
```

#### 打印质量 (Quality)

```bash
lpr -o print-quality=draft document.pdf
```

常见值：`draft`, `normal`, `high`。

#### 彩色/黑白 (Color/Grayscale)

```bash
lpr -o ColorModel=Grayscale document.pdf  # 强制黑白
```

常见值：`Color`, `Grayscale`。

**如何获取更多 `option=value` 选项？**

使用 `lpoptions -p printer_name -l` 命令可以列出特定打印机支持的所有选项及其可能的值。

```bash
lpoptions -p MyOfficePrinter -l
```

### `-r`：打印后删除文件

在打印完成后删除原始文件。**请谨慎使用此选项，因为它会永久删除你的文件！**

### `-m`：打印完成通知

打印完成后发送邮件通知用户。

## 示例：一个实际的打印脚本片段

假设你有一个需要每天自动打印销售报告的场景：

```bash
#!/bin/bash

REPORT_FILE="/var/reports/daily_sales_$(date +%Y%m%d).pdf"
PRINTER="WarehousePrinter"

# 检查报告文件是否存在
if [ ! -f "$REPORT_FILE" ]; then
  echo "错误: 报告文件 $REPORT_FILE 不存在。"
  exit 1
fi

echo "正在发送报告 $REPORT_FILE 到打印机 $PRINTER ..."

lpr -P "$PRINTER" -o media=A4 -o Duplex=DuplexNoTumble "$REPORT_FILE"

if [ $? -eq 0 ]; then
  echo "报告已成功发送到打印队列。"
else
  echo "错误: 发送报告失败。"
fi
```

## 总结

`lpr` 命令虽然是命令行工具，但其功能强大且灵活。通过理解其基本用法和各种选项，你可以在 Linux 和 macOS 环境下更高效地管理和自动化你的打印任务。下次当你需要从终端打印文件时，不妨尝试一下这个"老牌"但依然充满活力的工具！


【LPR】macOS 下的打印瑞士军刀

```
[General]
# 基础配置
loglevel = warning
show-error-page-for-reject = true
internet-test-url = http://www.apple.com/library/test/success.html

# 测试URL
proxy-test-url = http://www.gstatic.com/generate_204
geoip-maxmind-url = https://raw.githubusercontent.com/Loyalsoldier/geoip/release/Country-without-asn.mmdb

# GeoIP数据库
disable-geoip-db-auto-update = false
exclude-simple-hostnames = true
dns-server = 223.5.5.5

# DNS
encrypted-dns-follow-outbound-mode = false
encrypted-dns-server = https://doh.pub/dns-query
read-etc-hosts = true
http-api-web-dashboard = false

# 控制器安全配置
http-api-tls = false
proxy-restricted-to-lan = true
skip-proxy = 223.5.5.5,127.0.0.1,127.0.0.0/8,10.0.0.0/8,172.16.0.0/12,100.64.0.0/10,17.0.0.0/8,*.local,localhost,www.abchina.com.cn,captive.apple.com,169.254.0.0/16,192.0.0.0/24,192.0.2.0/24,192.168.0.0/16

# 跳过代理列表
always-real-ip = *.srv.nintendo.net,*.stun.playstation.net,xbox.*.microsoft.com,*.xboxlive.com,*.battlenet.com.cn,*.battlenet.com,*.blzstatic.cn,*.battle.net

# 强制直连列表（游戏/特定服务，避免代理解析问题）
udp-policy-not-supported-behaviour = REJECT

# UDP配置（优化兼容性）
udp-priority = false
use-local-host-item-for-proxy = true
encrypted-dns-skip-cert-verification = false

[Proxy Group]
# 主策略组
🚀Proxy = select, 🌐自动, 🇭🇰香港, 🇺🇸美国, 🇯🇵日本, 🇰🇷韩国, 🇨🇳台湾, 🇸🇬狮城, hidden=false, no-alert=false

# 细分功能策略组
🤖AI = select, 🇯🇵日本, 🇺🇸美国, 🇰🇷韩国, 🇸🇬狮城, hidden=false, no-alert=false
🫨TikTok = select, 🇸🇬狮城, 🇭🇰香港, 🇺🇸美国, 🇯🇵日本, 🇰🇷韩国, hidden=false, no-alert=false
🎥YouTube = select, 🚀Proxy, 🇭🇰香港, 🇺🇸美国, 🇯🇵日本, 🇰🇷韩国, 🇸🇬狮城, hidden=false, no-alert=false
📺Media = select, 🚀Proxy, 🇭🇰香港, 🇺🇸美国, 🇯🇵日本, 🇰🇷韩国, 🇸🇬狮城, hidden=false, no-alert=false

# 基础策略组
🎯Direct = select, DIRECT, hidden=true
🐠Final = select, 🚀Proxy, hidden=true
🚫Reject = select, REJECT, hidden=true

# 自动测速策略组
🌐自动 = smart, include-other-group=🔗HUB, policy-regex-filter=(?i)(?:🇭🇰|港|香港|Hong|HK)|(?:🇯🇵|日本|Japan|JP)|(?:🇸🇬|新加坡|Singapore|SG|狮城), hidden=true

# 地区智能策略组
🇭🇰香港 = smart, include-other-group=🔗HUB, policy-regex-filter=(?i)(?:🇭🇰|港|香港|Hong|HK), hidden=true
🇺🇸美国 = smart, include-other-group=🔗HUB, policy-regex-filter=(?i)(?:🇺🇸|美|美国|States|US), hidden=true
🇯🇵日本 = smart, include-other-group=🔗HUB, policy-regex-filter=(?i)(?:🇯🇵|日本|Japan|JP), hidden=true
🇨🇳台湾 = smart, include-other-group=🔗HUB, policy-regex-filter=(?i)(?:🇨🇳|湾|台湾|Tai|TW), hidden=true
🇰🇷韩国 = smart, include-other-group=🔗HUB, policy-regex-filter=(?i)(?:🇰🇷|韩|韩国|Korea|KR), hidden=true
🇸🇬狮城 = smart, include-other-group=🔗HUB, policy-regex-filter=(?i)(?:🇸🇬|新加坡|Singapore|SG|狮城), hidden=true

# 订阅聚合组
🔗HUB = select, include-other-group="Sub1,Sub2,Sub3,Sub4,Sub5,Sub6", hidden=true

# 机场订阅策略组
Sub1 = select, policy-path=xxx, update-interval=86400, hidden=true, no-alert=false
Sub2 = select, policy-path=xxx, update-interval=86400, hidden=true, no-alert=false
Sub3 = select, policy-path=xxx, update-interval=86400, hidden=true, no-alert=false
Sub4 = select, policy-path=xxx, update-interval=86400, hidden=true, no-alert=false
Sub5 = select, policy-path=xxx, update-interval=86400, hidden=true, no-alert=false
Sub6 = select, policy-path=xxx, update-interval=86400, hidden=true, no-alert=false

[Rule]
# 广告屏蔽
DOMAIN-SET,https://raw.githubusercontent.com/privacy-protection-tools/anti-AD/master/anti-ad-surge2.txt,🚫Reject,no-resolve # Anti

# 服务特定规则
RULE-SET,https://raw.githubusercontent.com/blackmatrix7/ios_rule_script/master/rule/Surge/GitHub/GitHub.list,🚀Proxy,no-resolve # GitHub
RULE-SET,https://raw.githubusercontent.com/blackmatrix7/ios_rule_script/master/rule/Surge/OpenAI/OpenAI.list,🤖AI,no-resolve # OpenAI
RULE-SET,https://raw.githubusercontent.com/blackmatrix7/ios_rule_script/master/rule/Surge/Claude/Claude.list,🤖AI,no-resolve # Claude
RULE-SET,https://raw.githubusercontent.com/blackmatrix7/ios_rule_script/master/rule/Surge/Copilot/Copilot.list,🤖AI,no-resolve # Copilot
RULE-SET,https://raw.githubusercontent.com/blackmatrix7/ios_rule_script/master/rule/Surge/Google/Google.list,🤖AI,no-resolve # Google
RULE-SET,https://raw.githubusercontent.com/blackmatrix7/ios_rule_script/master/rule/Surge/Jetbrains/Jetbrains.list,🤖AI,no-resolve # JetBrains

# 流媒体
RULE-SET,https://raw.githubusercontent.com/blackmatrix7/ios_rule_script/master/rule/Surge/YouTube/YouTube.list,🎥YouTube,no-resolve # YouTube
RULE-SET,https://raw.githubusercontent.com/blackmatrix7/ios_rule_script/master/rule/Surge/TikTok/TikTok.list,🫨TikTok,no-resolve # TikTok
RULE-SET,https://raw.githubusercontent.com/blackmatrix7/ios_rule_script/master/rule/Surge/GlobalMedia/GlobalMedia_All_No_Resolve.list,📺Media,no-resolve # GlobalMedia

# 通用代理
RULE-SET,https://raw.githubusercontent.com/blackmatrix7/ios_rule_script/master/rule/Surge/Proxy/Proxy_All_No_Resolve.list,🚀Proxy,no-resolve

# 国内直连
RULE-SET,LAN,🎯Direct
RULE-SET,https://raw.githubusercontent.com/blackmatrix7/ios_rule_script/master/rule/Surge/Apple/Apple_All_No_Resolve.list,🎯Direct,no-resolve # Apple
RULE-SET,https://raw.githubusercontent.com/blackmatrix7/ios_rule_script/master/rule/Surge/China/China_All_No_Resolve.list,🎯Direct,no-resolve

# 最终规则
GEOIP,CN,🎯Direct,no-resolve
GEOIP,PRIVATE,🎯Direct
FINAL,🐠Final

[MITM]
h2 = true
```

【Surge】多订阅分流配置

# 以 fnm 管理 Node.js 版本：实践经验与取舍

对于需要在多个 Node.js 版本之间来回切换的团队而言，一个高效的版本管理器决定了日常开发体验。fnm（Fast Node Manager）正是为此而生：它由
Rust 编写，致力于用更快的速度、更低的资源占用解决多版本 Node 管理问题。本文结合实际使用，系统整理 fnm
的安装方式、使用步骤、优缺点、注意事项，并与常见工具进行了对比，帮助你更有底气地落地。

## 主要特性与亮点

1. **极快的启动速度**：Rust 实现带来更快的 CLI 响应，在频繁切换版本或多次打开终端时尤其明显。
2. **轻量级依赖**：fnm 自身安装包体积小，内部采用懒加载的方式下载 Node 版本，不会像 nvm 那样在 shell 初始化阶段执行大量脚本。
3. **跨平台支持**：macOS、Linux、Windows（含 PowerShell）都提供原生支持，对混合环境开发团队更友好。
4. **与版本文件联动**：默认支持识别 `.node-version`、`.nvmrc` 等文件，可在进入项目目录时自动切换 Node 版本。
5. **体验更现代**：支持 `--install-if-missing`、`--log-level` 等现代 CLI 选项，能够直接通过环境变量控制行为，便于自动化。

## 安装方式一览

### macOS / Linux

1. **Homebrew**（macOS 或 Linuxbrew）：
   ```bash
   brew install fnm
   ```
   Homebrew 会自动处理依赖，升级时只需 `brew upgrade fnm` 即可。
2. **脚本安装**（通用）：
   ```bash
   curl -fsSL https://fnm.vercel.app/install | bash
   ```
   该脚本会把执行文件放到 `~/.fnm` 并提示你如何修改 shell 配置。企业内网可替换成自建镜像地址。
3. **手动安装**：
    - 在 GitHub Release 下载压缩包。
    - 将二进制放到 `/usr/local/bin` 或 `~/bin`。
    - 在 shell 配置文件中手动添加 `eval "$(fnm env --use-on-cd)"`。

### Windows / PowerShell

- 使用 Scoop：`scoop install fnm`
- 使用 Chocolatey：`choco install fnm`
- 使用 Winget：`winget install Schniz.fnm`
- PowerShell 中需执行 `fnm env --use-on-cd | Out-String | Invoke-Expression` 来注入环境变量。

**安装完成后验证**：

```bash
fnm --version
which fnm        # 确保路径正确
```

## 基本使用步骤

```bash
# 安装常见操作
fnm list                      # 查看已安装的 Node 版本
fnm ls-remote                 # 查看可安装的远程版本
fnm install 18                # 安装 LTS 18（支持部分版本号）
fnm install --lts             # 直接安装最新 LTS
fnm use 20                    # 当前 shell 切换至 Node 20
fnm default 18                # 设置默认版本
fnm use --install-if-missing 16   # 缺失时自动安装

# 将环境自动注入 shell（例如 zsh）
eval \"$(fnm env --use-on-cd)\"
```

- 安装完成后建议把 `fnm env --use-on-cd` 的输出加入 `~/.zshrc` 或 `~/.bashrc`，这样进入不同项目目录时能自动检测版本文件。
- 如果项目使用 `.node-version`，只要文件内写着 `18.19.0` 之类的版本号，就能让 fnm 自动匹配。
- `fnm env --shell fish`、`fnm env --shell powershell` 可以生成不同 shell 所需的命令，避免语法不兼容。

## 进阶玩法与实战案例

### 为 Monorepo 统一 Node 版本

1. 在仓库根目录放置 `.node-version`，写入 `20.11.1` 这样的 LTS 版本。
2. 在 `package.json` 的 `engines.node` 中保持一致，形成双保险。
3. 配置 `.git/hooks/post-checkout` 或 `direnv`，在切换分支后运行 `fnm use --install-if-missing`，确保每位开发者都自动安装指定版本。

### 与 npm/yarn/pnpm 结合

- 可在 `package.json` 的 `scripts` 中直接调用 `fnm`：
  ```json
  {
    "scripts": {
      "dev": "fnm use --install-if-missing 18 && vite dev"
    }
  }
  ```
  适用于 CI/CD，避免构建机 Node 版本漂移。
- 如果还要固定 npm/yarn/pnpm 版本，可在 `postinstall` 中调用 `corepack enable`，或结合 Volta 只管理工具链，fnm 专注于 Node。

### 借助 alias 做多版本测试

```bash
fnm alias 18 lts
fnm alias 20 latest
fnm use lts
pnpm test
fnm use latest
pnpm test
```

在同一终端中就能快速切换 LTS 与 Current，对库作者非常实用。

### 控制缓存、镜像与日志

```bash
export FNM_MULTISHELL_PATH=~/.cache/fnm-shell
export FNM_NODE_DIST_MIRROR=https://npmmirror.com/mirrors/node/
export FNM_LOG_LEVEL=error
```

- `FNM_MULTISHELL_PATH` 可将临时 shims 放在自定义目录，方便在容器或只读系统中使用。
- `FNM_NODE_DIST_MIRROR` 解决内网下载慢的问题。
- `FNM_LOG_LEVEL` 能控制输出，CI 失败时更容易排障。

## 优点

- **速度快、体验流畅**：在 M 系列 Mac 或 Linux 上切换版本几乎没有感知延迟；终端初始化时也不会明显拖慢。
- **内置压缩缓存**：下载的 Node 版本会被缓存，重装同一版本时无需重新下载，大幅减少网络流量。
- **简洁命令语义**：命令与 nvm 几乎一致，迁移成本低；`fnm completions` 还能生成 shell 补全脚本，减少输入错误。
- **适合 CI/CD 场景**：通过 `fnm env --json` 导出设置，可在 CI 中快速切换 Node 版本而无需读取庞大的 shell 脚本。
- **易于脚本化**：`fnm current --format json` 等命令可程序化读取，方便写 lint 或守护脚本。
- **多 shell 友好**：官方提供 bash、zsh、fish、PowerShell、Nushell 等示例，节省配置时间。
- **二进制发布稳定**：Release 由 GitHub Actions 自动构建，checksum 公开，满足部分安全审计需求。

## 缺点

- **安装脚本差异**：部分旧教程仍以 curl/bash 脚本为主，但在企业环境下需要额外配置代理或镜像才能顺利执行。
- **插件不如 asdf 丰富**：fnm 专注 Node，本身并不管理其他语言；若团队还要统一 Python、Ruby 等，需要额外工具。
- **Windows 需额外适配**：PowerShell、Git Bash、WSL 的配置方式略有差异，新同事入场需要注意文档。
- **版本同步策略需自定**：fnm 不会自动更新 `.node-version`，仍需要团队约定流程（如 CI check）来避免乱序。

## 使用注意事项

1. **配置 PATH 先后顺序**：`fnm env` 输出的 PATH 需要排在系统 Node 之前，否则可能仍调用到系统自带版本。
2. **全局 npm 包位置**：切换 Node 版本后，全局 npm 包存放在各自的 `~/.fnm/node-versions/<version>` 目录，若依赖全局 CLI
   需重新安装。
3. **代理与镜像**：内网环境若需要代理，可通过 `FNM_NODE_DIST_MIRROR` 环境变量指向镜像站，以避免下载超时。
4. **与其他管理器共存**：如果同机还装了 nvm 或 asdf，要确保 shell 初始化脚本中只启用一个 Node 版本管理器，避免 PATH 冲突。
5. **CI 中缓存 node_modules 的策略**：切换 Node 版本会导致 node_modules 失效，记得把 Node 版本也纳入缓存 key，例如
   `node-${{ steps.fnm.outputs.node-version }}`。
6. **升级策略**：升级 fnm 后建议重新打开终端以载入最新 shim；如需脚本化，可在升级后执行 `hash -r` 清理 shell 的 command
   cache。

## 常见问题与排障

| 问题                  | 现象                 | 解决办法                                                                    |
|---------------------|--------------------|-------------------------------------------------------------------------|
| `node -v` 仍显示系统版本   | PATH 优先级不正确        | 确认 shell 配置中 `eval "$(fnm env)"` 在其他 Node 相关脚本之前                        |
| `fnm install` 速度极慢  | 访问官方镜像受限           | 设置 `FNM_NODE_DIST_MIRROR` 为公司镜像，如阿里云、腾讯云                                |
| CI 中 `fnm use` 失效   | 非登录 Shell 未加载配置    | 在脚本开头执行 `eval "$(fnm env --use-on-cd)"`，或直接 export `PATH`               |
| 多终端冲突               | 打开多个 shell 后切换版本异常 | 设置 `FNM_MULTISHELL_PATH` 为每个终端独立目录，或在 shell 退出时执行 `fnm env --uninstall` |
| `.node-version` 不生效 | 文件找不到              | 确保文件在项目根目录且没有多余空格；也可改用 `.nvmrc` 兼容其他工具                                  |

## 与常见方案对比

| 工具        | 语言支持        | 性能         | 学习成本                      | 适用场景                        |
|-----------|-------------|------------|---------------------------|-----------------------------|
| **fnm**   | 仅 Node.js   | 启动/切换速度快   | 与 nvm 类似                  | Node 项目为主、关注性能的个人或团队        |
| **nvm**   | 仅 Node.js   | shell 初始化慢 | 文档和社区丰富                   | 传统方案，团队已有大量脚本基于 nvm         |
| **asdf**  | 多语言插件       | 取决于插件      | 更复杂，需要管理 `.tool-versions` | 需要统一多语言版本管理的团队              |
| **Volta** | Node/JS 工具链 | 常驻后台，切换快   | 有独特命令体系                   | 需要固定 npm/yarn/pnpm 版本，关注稳定性 |

- 如果团队只管理 Node 版本且追求更快的开发体验，fnm 在大多数情况下都会优于 nvm。
- 如果还需要统一 npm、yarn、pnpm 的版本或锁定工具链，Volta 是不错的替代者。
- 若项目中存在多种语言，asdf 的插件系统能提供更通用的方案，只是操作体验更复杂。
- 在容器化或 serverless 环境中，如果需要每次冷启动快速拉起 Node，fnm 的二进制能力会比 nvm 的大量 shell 逻辑更占优势。
- 需要跨平台 + GUI 引导时，可考虑使用 `nvs`（Node Version Switcher），但其社区活跃度低于 fnm。

## 结语

fnm 并不是包治百病的工具，但在 Node.js 版本管理领域提供了一种高效、直接的方案。了解它的安装方法、进阶配置、优缺点以及与其他工具的差异，能让团队在选择版本管理器时更加自信。如果你正准备迁移
nvm、搭建多平台开发环境或优化 CI 时间，不妨尝试一次 fnm，把实践经验写进团队手册，让版本管理不再是日常开发的阻力。


【Fnm】Node 多版本管理

## 前言

在日常的 Web 开发中，尤其是在使用 Vue 或 React 等组件化框架构建的复杂项目中，我们经常会遇到一个痛点：如何在浏览器中快速定位某个 UI 元素对应的源代码？

通常，我们的做法是打开浏览器的开发者工具，审查元素，找到一个独特的 class 或 id，然后在整个项目中进行全局搜索。如果项目结构复杂、组件嵌套层级深，这个过程会变得非常繁琐和低效。为了解决这个问题，`code-inspector-plugin` 应运而生。

## 什么是 code-inspector-plugin？

`code-inspector-plugin` 是一个开发辅助插件，它允许你在浏览器中点击页面上的任意元素，就能自动在你的 IDE（如 VS Code, WebStorm）中打开对应的源代码文件，并精确定位到相关行。它就像一座桥梁，将浏览器中的视图和项目中的代码紧密连接起来。

## 为什么需要它？

使用 `code-inspector-plugin` 可以带来诸多好处：

1.  **极致的开发效率**：一键直达代码，省去了手动搜索文件的繁琐步骤，极大地提升了开发和调试效率。
2.  **快速熟悉新项目**：对于刚接触一个新项目或复杂模块的开发者来说，这是一个快速理解代码结构和组件划分的神器。
3.  **精准定位**：能够精确到代码行，无论是 HTML 结构还是组件引用，都能准确找到。
4.  **非侵入式**：它仅在开发环境下生效，不会对生产环境的代码产生任何影响。

## 如何安装和配置？

以你当前这个 Vite + Vue 项目为例，集成 `code-inspector-plugin` 非常简单。

### 1. 安装依赖

首先，在项目根目录下执行以下命令来安装插件：

```bash
pnpm add code-inspector-plugin -D
```

### 2. 配置 Vite

接下来，打开项目根目录下的 `vite.config.js` 文件，引入插件并进行配置：

```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { codeInspectorPlugin } from 'code-inspector-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 在这里添加插件配置
    codeInspectorPlugin({
      bundler: 'vite',
    }),
  ],
  // ... 其他配置
})
```

只需简单的两步，配置就完成了！

## 如何使用？

1.  **启动项目**：运行 `pnpm run dev` 启动你的开发服务器。
2.  **打开浏览器**：在浏览器中访问你的项目。
3.  **激活检查器**：将鼠标悬浮在页面上，按下组合键（Mac: `Option + A` / Windows: `Alt + A`），此时插件会被激活。
4.  **点击元素**：激活后，你会看到鼠标悬浮的元素周围出现了边框提示。找到你想要查看的元素，单击它。
5.  **自动跳转**：IDE 会自动弹出，并打开对应的文件和代码行。

> **注意**：首次使用可能需要授权浏览器或操作系统与 IDE 通信。同时，请确保你的 IDE 已经配置了命令行启动器（例如 VS Code 的 `code` 命令）。

## 工作原理揭秘

`code-inspector-plugin` 的神奇效果背后，是一套巧妙的“编译时代码注入”和“运行时信息上报”机制。

### 1. 编译时：代码转换与信息注入

这是最核心的一步。插件在项目编译打包的过程中（例如 Vite 或 Webpack 构建时）介入，对源代码进行“改造”。

-   **AST 解析**：插件会使用 Babel 或 SWC 等工具将你的组件代码（如 `.vue` 或 `.jsx`）解析成一个**抽象语法树（AST）**。
-   **遍历与注入**：插件会遍历 AST，找到代表 HTML 标签或组件的节点，然后将该**代码的源文件路径、行号、列号等信息，作为特殊的 HTML 属性（例如 `data-v-inspector-file="path/to/YourComponent.vue"`）注入到这个标签上**。

因此，你写的代码在开发模式下，最终渲染到浏览器 DOM 中时，每个元素都携带了自己的“身份证”——它的源码位置信息。

### 2. 运行时：事件监听与信息捕获

插件还会在你的应用入口处注入一小段客户端脚本，它只在开发环境中运行，负责：

-   **监听组合键**：等待用户按下激活组合键。
-   **捕获鼠标事件**：激活后，监听鼠标的移动和点击事件。
-   **提取信息**：当用户点击某个元素时，脚本会立即读取注入的 `data-v-inspector-*` 属性，拿到该元素对应的文件路径和行号。

### 3. 通信：从浏览器到 IDE

拿到文件路径信息后，需要通知 IDE 打开它。

-   **启动本地服务**：插件会在启动开发服务器的同时，启动一个自己的小型 HTTP 中间件服务。
-   **发送请求**：浏览器端的脚本在获取到文件路径后，会立即向这个本地服务发送一个 HTTP 请求，并在 URL 中带上文件路径作为参数。
-   **执行 Shell 命令**：本地服务接收到请求后，会解析出文件路径，然后在你的电脑上执行一条命令行（Shell）命令来启动 IDE 并打开指定文件（例如 `code -g "/path/to/your/file:line:column"`）。

通过这个流程，`code-inspector-plugin` 优雅地实现了从浏览器视图到 IDE 代码的无缝跳转。

## 总结

`code-inspector-plugin` 是一个简单、强大且对开发者极为友好的工具。它通过打通浏览器和 IDE 之间的壁垒，解决了组件代码定位的难题，显著提升了开发体验和效率。如果你还没有尝试过，强烈建议在你的下一个项目中集成它，体验一下“指哪打哪”的快感！


【DEV】提升开发效率的利器：code-inspector-plugin

### 编程指南

- [AI协同编程指南](https://vibercoding.zxiaoruan.cn/vibe-coding/欢迎.html)

### 编程工具

- [AI编程工具汇总对比](https://rysonai.com)

【AI】Vibe Coding 开发资源

# 简介

在 **Electron** 里，**nodeIntegration** 这个属性控制着渲染进程能否使用 **Node.js** 的 **API**。当 **nodeIntegration** 设置为 **true** 时，渲染进程会和 **Node.js** 环境集成，这意味着在渲染进程的全局 **window** 对象上会暴露 **Node.js** 的全局变量和 API，其中就包括 **process** 对象。所以，开启 **nodeIntegration** 之后，可以通过 **window.process** 访问到 **Node.js** 的 **process** 对象。

# 检测

```javascript
if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
  return true;
}
```

【Electron】是否在 Electron 中运行

### 实时播放 pcm 流

```javascript
export class PCMPlayer {
  constructor(option) {
    this.init(option);
  }

  init(option) {
    const defaultOption = {
      inputCodec: 'Int16', // 传入的数据是采用多少位编码，默认16位
      channels: 1, // 声道数
      sampleRate: 8000, // 采样率 单位Hz
      flushTime: 1000, // 缓存时间 单位 ms
      fftSize: 2048 // analyserNode fftSize
    };

    this.option = Object.assign({}, defaultOption, option); // 实例最终配置参数
    this.samples = new Float32Array(); // 样本存放区域
    this.interval = setInterval(this.flush.bind(this), this.option.flushTime);
    this.convertValue = this.getConvertValue();
    this.typedArray = this.getTypedArray();
    this.initAudioContext();
    this.bindAudioContextEvent();
  }

  getConvertValue() {
    // 根据传入的目标编码位数
    // 选定转换数据所需要的基本值
    const inputCodecs = {
      'Int8': 128,
      'Int16': 32768,
      'Int32': 2147483648,
      'Float32': 1
    };
    if (!inputCodecs[this.option.inputCodec]) throw new Error('wrong codec.please input one of these codecs:Int8,Int16,Int32,Float32');
    return inputCodecs[this.option.inputCodec];
  }

  getTypedArray() {
    // 根据传入的目标编码位数
    // 选定前端的所需要的保存的二进制数据格式
    // 完整TypedArray请看文档
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray
    const typedArrays = {
      'Int8': Int8Array,
      'Int16': Int16Array,
      'Int32': Int32Array,
      'Float32': Float32Array
    };
    if (!typedArrays[this.option.inputCodec]) throw new Error('wrong codec.please input one of these codecs:Int8,Int16,Int32,Float32');
    return typedArrays[this.option.inputCodec];
  }

  initAudioContext() {
    // 初始化音频上下文的东西
    this.audioCtx = createWebAudioContext();
    // 控制音量的 GainNode
    // https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createGain
    this.gainNode = this.audioCtx.createGain();
    this.gainNode.gain.value = 1;
    this.gainNode.connect(this.audioCtx.destination);
    this.startTime = this.audioCtx.currentTime;
    this.analyserNode = this.audioCtx.createAnalyser();
    this.analyserNode.fftSize = this.option.fftSize;
  }

  static isTypedArray(data) {
    // 检测输入的数据是否为 TypedArray 类型或 ArrayBuffer 类型
    return (data.byteLength && data.buffer && data.buffer instanceof ArrayBuffer) || data instanceof ArrayBuffer;
  }

  isSupported(data) {
    // 数据类型是否支持
    // 目前支持 ArrayBuffer 或者 TypedArray
    if (!PCMPlayer.isTypedArray(data)) throw new Error('请传入ArrayBuffer或者任意TypedArray');
    return true;
  }

  feed(data) {
    this.isSupported(data);

    // 获取格式化后的buffer
    data = this.getFormattedValue(data);
    // 开始拷贝buffer数据
    // 新建一个Float32Array的空间
    const tmp = new Float32Array(this.samples.length + data.length);
    // console.log(data, this.samples, this.samples.length)
    // 复制当前的实例的buffer值（历史buff)
    // 从头（0）开始复制
    tmp.set(this.samples, 0);
    // 复制传入的新数据
    // 从历史buff位置开始
    tmp.set(data, this.samples.length);
    // 将新的完整buff数据赋值给samples
    // interval定时器也会从samples里面播放数据
    this.samples = tmp;
    // console.log('this.samples', this.samples)
  }

  getFormattedValue(data) {
    if (data instanceof ArrayBuffer) {
      data = new this.typedArray(data);
    } else {
      data = new this.typedArray(data.buffer);
    }

    let float32 = new Float32Array(data.length);

    for (let i = 0; i < data.length; i++) {
      // buffer 缓冲区的数据，需要是IEEE754 里32位的线性PCM，范围从-1到+1
      // 所以对数据进行除法
      // 除以对应的位数范围，得到-1到+1的数据
      // float32[i] = data[i] / 0x8000;
      float32[i] = data[i] / this.convertValue;
    }
    return float32;
  }

  volume(volume) {
    this.gainNode.gain.value = volume;
  }

  destroy() {
    if (this.interval) {
      clearInterval(this.interval);
    }
    this.samples = null;
    this.audioCtx.close().then();
    this.audioCtx = null;
  }

  flush() {
    if (!this.samples.length) return;
    const self = this;
    const bufferSource = this.audioCtx.createBufferSource();
    if (typeof this.option.onended === 'function') {
      bufferSource.onended = function (event) {
        self.option.onended(this, event);
      };
    }
    const length = this.samples.length / this.option.channels;
    const audioBuffer = this.audioCtx.createBuffer(this.option.channels, length, this.option.sampleRate);

    for (let channel = 0; channel < this.option.channels; channel++) {
      const audioData = audioBuffer.getChannelData(channel);
      let offset = channel;
      let decrement = 50;
      for (let i = 0; i < length; i++) {
        audioData[i] = this.samples[offset];
        /* fadein */
        if (i < 50) {
          audioData[i] = (audioData[i] * i) / 50;
        }
        /* fadeout*/
        if (i >= (length - 51)) {
          audioData[i] = (audioData[i] * decrement--) / 50;
        }
        offset += this.option.channels;
      }
    }

    if (this.startTime < this.audioCtx.currentTime) {
      this.startTime = this.audioCtx.currentTime;
    }
    // console.log('start vs current ' + this.startTime + ' vs ' + this.audioCtx.currentTime + ' duration: ' + audioBuffer.duration);
    // console.log('start', this.startTime);
    // console.log('duration', audioBuffer.duration);
    bufferSource.buffer = audioBuffer;
    bufferSource.connect(this.gainNode);
    bufferSource.connect(this.analyserNode); // bufferSource连接到analyser
    bufferSource.start(this.startTime);
    this.option?.onstart(audioBuffer.duration);
    this.startTime += audioBuffer.duration;
    this.samples = new Float32Array();
  }

  async pause() {
    await this.audioCtx.suspend();
  }

  async continue() {
    await this.audioCtx.resume();
  }

  bindAudioContextEvent() {
    const self = this;
    if (typeof self.option.onstatechange === 'function') {
      this.audioCtx.onstatechange = function (event) {
        self.audioCtx && self.option.onstatechange(this, event, self.audioCtx.state);
      };
    }
  }

}

export default PCMPlayer;
```

【小程序】播放 pcm 流

> 在上传文件时，为了降低后端服务器压力、提高上传速度等。可由前端直接上传至oss。
> 
> 当使用 npm 的方式使用 oss sdk 时，build 可能会异常。可以采用 cdn 的方式使用。
> 
> Github：[ali-oss](https://github.com/ali-sdk/ali-oss)

### 实现逻辑

如果是批量上传，则需控制上传队列，单个依次执行上传。

单个文件上传简单逻辑如下：

1. 获取 oss config
2. 初始化 oss sdk
3. 执行分片上传
   - 这里不论文件大小都采用分片上传的方式，目的是为了简化，统一逻辑。
   - 可针对不同文件指定不同的分片数量（例如：文件小于1MB则分1片）
4. 上传成功后上报 oss path

### 异常处理

1. 初始化 oss sdk 需要有 token，由于token直接输出至前端，出于安全考虑 token 必须设置有效期，例如 5 分钟。因此客户端需 在 token 过期之前，提前刷新 token。防止 token 过期导致上传失败。
   - 为什么 5 分钟有效期还不够用？客户端网络不可控
2. 在进行分片上传时，如果上传失败，可设置自动重试。重试次数可根据业务自定。
   - 断点续传？可根据业务自行实现。

### 能力扩展

1. 上传速度
   - 上传开始前 记录当前时间为开始时间
   - 通过上传的 progress 回调。可以获得上传进度，进而可以获取已上传的文件大小。如果以此刻为结束时间的话，那么就可大约计算出上传速度
   - 由于 progress 回调频率不够高，如果需要更高频率显示，可自行实现加速逻辑。比如在一次 progress 回调中计算多次结果。
2. 单文件上传进度
   - 通过 progress 回调根据已上传文件大小，计算得出当前上传进度。
3. 整体上传任务进度
   - 如果需要显示批量的进度，则可在每个文件上传后或者每个文件的 progress 回调（更精细的进度显示）中计算。 
4. 失败重试
   - 在上传失败时可设置自动重试逻辑。超过最大重试次数则最终上传失败。
5. 针对不同文件设置不同分片
    - 合理的分片能够更好的利用带宽，增加上传速度。
    - 同域名下的浏览器并发限制为6个（不同浏览器，不同版本可能限制存在差异，主要目的是需要合理的限制并发数）
    - 根据文件大小，以及并发数量，计算出分片数量以及每片大小。
6. 使用加速域名
   - 如果客户端由于地域原因导致上传慢或者失败。可在上传失败时启用加速域名进行加速上传（修改oss config）。
7. 文件检查
   - 在上传之前可简单进行文件类型，大小等检查。如果不符合业务则直接给出提示即可。

### 代码实现

- refreshSTSTokenInterval 可根据业务情况进行修改。
- calcPart 可根据业务情况自行实现。

```javascript
let client;

const uploadConfig = {
  fileList: [],
  params: new Map(),
  data: {},
};

const multipartUpload = (file) => {
  return new Promise(async (resolve, reject) => {
    const res = await getOssConfig();

    const startTime = Date.now();

    client = new OSS({
      ...getStsConfig(uploadConfig.data.sts_config),
      refreshSTSToken: async () => {
        const info = await getOssConfig();
        return {
          accessKeyId: info.accessKeyId,
          accessKeySecret: info.accessKeySecret,
          stsToken: info.stsToken,
        };
      },
      refreshSTSTokenInterval: interval * 60 * 1000,
    });

    client
      .multipartUpload(dir, file.file, {
        progress: (p) => {
          const costTime = (Date.now() - startTime) / 1000;
          const uploadedSize = ((file.file?.size || 0) * p) / 1024 / 1024;
          const fileSpeed = (uploadedSize / costTime).toFixed(2);

          console.table({
            '0-name': file.name,
            '1-fileSize': (file.file?.size || 0) / 1024 / 1024 + 'M',
            '2-progress': p * 100 + '%',
            '3-costTime': costTime + 's',
            '4-uploadedSize': uploadedSize + 'M',
            '5-fileSpeed': fileSpeed + 'M/s',
            '6-partSize': calcPart(file.file?.size || 0).partSize / 1024 / 1024 + 'M',
          });

          uploadConfig.speedMap[file.name] = fileSpeed;
        },
        ...calcPart(file.file?.size || 0),
      })
      .then((res) => {
        uploadConfig.retryMap[file.name] = 0;
        delete uploadConfig.speedMap[file.name];
        resolve(res);
      })
      .catch(async (err) => {
        if (err?.message?.includes('expired') && uploadConfig.retryMap[file.name] < 3) {
          try {
            uploadConfig.retryMap[file.name] += 1;
            uploadConfig.data = await getOssConfig();
            resolve(await multipartUpload(file));
          } catch (e) {
            reject(e);
          }
        } else {
          uploadConfig.retryMap[file.name] = 0;
          reject(err?.message || err?.name);
        }
      });
  });
};

function calcPart(size) {
  const mbSize = size / 1024 / 1024;

  const config = {
    parallel: 6,
    partSize: size,
  };

  if (mbSize > 12 && mbSize <= 50) {
    config.partSize = Math.ceil(mbSize / 6) * 1024 * 1024;
  }

  if (mbSize > 50 && mbSize <= 100) {
    config.partSize = Math.ceil(mbSize / 12) * 1024 * 1024;
  }

  if (mbSize > 100) {
    config.partSize = Math.ceil(mbSize / 18) * 1024 * 1024;
  }

  return config;
}
```


【OSS】前端直传 oss

> 在web项目日常更新中经常会遇到，代码更新后用户无感知。导致功能异常或者体验不到新功能。
>
> 因此需要更新提醒机制来主动告知用户，系统有更新需要重新加载。
>
> 以下方案暂不考虑轮询引起的压力问题。

**基本原理：请求远端标记与当前标记做判断，不一致则更新。**

### 方案一：请求静态文件

- 在 vue，react 等项目打包完成之后会生成静态js文件。
- js文件名称格式一般为 name+hash.ext，因此可以利用hash来进行判断是否有更新。
- 轮询请求入口html文件。利用正则获取 例如app_hash.js中的hash值，与当前文件中的hash值做比对，如果一致说明无更新，如果不一致给出更新提醒。

#### 优势

- 纯依赖前端，快
- 无需进行环境区分，直接请求当前环境文件即可

#### 不足

- 无法进行更精细化管理。只要hash不一致就会给出提醒
- 更新后 hash 如果未发生变化，则会视为无更新

### 方案二：请求约定文件

- 在打包完成后，在固定位置以及html中生成更新标记文件（更新标记的生成可由自动化脚本完成，更新标记可视情况决定是否需要），更新标记需包含以下内容
    - 标识：版本号、commit id或其他
    - 环境：dev、pro或其他
- 轮询请求更新标记，按照环境获取对应的标识与入口html中的标识来进行判断是否需要触发更新。

#### 优势

- 解决方案一的不足
- 不受项目限制，可按约定全项目通用

#### 不足

- 更新标记生成需要额外成本

### 注意

- 在请求静态文件或者更新标记时 GET 请求会有缓存，导致文件内容不更新
    - 可在请求url后增加 _t 参数，参数值为时间戳
    - 更换 POST 请求
- 部署方式不同可能会导致异常
    - 部署方式一：（入口html，静态资源）-> 服务器。一起更新则无问题。
    - 部署方式二：（静态资源）-> oss -> (入口html) -> 服务器。
        - 方案一无问题
        - 方案二则会发生：触发了更新提醒，但是刷新后依旧显示旧页面的问题。原因是因为静态资源更新时入口文件并为更新，此时如果刷新页面，则还是旧版本入口文件。因此需要增加逻辑判断，当入口文件中的标识与更新标记文件中的标识一致时才会触发更新。


【更新提醒】Web 实现更新提醒

> 在某些场景下，例如表单提交，经常会需要重置表单状态。可以通过以下的方式进行组件状态优雅重置。

### xxx写法

```vue

<template>
  <div>
    <div>{{ state.name }} - {{ state.age }}</div>
    <div @click="resetState">reset ref</div>
  </div>
</template>

<script setup>
  import { reactive } from 'vue';

  const state = reactive({
    name: 1,
    age: 2,
  });

  function resetState() {
    state.name = 1;
    state.age = 2;
  }
</script>
```

### Hook 封装

```javascript
import { ref, reactive } from 'vue';

function clone(value) {
  return JSON.parse(JSON.stringify(value));
}

export function useResettableRef(value) {
  const initialValue = clone(value);
  const state = ref(value);

  const reset = () => {
    state.value = clone(initialValue);
  }

  return [state, reset];
}

export function useResettableReactive(value) {
  const state = reactive(clone(value));

  const reset = () => {
    Object.keys(state).forEach((key) => delete state[key]);
    Object.assign(state, clone(value));
  }

  return [state, reset];
}
```

### Hook 使用

```vue

<template>
  <div>
    <div>ref：{{ refState.name }} - {{ refState.age }}</div>
    <div @click="resetRefState">reset ref</div>

    <div>reactive：{{ reactiveState.name }} - {{ reactiveState.age }}</div>
    <div @click="resetReactiveState">reset ref</div>
  </div>
</template>

<script setup>
  import { useResettableRef, useResettableReactive } from '@/hooks/index.js';

  const [refState, resetRefState] = useResettableRef({
    name: 1,
    age: 2
  });

  const [reactiveState, resetReactiveState] = useResettableReactive({
    name: 1,
    age: 2
  });
</script>
```


【Vue】Vue3 重置组件状态

### 背景

SharedArrayBuffer 是 JavaScript 中一种特殊的对象类型，用于在多个 Web Workers 或主线程之间共享内存。它与普通的 ArrayBuffer
类似，但 可以在多个线程中同时访问和修改。这种功能对于需要高性能并发处理的场景非常有用，比如实时数据处理、游戏开发、音视频处理等。

> 2017.7月（Chrome 60）引入 SharedArrayBuffer。
>
> 2021.7月（Chrome 92）限制 SharedArrayBuffer 只能在 cross-origin isolated 页面使用。（Spectre 漏洞）

### 解决方案

##### 一、不启用 SharedArrayBuffer

##### 二、 在 HTTP 响应头中添加以下两个安全标头：

1. Cross-Origin-Opener-Policy (COOP):
    - 将页面与其他来源的窗口隔离开来。
    - 推荐值：same-origin。
2. Cross-Origin-Embedder-Policy (COEP):
    - 确保页面中加载的资源具备同源性或具有适当的跨源授权。
    - 推荐值：require-corp。

示例配置：

```
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

##### 三、Chrome Origin Trials

申请地址：[Trial for SharedArrayBuffers in non-isolated pages on Desktop platforms](https://developer.chrome.com/origintrials/#/view_trial/303992974847508481)

### 参考资料

- [关于 SharedArrayBuffer spectre 攻击的讨论](https://github.com/tc39/security/issues/3)
- [使用 SharedArrayBuffer 进行 Spectre 攻击的原理](https://www.giantbranch.cn/2018/01/09/腾讯玄武实验室检测浏览器spectre的原理)
- [使用 COOP 和 COEP 将网站设置为“跨源隔离”](https://web.dev/articles/coop-coep?hl=zh-cn)
- [A year with Spectre: a V8 perspective](https://v8.dev/blog/spectre)


【Wasm】SharedArrayBuffer(SAB) is not defined

### 在 React 中进行模拟触发输入

> 参考：https://github.com/facebook/react/issues/11488

在自动化测试或在线调试React项目中，会遇到直接修改input的valut值UI变化，但是内部state并没有修改的情况。因此需要hack方法来解决：

```javascript
let input = document.querySelector('xxx');
let lastValue = input.value;
input.value = 'xxx';
let event = new Event('input', {bubbles: true});
event.simulated = true;
let tracker = input._valueTracker;
if (tracker) {
  tracker.setValue(lastValue)
}
input.dispatchEvent(event);
const enterKeyEvent = new KeyboardEvent('keypress', {
  key: 'Enter',
  keyCode: 13,
  code: 'Enter',
  which: 13,
  bubbles: true,
});
input.dispatchEvent(enterKeyEvent);
```

```javascript
const fileInput = document.querySelector('input[type="file"]');

async function simulateRemoteFileSelection(url) {
  const response = await fetch(url);
  const blob = await response.blob();

  const file = new File([blob], "file.mp4", {
    type: blob.type,
  });

  const dataTransfer = new DataTransfer();
  dataTransfer.items.add(file);

  fileInput.files = dataTransfer.files;

  const event = new Event('change', {bubbles: true});
  fileInput.dispatchEvent(event);
}

simulateRemoteFileSelection('xxxx');
```

【React hack】在 React 中模拟触发输入

### 在线工具

1. 🆓 [Diff-checker](https://www.diffchecker.com/zh-Hans/) 支持 **文本、图像、PDF、文件夹**
2. 🆓 [IT-tools](https://tools.codewf.com) **开源**的 IT 工具箱，能力丰富
3. 🆓 [文件转换](https://convertio.co/zh/) 将您的文件转换成任意格式
4. 🆓 [Mac-icons](https://macosicons.com/#/) Mac 应用图标
5. 🆓 [图片视频处理](https://www.arkthinker.com/zh/) 图片视频处理
6. 🆓 [AI证件照](https://huggingface.co/spaces/TheEeeeLin/HivisionIDPhotos)

### 电子书
- [JavaScript高级程序设计（第3版）.pdf](https://github.com/user-attachments/files/17866459/JavaScript.3.pdf)
- [javaScript语言精粹.pdf](https://github.com/user-attachments/files/17866462/javaScript.pdf)
- [Node.js实战[CN].pdf](https://github.com/user-attachments/files/17866465/Node.js.CN.pdf)
- [深入浅出Node.js.pdf](https://github.com/user-attachments/files/17866466/Node.js.pdf)
- [产品之路：从靠谱想法到产品落地再到产品推广-于琪.pdf](https://github.com/user-attachments/files/21421539/-.pdf)

### 有意思的
- [emojimix](https://tikolu.net/emojimix)
- [在线游戏](https://poki.com/zh)
- [tk emoji](https://mzbbb.dpdns.org)


【🗑️】回收站

### 基于路由的访问控制（Route-Based Access Control）

> 前端 routes.js 中定义完整路由，每个路由 meta 信息中的 role 来标识权限值。登陆之后通过用户的权限过滤完整路由，最终生成用户路由。

#### 特点

- 集中管理：在 routes.js 中集中管理所有路由及其权限信息。
- 动态生成用户路由：用户登录时根据权限动态过滤路由，生成符合用户权限的路由配置。
- 基于角色的访问控制：通过 meta.role 来管理和控制角色权限，可以支持多角色的访问权限需求。

#### 流程

- 定义完整路由表：在 routes.js 中定义所有路由和对应的 meta.role 信息。
- 用户登录后获取权限：用户登录后，获取用户权限信息（如角色、权限 ID 等）。
- 动态过滤路由：根据用户的权限信息过滤完整路由表，生成仅包含用户有权限访问的路由。
- 动态注入路由表：将过滤后的路由表动态注入到路由配置中。

### 业务背景

> 基于上述流程。在实际业务中，如果用户进入无匹配路由页面时（**实际路由确实不存在、权限不足导致无匹配路由**），会重定向至 404
> 页面（此动作由 vue-router 的 路由匹配完成）。
>
> [捕获所有路由或 404 Not found 路由](https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#捕获所有路由或-404-Not-found-路由)

```javascript
// 需在用户路由表生成后添加
const NOT_FOUND_ROUTE = {
  name: 'NotFound',
  path: '/:pathMatch(.*)*',
  redirect: '/404',
};
```

#### 问题

通过以上操作，一旦匹配不到路由就会重定向至 404 页面。此时无法区分进入 404 的原因到底是因为 **实际路由不存在** 还是 **权限不足
**
**。

#### 解决方案

为了解决上述问题可以修改 **NotFound** 中的 **redirect** 如下:

```javascript
const NOT_FOUND_ROUTE = {
  name: 'NotFound',
  path: '/:pathMatch(.*)*',
  redirect: (to) => {
    console.log(to);
    return '/404';
  },
};
```

在将 **redirect** 配置项设置为方法后：

1. 参数 **to**：可以访问跳转前的路由信息，帮助了解用户试图访问的路径。
2. 方法 **router.getRoutes**：可以获取所有已注册的路由表，便于进行权限和路径验证。

在此基础上，需要实现以下两重判断：

1. 路径存在性判断：利用 **to.path** 检查目标路径是否在路由表中。
    - 若路径存在：说明目标路径已注册。（可忽略。~~进一步判断用户是否有权限访问。此时，如果用户跳转到了 **404**
      页面，通常意味着当前用户没有访问该路径的权限。~~）
    - 若路径不存在：说明路由没有进行注册。
2. 增加标记：可以通过修改 **to.query** 或其他方式，标记跳转到 **404** 的原因，便于前端展示不同的提示内容。

通过这种判断，能够精准地确认跳转至 **404** 的原因，进一步支持前端展示出更具体的权限提示信息。


【Vue router】动态路由匹配下的权限处理

> 在获取视频任意时刻的截图时，通常大多数的做法都是
> - 通过视频播放，canvas绘制
> - 借助ffmpeg
> 
> 除此之外，还有另外一种方式：URI Queries

### 使用方式

只需要在url后面带上#t=xx（秒）即可，如果是本地文件的话，上传之后需要拿到blobUrl

```html

<div>
  <video src="https://www.w3school.com.cn/i/video/shanghai.mp4#t=1.2"></video>
  <video src="https://www.w3school.com.cn/i/video/shanghai.mp4#t=2.2"></video>
  <video src="https://www.w3school.com.cn/i/video/shanghai.mp4#t=3.5"></video>
</div>


<div>
  <video src="blob:file:///123a3041-4ab9-4db8-adb7-56c46f3b156e#t=1.2"></video>
  <video src="blob:file:///123a3041-4ab9-4db8-adb7-56c46f3b156e#t=2.2"></video>
  <video src="blob:file:///123a3041-4ab9-4db8-adb7-56c46f3b156e#t=3.5"></video>
</div>


<script>
  fetch('https://www.w3school.com.cn/i/video/shanghai.mp4').then(res => res.blob()).then(blob => {
    const blobUrl = URL.createObjectURL(blob);
    console.log(blobUrl);
  })
</script>
```

到此就可以渲染出指定时刻的图片。就这？是的，没错，就这。

### 优点

- 快
- 简单

### 缺点

- 每一张图实际是一个video，会导致资源重复请求，视频文件过大，图片过多，网络压力较大。
- 请求网络地址进而转换成本地地址，虽然可以解决并发导致的网络压力，但是如果文件过大，首次加载依旧需要消耗比较长的时间。

### 总结

具体使用什么方式，还需根据业务需求决定。

> 参考文档：https://www.w3.org/TR/media-frags/#media-fragment-syntax

【秒级】获取视频时刻图

# 适用于Vite环境的JavaScript混淆插件

>仓库地址：[vite-plugin-bundle-obfuscator](https://github.com/z0ffy/vite-plugin-bundle-obfuscator)

## ⭐️ 特性

- [x] ⚡ 支持 Vite 项目中的 JavaScript 混淆。
- [x] 🚀 多线程支持，以获得更好的性能。
- [x] ⚙️ 可定制的混淆器选项，以满足您的需求。
- [x] 🛡️ 自动排除 node_modules。
- [x] 📦 支持 node_modules 拆分块。

## ⚠️ 注意

- 如果打包过程中出现内存溢出。修改打包命令为：cross-env NODE_OPTIONS=--max-old-space-size=8192 VITE_CJS_IGNORE_WARNING=true vite build，其中 max-old-space-size 根据机器配置自行设置。
- 在设置 node_modules 分包时，请把准确的包名前置。例如：["vue-router", "vue"]，"vue"可以同时匹配到 vue 以及 vue-router。

## 🌐 在线示例

✦ [Vite - Vanilla](https://stackblitz.com/edit/vitejs-vite-zsytij?file=vite.config.js)
✦ [Vite - Vue](https://stackblitz.com/edit/vitejs-vite-ywho91?file=vite.config.js)
✦ [Vite - React](https://stackblitz.com/edit/vitejs-vite-wyeur4?file=vite.config.js)
✦ [Vite - PReact](https://stackblitz.com/edit/vitejs-vite-oujmks?file=vite.config.js)
✦ [Vite - lit](https://stackblitz.com/edit/vitejs-vite-ru4gws?file=vite.config.js)
✦ [Vite - Svelte](https://stackblitz.com/edit/vitejs-vite-fthdtu?file=vite.config.js)
✦ [Vite - Solid](https://stackblitz.com/edit/vitejs-vite-dcx3eh?file=vite.config.js)
✦ [Vite - Qwik](https://stackblitz.com/edit/vitejs-vite-i2bjvq?file=vite.config.js)
✦ ...


## 📦 安装

```bash
# 使用npm
npm install vite-plugin-bundle-obfuscator -D

# 使用pnpm
pnpm add vite-plugin-bundle-obfuscator -D

# 使用yarn
yarn add vite-plugin-bundle-obfuscator -D
```

## 👨‍💻 使用

1. 使用您首选的软件包管理器安装插件。
2. 在vite.config.js中注册插件。
3. 自定义混淆器配置或使用默认选项。

示例:

```javascript
import vitePluginBundleObfuscator from 'vite-plugin-bundle-obfuscator';

const defaultObfuscatorConfig = {
  excludes: [],
  enable: true,
  log: true,
  autoExcludeNodeModules: false,
  threadPool: false,
  options: {
    compact: true,
    controlFlowFlattening: true,
    controlFlowFlatteningThreshold: 1,
    deadCodeInjection: false,
    debugProtection: false,
    debugProtectionInterval: 0,
    disableConsoleOutput: false,
    identifierNamesGenerator: 'hexadecimal',
    log: false,
    numbersToExpressions: false,
    renameGlobals: false,
    selfDefending: true,
    simplify: true,
    splitStrings: false,
    ignoreImports: true,
    stringArray: true,
    stringArrayCallsTransform: true,
    stringArrayCallsTransformThreshold: 0.5,
    stringArrayEncoding: [],
    stringArrayIndexShift: true,
    stringArrayRotate: true,
    stringArrayShuffle: true,
    stringArrayWrappersCount: 1,
    stringArrayWrappersChainedCalls: true,
    stringArrayWrappersParametersMaxCount: 2,
    stringArrayWrappersType: 'variable',
    stringArrayThreshold: 0.75,
    unicodeEscapeSequence: false,
  }
};

export default {
  plugins: [
    // vitePluginBundleObfuscator()
    vitePluginBundleObfuscator(defaultObfuscatorConfig)
  ]
};
```
