给你一个长度为 n 的整数数组 nums。

如果存在索引 0 < p < q < n − 1，使得数组满足以下条件，则称其为 三段式数组（trionic）：

• nums[0...p] 严格 递增，
• nums[p...q] 严格 递减，
• nums[q...n − 1] 严格 递增。

如果 nums 是三段式数组，返回 true；否则，返回 false。

 

示例 1:

示例 2:

 

提示:

• 3 <= n <= 100
• -1000 <= nums[i] <= 1000

第一步：CSS 铺满全屏

首先，我们要让 Canvas 元素本身在网页里占满位置。这步最简单，但是很关键，很多人容易漏掉 display: block。

默认情况下，Canvas 是 inline 元素，这会导致它底部莫名其妙多出几像素的“留白”（就像文字的行高一样）。

✅ 正确的 CSS 写法：

html, body {
  margin: 0;
  height: 100%;
}

#c {
  width: 100%;  /* 宽度占满父容器 */
  height: 100%; /* 高度占满父容器 */
  display: block; /* 关键！去除底部留白 */
}

第二步：拒绝“暴力拉伸”

CSS 把 Canvas 拉大了，但 Canvas 内部的“绘图缓冲区”（Drawing Buffer）可能还停留在原来的大小。

这就好比你把一张 100x100 的低清图片，强行用 CSS 放大到 1920x1080 显示，结果必然是模糊和马赛克。

在渲染循环中检查 Three.js 官方推荐写一个通用函数，在每一帧渲染前检查 Canvas 的显示大小和实际大小是否一致。

function resizeRendererToDisplaySize(renderer) {
  const canvas = renderer.domElement;
  // 获取 Canvas 在屏幕上显示的像素宽
  const width = canvas.clientWidth;
  // 获取 Canvas 在屏幕上显示的像素高
  const height = canvas.clientHeight;
  
  // 检查渲染器的内部尺寸是否和显示尺寸一样
  const needResize = canvas.width !== width || canvas.height !== height;
  
  if (needResize) {
    // 如果不一样，就调整渲染器大小
    // 第三个参数 false 很重要！表示不要让渲染器去修改 Canvas 的 CSS 样式
    renderer.setSize(width, height, false);
  }
  
  return needResize;
}

第三步：告诉摄像机“别把人拍扁了”（校准）

解决了模糊问题，还有一个变形问题。

想象一下，你的显示器本来是宽屏（16:9），摄像机也是按 16:9 拍摄的。当你把窗口缩窄变成竖屏（9:16）时，如果摄像机不调整，它还是把 16:9 的画面强行塞进 9:16 的格子里，物体就会被横向挤压。

所以，每当分辨率改变时，我们必须更新摄像机的 长宽比 (Aspect Ratio)。

✅ 最终的渲染循环代码：

function render(time) {
  time *= 0.001;

  // 1. 检查并调整分辨率
  if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement;
    
    // 2. 修正摄像机长宽比
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    
    // 3. 必须调用这个方法，摄像机参数才会生效！
    camera.updateProjectionMatrix();
  }

  // 正常渲染
  renderer.render(scene, camera);
  
  requestAnimationFrame(render);
}

requestAnimationFrame(render);

📂 核心代码与完整示例：   my-three-app

总结

如果你喜欢本教程，记得点赞+收藏！关注我获取更多Three.js开发干货

16 - 排除最后一项

by Anthony Fu (@antfu) #中等 #array

题目

在此挑战中建议使用TypeScript 4.0

实现一个泛型Pop<T>，它接受一个数组T，并返回一个由数组T的前 N-1 项（N 为数组T的长度）以相同的顺序组成的数组。

例如

type arr1 = ['a', 'b', 'c', 'd']
type arr2 = [3, 2, 1]

type re1 = Pop<arr1> // expected to be ['a', 'b', 'c']
type re2 = Pop<arr2> // expected to be [3, 2]

额外：同样，您也可以实现Shift，Push和Unshift吗？

在 Github 上查看：tsch.js.org/16/zh-CN

代码

/* _____________ 你的代码 _____________ */

type Pop<T extends any[]> = T extends [] ? [] : T extends [...infer A, infer _] ? A : never

关键解释：

• T extends any[]：约束 T 必须是数组类型。
• T extends [...infer A, infer _]：模式匹配，捕获数组最后一个元素之外的所有前置元素。
• A：前置元素数组。
• _：数组最后一个元素。

相关知识点

extends

使用维度	核心作用	示例场景
类型维度	做类型约束或条件判断（类型编程核心）	限定泛型范围、判断类型是否兼容、提取类型片段
语法维度	做继承（复用已有结构）	接口继承、类继承

extends 做类型约束或条件判断

1. 泛型约束：限定泛型的取值范围

// 约束 T 必须是「拥有 length 属性」的类型（比如 string/数组）
function getLength<T extends { length: number }>(arg: T): number {
  return arg.length;
}

// 合法调用（符合约束）
getLength("hello"); // ✅ string 有 length，返回 5
getLength([1, 2, 3]); // ✅ 数组有 length，返回 3

// 非法调用（超出约束）
getLength(123); // ❌ 报错：number 没有 length 属性

2. 条件类型：类型版 三元运算符

// 基础示例：判断类型是否为字符串
type IsString<T> = T extends string ? true : false;

type A = IsString<"test">; // true（符合）
type B = IsString<123>; // false（不符合）

分布式条件类型（联合类型专用）: 当 T 是联合类型时，extends 会自动拆分联合类型的每个成员，逐个判断后再合并结果。

type Union = string | number | boolean;

// 拆分逻辑：string→string，number→never，boolean→never → 合并为 string
type OnlyString<T> = T extends string ? T : never;
type Result = OnlyString<Union>; // Result = string

注意：只有泛型参数是 裸类型（没有被 []/{} 包裹）时，才会触发分布式判断：

// 包裹后不触发分布式，整体判断 [string|number] 是否兼容 [string]
type NoDist<T> = [T] extends [string] ? T : never;
type Result2 = NoDist<Union>; // never（整体不兼容）

3. 配合 infer：提取类型片段（黄金组合）

// 提取 Promise 的返回值类型
type UnwrapPromise<T> = T extends Promise<infer V> ? V : T;

type C = UnwrapPromise<Promise<string>>; // string（提取成功）
type D = UnwrapPromise<number>; // number（不满足条件，返回原类型）

extends 做继承（复用已有结构）

1. 接口继承：复用 + 扩展属性

// 基础接口
interface User {
  id: number;
  name: string;
}

// 继承 User，并扩展新属性
interface Admin extends User {
  role: "admin" | "super_admin"; // 新增权限属性
}

// 必须包含继承的 + 扩展的所有属性
const admin: Admin = {
  id: 1,
  name: "张三",
  role: "admin"
};

// 多接口继承
interface HasAge { age: number; }
interface Student extends User, HasAge {
  className: string; // 同时继承 User + HasAge
}

2. 类继承：复用父类的属性 / 方法

class Parent {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHi() {
    console.log(`Hi, ${this.name}`);
  }
}

// 继承 Parent 类
class Child extends Parent {
  age: number;
  constructor(name: string, age: number) {
    super(name); // 必须调用父类构造函数（初始化父类属性）
    this.age = age;
  }
  // 重写父类方法
  sayHi() {
    super.sayHi(); // 调用父类原方法
    console.log(`I'm ${this.age} years old`);
  }
}

const child = new Child("李四", 10);
child.sayHi(); // 输出：Hi, 李四 → I'm 10 years old

补充：类实现接口用 implements（不是 extends）

// 定义接口（契约：规定必须有 id、name 属性，以及 greet 方法）
interface Person {
  id: number;
  name: string;
  greet(): void; // 仅定义方法签名，无实现
}

// 类实现接口（必须严格遵守契约）
class Employee implements Person {
  // 必须实现接口的所有属性
  id: number;
  name: string;

  // 构造函数初始化属性
  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }

  // 必须实现接口的 greet 方法（具体实现由类自己定义）
  greet() {
    console.log(`Hi, I'm ${this.name}, ID: ${this.id}`);
  }
}

// 实例化使用
const emp = new Employee(1, "张三");
emp.greet(); // 输出：Hi, I'm 张三, ID: 1


// 接口1：基础信息
interface Identifiable {
  id: number;
  getId(): number;
}

// 接口2：可打印
interface Printable {
  printInfo(): void;
}

// 类同时实现两个接口（必须实现所有接口的成员）
class Product implements Identifiable, Printable {
  id: number;
  name: string; // 类可扩展接口外的属性

  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }

  // 实现 Identifiable 的方法
  getId(): number {
    return this.id;
  }

  // 实现 Printable 的方法
  printInfo() {
    console.log(`Product: ${this.name}, ID: ${this.getId()}`);
  }
}

const product = new Product(100, "手机");
console.log(product.getId()); // 100
product.printInfo(); // Product: 手机, ID: 100

infer

infer 是 TypeScript 在条件类型中提供的关键字，用于声明一个 待推导的类型变量（类似给类型起一个临时名字），只能在 extends 子句中使用。它的核心作用是：从已有类型中提取 / 推导我们需要的部分，而无需手动硬编码类型。

infer 必须配合条件类型使用，语法结构如下：

// 基础结构：推导 T 的类型为 U，若能推导则返回 U，否则返回 never
type InferType<T> = T extends infer U ? U : never;

type Example = InferType<string>; // Example 类型为 string
type Example2 = InferType<number[]>; // Example2 类型为 number[]

高频使用场景:

1. 提取函数的返回值类型

// 定义类型工具：提取函数的返回值类型
type GetReturnType<Fn> = Fn extends (...args: any[]) => infer R ? R : never;

// 测试用函数
const add = (a: number, b: number): number => a + b;
const getUser = () => ({ name: "张三", age: 20 });

// 使用类型工具
type AddReturn = GetReturnType<typeof add>; // AddReturn 类型为 number
type UserReturn = GetReturnType<typeof getUser>; // UserReturn 类型为 { name: string; age: number }

2. 提取数组的元素类型

// 定义类型工具：提取数组元素类型
type GetArrayItem<T> = T extends (infer Item)[] ? Item : never;

// 测试
type NumberArray = GetArrayItem<number[]>; // NumberArray 类型为 number
type StringArray = GetArrayItem<string[]>; // StringArray 类型为 string
type MixedArray = GetArrayItem<[string, number]>; // MixedArray 类型为 string | number

3. 提取 Promise 的泛型参数类型

// 定义类型工具：提取 Promise 的泛型类型
type GetPromiseValue<T> = T extends Promise<infer Value> ? Value : never;

// 测试
type PromiseString = GetPromiseValue<Promise<string>>; // PromiseString 类型为 string
type PromiseUser = GetPromiseValue<Promise<{ id: number }>>; // PromiseUser 类型为 { id: number }

4. 提取函数的参数类型

// 定义类型工具：提取函数参数类型
type GetFunctionParams<Fn> = Fn extends (...args: infer Params) => any ? Params : never;

// 测试
const fn = (name: string, age: number): void => {};
type FnParams = GetFunctionParams<typeof fn>; // FnParams 类型为 [string, number]

// 进一步：提取第一个参数的类型
type FirstParam = GetFunctionParams<typeof fn>[0]; // FirstParam 类型为 string

...infer

type Pop<T extends any[]> = T extends [] ? [] : T extends [...infer A, infer _] ? A : never

type Res1 = Pop<[1,2,3]> // 结果：[1,2]
type Res2 = Pop<[string]> // 推导：A = []，_ = string → 返回 []
type Res3 = Pop<[]> // 结果：[]

这里的 ...infer A 不是值层面的剩余操作符，而是 TS 数组 / 元组类型的模式匹配语法，它放在第一个位置是为了匹配并捕获数组最后一个元素之外的所有前置元素。

// Shift 类型：移除第一个元素，返回剩余部分
type Shift<T extends any[]> = T extends [] ? [] : T extends [infer _, ...infer A] ? A : never

type Res4 = Shift<[1,2,3]> // 结果：[2,3]
type Res5 = Shift<[string]> // 结果：[]

...infer A 放到最后，infer _ 放到第一个，模式就变成了 [infer _, ...infer A]，此时匹配的是 固定第一个元素 + 任意后置剩余元素。

// 移除数组最后两个元素，返回前置部分
type Pop2<T extends any[]> = T extends [...infer A, infer _, infer __] ? A : T

type Res6 = Pop2<[1,2,3,4]> // 结果：[1,2]
type Res7 = Pop2<[1,2]> // 结果：[]
type Res8 = Pop2<[1]> // 不匹配模式，返回原类型 [1]

测试用例

/* _____________ 测试用例 _____________ */
import type { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<Pop<[3, 2, 1]>, [3, 2]>>,
  Expect<Equal<Pop<['a', 'b', 'c', 'd']>, ['a', 'b', 'c']>>,
  Expect<Equal<Pop<[]>, []>>,
]

相关链接

分享你的解答：tsch.js.org/16/answer/z… 查看解答：tsch.js.org/16/solution… 更多题目：tsch.js.org/zh-CN

下面是我的公众号，欢迎关注。关注后有新的功能点会及时收到推送。

前端功能点：实战为王！专注于汇总各种功能点，致力于打造一系列能够帮助工程师实现各种功能的想法思路的优质文章。

前言

在 Vue 开发中，修饰符（Modifiers）是指令后的一个特殊后缀（以 . 开头），它能以极简的方式帮我们处理事件冒泡、键盘监听以及复杂的双向绑定逻辑。掌握它们，能让你的模板代码既优雅又高效。

一、 事件修饰符：精准控制交互行为

事件修饰符主要用于处理 DOM 事件的细节。

• .stop：阻止事件冒泡（调用 event.stopPropagation()）。
• .prevent：阻止事件的默认行为（调用 event.preventDefault()）。
• .capture：在捕获模式下触发事件监听器。
• .self：只有当事件是从触发元素本身触发时才触发回调。
• .once：事件只触发一次，之后自动移除监听器。
• .passive：滚动事件的性能优化，告诉浏览器不需要等待 preventDefault。

---

二、 键盘与鼠标修饰符：语义化监听

1. 按键修饰符

在监听键盘事件时，我们经常需要检查特定的按键，例如：<input @keyup.enter="submitForm" type="text" placeholder="按回车提交">。

• .enter：回车键
• .tab：Tab 键
• .space：空格键
• .delete：删除或退格键
• .up / .down / .left / .right：方向键

2. 鼠标修饰符

用于限制处理程序仅响应特定的鼠标按键。

• .left：点击鼠标左键触发。
• .right：点击鼠标右键触发。
• .middle：点击鼠标中键（滚轮点击）触发。

---

三、 v-model 修饰符：数据预处理

这些修饰符可以自动处理表单输入的数据格式。

• .lazy： 将v-model的同步时机设置在change事件之后，一般为在输入框失去焦点时。
• .number：自动将用户的输入值转为数值类型（内部使用 parseFloat）。
• .trim：自动过滤用户输入内容的首尾空白字符。

---

四、 双向绑定修饰符

这是 Vue 2 到 Vue 3 变化最大的部分。

1. Vue 2 时代的 .sync

在 Vue 2 中，.sync 是实现父子组件属性双向绑定的语法糖。

// 使用 .sync 的语法糖
<ChildComponent :title.sync="pageTitle" />
// 在子组件的方法中
this.$emit('update:title', newTitleValue);

2. Vue 3 的统一：v-model:prop

Vue 3 废弃了 .sync，将其功能合并到了 v-model 中。支持在同一个组件上绑定多个 v-model。

 // 在父组件中
<ChildComponent v-model:title="pageTitle" />

// 子组件
<script setup>
defineProps(['title']);
const emit = defineEmits(['update:title']);

const updateTitle = (newVal) => {
  emit('update:title', newVal);
};
</script>

3. Vue 3.4+ 的黑科技：defineModel

这是目前 Vue 3 最推荐的写法，极大简化了双向绑定的逻辑代码。

// 父组件
<ChildComponent v-model="inputValue" />

// 子组件
const inputValue = defineModel({
 // inputValue为双向绑定输入框的值
  type: [String],
  // 默认值
  default: ''
})

---

五、 总结

1. 交互逻辑优先使用事件修饰符，减少组件内的非业务代码。
2. 表单处理善用 .trim 和 .number，降低后端校验压力。
3. 父子通信在 Vue 3 项目中全面拥抱 v-model:prop，如果是新项目（Vue 3.4+），请直接使用 defineModel，它能让你的代码量减少 50% 以上。

Pagefind 是一个专为静态网站设计的开源搜索引擎，它能够自动索引你的网站并提供完全离线的搜索体验。

核心特性

• 按需加载：只下载搜索相关的内容片段，而不是整个索引
• 轻量级：核心 JS 仅约 20KB，索引文件高度压缩（相比 Lunr.js 减少 85%）
• 零配置：自动识别内容，开箱即用
• 多语言支持：内置中文、日文等多语言分词器
• 完全静态：无需服务器端支持，支持完全离线

快速上手

三步启用搜索

# 1. 构建你的静态网站
npm run build

# 2. 生成搜索索引
npx pagefind --source "dist"

# 3. 在 HTML 中添加搜索界面

<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<div id="search"></div>
<script src="/pagefind/pagefind-ui.js"></script>
<script>
    new PagefindUI({ element: "#search" });
</script>

Pagefind 会自动在 dist/pagefind/ 目录下生成索引文件。

核心用法

控制索引范围

使用 data-pagefind-body 标记要索引的内容：

<main data-pagefind-body>
    <h1>文章标题</h1>
    <p>这部分内容会被索引</p>
</main>

<!-- 使用 data-pagefind-ignore 排除特定内容 -->
<div data-pagefind-ignore>
    <h2>评论</h2>
    <div class="comments">...</div>
</div>

添加元数据和权重

<!-- 自定义元数据 -->
<article data-pagefind-body
         data-pagefind-meta="author:张三,date:2024-01-01">
    <h1 data-pagefind-weight="10">文章标题</h1>
    <p data-pagefind-weight="5">摘要内容...</p>
    <div>正文内容...</div>
</article>

配置文件

# pagefind.yml
source: "dist"
exclude_selectors:
  - "nav"
  - ".sidebar"
force_language: "zh-cn"

自定义搜索 UI

import * as pagefind from '/pagefind/pagefind.js';

const search = await pagefind.search("React");
const results = await Promise.all(
    search.results.map(r => r.data())
);

实战指南

集成到构建流程

{
  "scripts": {
    "build": "vite build",
    "postbuild": "pagefind --source dist"
  }
}

React 自定义搜索组件

import { useState } from 'react';

function Search() {
    const [results, setResults] = useState([]);

    const handleSearch = async (e) => {
        const { default: pagefind } = await import('/pagefind/pagefind.js');
        const search = await pagefind.search(e.target.value);
        const data = await Promise.all(
            search.results.slice(0, 5).map(r => r.data())
        );
        setResults(data);
    };

    return (
        <>
            <input type="search" onChange={handleSearch} />
            {results.map((r, i) => (
                <a key={i} href={r.url}>
                    <h3>{r.meta.title}</h3>
                    <p dangerouslySetInnerHTML={{ __html: r.excerpt }} />
                </a>
            ))}
        </>
    );
}

最佳实践

1. 只索引主要内容

<!-- ✅ 推荐 -->
<main data-pagefind-body>
    <article>...</article>
</main>

2. 使用权重优化结果

<h1 data-pagefind-weight="10">标题</h1>
<p data-pagefind-weight="5">摘要</p>

3. CLI 参数配置

# 排除选择器
pagefind --source "dist" --exclude-selectors "nav" --exclude-selectors "footer"

# 强制语言
pagefind --source "dist" --force-language "zh-cn"

配置参考

HTML 属性

属性	说明
data-pagefind-body	标记要索引的主要内容区域
data-pagefind-ignore	排除该元素及其子元素
data-pagefind-meta	添加自定义元数据
data-pagefind-filter	定义可过滤的字段
data-pagefind-sort	定义可排序的字段
data-pagefind-weight	设置内容权重（1-10）

JavaScript API

// 高级搜索
const search = await pagefind.search("React", {
  filters: { category: "tutorial" },
  sort: { date: "desc" },
  limit: 10
});

// 获取结果
const results = await Promise.all(
  search.results.map(r => r.data())
);

原理深度解析

整体架构

首先通过架构图了解 Pagefind 的整体设计：

graph TB
    subgraph "构建阶段 Build Time"
        A[HTML 文件] --> B[内容扫描器]
        B --> C[内容提取器]
        C --> D[多语言分词器]
        D --> E[倒排索引构建器]
        E --> F[索引分片器]
        F --> G[压缩引擎]
        G --> H[索引文件]
    end

    subgraph "运行阶段 Runtime"
        I[用户查询] --> J[查询分词]
        J --> K[哈希计算]
        K --> L[按需加载器]
        H --> L
        L --> M[索引查询]
        M --> N[TF-IDF 评分]
        N --> O[结果排序]
        O --> P[内容片段加载]
        P --> Q[摘要生成]
        Q --> R[搜索结果]
    end

    subgraph "缓存层 Cache Layer"
        S[浏览器缓存]
        T[内存缓存]
        L -.-> S
        L -.-> T
    end

    style A fill:#e1f5ff
    style H fill:#e1f5ff
    style I fill:#fff3e0
    style R fill:#fff3e0

索引构建过程

Pagefind 的工作流程可以分为两个阶段：构建时索引和运行时搜索。

1. 构建时索引（Build Time）

当你运行 pagefind --source "dist" 时，Pagefind 会执行以下步骤：

flowchart TD
    Start([开始构建]) --> Scan[扫描 HTML 文件]
    Scan --> Parse[解析 HTML DOM]
    Parse --> Extract[提取内容]

    Extract --> CheckBody{检查 data-pagefind-body}
    CheckBody -->|找到| UseBody[使用标记的内容]
    CheckBody -->|未找到| UseDefault[使用 body 全部内容]

    UseBody --> Filter[应用排除规则]
    UseDefault --> Filter

    Filter --> Meta[提取元数据]
    Meta --> Tokenize[文本分词]

    Tokenize --> CheckLang{检测语言}
    CheckLang -->|英文| EnTokenizer[英文分词器]
    CheckLang -->|中文| ZhTokenizer[中文分词器 n-gram]
    CheckLang -->|其他| OtherTokenizer[对应语言分词器]

    EnTokenizer --> BuildIndex[构建倒排索引]
    ZhTokenizer --> BuildIndex
    OtherTokenizer --> BuildIndex

    BuildIndex --> CalcWeight[计算词条权重]
    CalcWeight --> Shard[索引分片 256个桶]

    Shard --> Compress[压缩处理]
    Compress --> GenFragment[生成内容片段]
    GenFragment --> WriteFiles[写入文件]

    WriteFiles --> Output[输出到 pagefind/]
    Output --> End([构建完成])

    style Start fill:#90EE90
    style End fill:#FFB6C1
    style BuildIndex fill:#FFE4B5
    style Compress fill:#E0FFFF

关键技术点：

• 倒排索引：对于每个词条，记录它出现在哪些文档的哪些位置
• 分片存储：将索引拆分成小块，按需加载（使用一致性哈希算法分配到 256 个桶）
• 压缩算法：使用高效的压缩减少文件大小

索引结构详解：

pagefind/
├── pagefind.js           # 核心搜索引擎（~20KB）
│                         # - 包含哈希函数
│                         # - 索引加载器
│                         # - 搜索算法
│
├── pagefind-ui.js        # UI 组件（~15KB）
├── pagefind-ui.css       # 样式文件（~3KB）
│
├── index/                # 索引分片（256 个）
│   ├── index_00.pf       # 哈希值 0x00-0x00
│   ├── index_01.pf       # 哈希值 0x01-0x01
│   ├── ...
│   └── index_ff.pf       # 哈希值 0xFF-0xFF
│
├── fragment/             # 内容片段
│   ├── en_<hash>.pf      # 英文页面片段
│   ├── zh_<hash>.pf      # 中文页面片段
│   └── ...
│
└── filter/               # 过滤器数据（如果使用）
    ├── category.pf
    └── tags.pf

2. 运行时搜索（Runtime）

当用户输入搜索查询时的完整时序：

sequenceDiagram
    actor User as 用户
    participant UI as 搜索界面
    participant Core as Pagefind 核心
    participant Cache as 浏览器缓存
    participant Server as 静态服务器

    User->>UI: 输入 "React 教程"
    UI->>UI: 防抖延迟 (300ms)

    UI->>Core: search("React 教程")
    Core->>Core: 分词 ["React", "教程"]

    par 并行计算哈希
        Core->>Core: hash("React") = 0x42
        Core->>Core: hash("教程") = 0xA7
    end

    par 并行加载索引分片
        Core->>Cache: 检查 index_42.pf
        Cache-->>Core: 缓存未命中
        Core->>Server: GET /pagefind/index/index_42.pf
        Server-->>Core: 返回索引数据 (5KB)

        Core->>Cache: 检查 index_a7.pf
        Cache-->>Core: 缓存命中
        Cache-->>Core: 返回缓存数据
    end

    Core->>Core: 解析索引分片
    Core->>Core: 查找匹配文档<br/>"React": [1,5,23]<br/>"教程": [1,8,15]<br/>交集: [1]

    Core->>Core: 计算 TF-IDF 得分
    Core->>Core: 排序结果

    Core->>Cache: 检查 fragment_1.pf
    Cache-->>Core: 缓存未命中
    Core->>Server: GET /pagefind/fragment/zh_1.pf
    Server-->>Core: 返回内容片段 (12KB)

    Core->>Core: 提取摘要<br/>高亮关键词
    Core->>Core: 生成结果对象

    Core-->>UI: 返回搜索结果
    UI->>UI: 渲染结果列表
    UI-->>User: 显示搜索结果

    Note over Core,Server: 总耗时: ~80ms<br/>网络请求: 2 个 (17KB)<br/>缓存命中: 1 个

性能分析：

阶段	耗时	说明
用户输入 + 防抖	300ms	等待用户完成输入
分词 + 哈希计算	<5ms	纯计算，无 I/O
加载索引分片	20-50ms	取决于网络和缓存
索引查询 + 评分	5-10ms	纯内存操作
加载内容片段	15-30ms	取决于网络和缓存
摘要生成 + 渲染	5-10ms	DOM 操作
总计（首次）	~80ms	不含防抖延迟
总计（缓存）	~25ms	索引和片段均已缓存

核心技术解析

1. 按需加载机制

Pagefind 最大的创新是渐进式加载。传统的客户端搜索（如 Lunr.js）需要加载完整索引：

// 传统方案：需要加载整个索引
// 假设网站有 1000 个页面，索引文件可能有 5MB
await loadFullIndex(); // 加载 5MB
search("React");

Pagefind 的方案：

// Pagefind：按需加载
search("React");
// 1. 根据 "React" 计算哈希 -> 只加载包含 "React" 的索引分片（可能只有 10KB）
// 2. 找到匹配的文档 ID
// 3. 只加载这些文档的内容片段（可能 20KB）
// 总共只需要下载 30KB，而不是 5MB

实现原理：

查询词 "React"
    ↓
计算哈希：hash("React") = 0x3A7F
    ↓
确定分片：0x3A7F % 256 = 127
    ↓
加载：GET /pagefind/index/index_127.pf
    ↓
解析分片，找到文档 ID: [5, 23, 87]
    ↓
加载内容：GET /pagefind/fragment/en_005.pf

2. 倒排索引结构

倒排索引是搜索引擎的核心数据结构：

正向索引（文档 → 词条）：
文档1: ["React", "教程", "入门"]
文档2: ["Vue", "教程", "进阶"]
文档3: ["React", "进阶", "Hooks"]

倒排索引（词条 → 文档）：
"React"  → [文档1, 文档3]
"Vue"    → [文档2]
"教程"   → [文档1, 文档2]
"入门"   → [文档1]
"进阶"   → [文档2, 文档3]
"Hooks"  → [文档3]

当搜索 "React 教程" 时：

1. 查找 "React" → [文档1, 文档3]
2. 查找 "教程" → [文档1, 文档2]
3. 取交集 → [文档1]

3. TF-IDF 相关性评分

Pagefind 使用 TF-IDF 算法计算搜索结果的相关性：

TF（词频）：词条在文档中出现的频率

TF(t, d) = 词条 t 在文档 d 中出现的次数 / 文档 d 的总词数

IDF（逆文档频率）：词条的稀有程度

IDF(t) = log(总文档数 / 包含词条 t 的文档数)

TF-IDF 得分：

TF-IDF(t, d) = TF(t, d) × IDF(t)

示例计算：

假设我们有 100 个文档，搜索 "React Hooks"：

文档A：
- "React" 出现 10 次，文档总词数 100
  TF("React", A) = 10/100 = 0.1
  包含 "React" 的文档有 30 个
  IDF("React") = log(100/30) = 0.52
  TF-IDF("React", A) = 0.1 × 0.52 = 0.052

- "Hooks" 出现 5 次
  TF("Hooks", A) = 5/100 = 0.05
  包含 "Hooks" 的文档有 5 个
  IDF("Hooks") = log(100/5) = 1.30
  TF-IDF("Hooks", A) = 0.05 × 1.30 = 0.065

文档A 总分 = 0.052 + 0.065 = 0.117

"Hooks" 更稀有，所以权重更高。

4. 多语言分词

Pagefind 内置了多种语言的分词器：

英文分词（基于空格和标点）：

"Hello, world!" → ["hello", "world"]

中文分词（基于字典和统计）：

"自然语言处理" → ["自然", "语言", "处理"]
或 → ["自然语言", "处理"]
或 → ["自然语言处理"]

Pagefind 使用 n-gram 技术处理 CJK 文本：

"搜索引擎" → ["搜索", "搜索引", "搜索引擎", "索引", "索引擎", "引擎"]

这样即使查询 "搜索" 或 "引擎"，也能匹配到 "搜索引擎"。

性能优化技术

Pagefind 通过多种技术实现高性能：

索引压缩（原始 10MB → 500KB，压缩率 95%）：

• 去除 HTML 标签和属性
• 词干提取（stemming）："running" → "run"
• 停用词过滤（去除 "the", "a", "is" 等常见词）
• 增量编码 + Gzip 压缩

并行加载： 支持 HTTP/2 多路复用，多个词条的索引分片并行加载，总耗时 = max(单个加载时间)。

技术内幕深度剖析

1. 核心算法实现

Pagefind 是用 Rust 编写并编译为 WASM，核心逻辑包括：

哈希计算（FNV-1a 算法）：

// 词条归一化（转小写、去除特殊字符）→ FNV-1a 哈希 → 映射到 0-255
hash("React") = 0x42 (66)
hash("react") = 0x42 (66)  // 大小写不敏感

索引加载器：

1. 计算词条哈希 → 确定分片编号
2. 检查内存缓存 → 未命中则加载对应的 .pf 文件
3. 解析二进制格式 → 存入缓存
4. 返回词条对应的文档 ID 列表

TF-IDF 评分器：

// 计算每个文档的相关性得分
score = Σ(TF × IDF × weight) × lengthNorm
// - TF: 词频
// - IDF: 逆文档频率（缓存优化）
// - weight: 自定义权重
// - lengthNorm: 长度归一化（防止长文档占优）

2. .pf 文件格式

Pagefind 使用自定义的 .pf（Pagefind Format）二进制格式：

索引文件（index_XX.pf）：

• Header：Magic Number (0x5046 'PF') + 版本 + 标志 + 条目数
• Entries：每个词条 → 文档 ID 列表（增量编码）

示例："React" → [1, 5, 23] 存储为 [1, +4, +18]

内容片段（fragment_XX.pf）：

• Header：Magic Number + 压缩类型 + 文档 ID + 长度
• Metadata：JSON 格式（title, url, excerpt 等）
• Content：原始文本 + 词条位置映射

3. 四层压缩策略

graph LR
    A[原始数据<br/>100KB] --> B[增量编码<br/>50KB]
    B --> C[VarInt 编码<br/>40KB]
    C --> D[词干提取<br/>30KB]
    D --> E[Gzip 压缩<br/>25KB]

    style E fill:#90EE90

Level 1: 增量编码（Delta Encoding）

• 文档 ID [1, 5, 23, 45] → [1, +4, +18, +22]
• 节省 50% 存储空间

Level 2: 变长整数编码（VarInt）

• 小数字用 1 字节，大数字自动扩展
• 1 → [0x01]，128 → [0x80, 0x01]

Level 3: 词干提取（Stemming）

• "running", "runs", "runner" → "run"
• 减少唯一词条数量 30-40%

Level 4: Gzip 压缩

• 文本压缩率 60-80%
• 最终实现 95% 总压缩率

4. 三层缓存架构

graph TD
    A[搜索请求] --> B{L1 内存缓存}
    B -->|命中| C[返回结果]
    B -->|未命中| D{L2 HTTP 缓存}
    D -->|命中| C
    D -->|未命中| E{L3 Service Worker}
    E -->|命中| C
    E -->|未命中| F[网络请求]
    F --> G[更新所有缓存]
    G --> C

    style B fill:#FFE4B5
    style D fill:#E0FFFF
    style E fill:#F0E68C

缓存层级	命中延迟	容量	适用场景
L1 内存缓存	<1ms	~10MB	频繁访问的索引（LRU 淘汰）
L2 HTTP 缓存	~5ms	~100MB	已访问的所有索引（Cache-Control）
L3 Service Worker	~10ms	~50MB	离线访问（可选）
网络请求	50-200ms	-	首次访问

性能提升：

• 首次搜索：~80ms
• 后续搜索（缓存命中）：~25ms
• 离线模式：~25ms

服务器配置（Nginx）：

location /pagefind/ {
    add_header Cache-Control "public, max-age=31536000, immutable";
    gzip on;
}

性能对比

方案	初次加载	索引大小 (1000页)	搜索速度	离线支持
Pagefind	~20KB	~500KB	<50ms	✅
Algolia	0 (CDN)	N/A	<10ms	❌
Lunr.js	~30KB	~3MB	~100ms	✅

实际数据（500 页文档网站）：

• 首次搜索：下载 45KB，耗时 ~80ms
• 后续搜索：下载 10KB，耗时 ~25ms
• 对比 Lunr.js：减少 97% 的下载量

常见问题

Q: Pagefind 与 Algolia 如何选择？

• Pagefind：中小型网站（< 10,000 页）、免费、离线支持、重视隐私
• Algolia：大型网站、高级功能、极致速度、付费

Q: 支持哪些框架？ 框架无关，支持 VitePress、Docusaurus、Hugo、Jekyll、Astro、Next.js（SSG）等任何生成 HTML 的工具。

Q: 是否影响 SEO？ 不影响。Pagefind 的搜索 UI 是客户端渲染的，原始 HTML 内容完全不受影响。

Q: 如何更新索引？ 每次构建时重新生成索引。在 CI/CD 中使用 postbuild 脚本自动化。

总结

Pagefind 为静态网站提供了轻量、高性能的搜索方案：

• ✅ 轻量级：核心 20KB，按需加载
• ✅ 高性能：搜索响应 < 50ms
• ✅ 零配置：开箱即用
• ✅ 完全静态：无需服务器，支持离线
• ✅ 多语言：内置 CJK 分词

核心原理

1. 倒排索引 + 分片：将索引拆分成 256 个小块
2. 按需加载：根据查询词哈希值只加载相关分片
3. TF-IDF 评分：计算相关性智能排序
4. 多语言分词：支持中英文等智能分词

相关资源

• 官方文档：pagefind.app/docs/
• GitHub：github.com/CloudCannon…

解法一

思路和算法

数组 $\textit{nums}$ 的长度是 $n$。最直观的思路是遍历 $0 < p < q < n - 1$ 的所有下标对 $(p, q)$，判断是否同时满足三段式数组的全部条件。

• 下标范围 $[0, p]$ 严格递增。

• 下标范围 $[p, q]$ 严格递减。

• 下标范围 $[q, n - 1]$ 严格递增。

当遇到满足全部条件的下标对 $(p, q)$ 时，返回 $\text{true}$。如果不存在满足全部条件的下标对 $(p, q)$，返回 $\text{false}$。

代码

###Java

class Solution {
    public boolean isTrionic(int[] nums) {
        int n = nums.length;
        for (int p = 1; p < n - 2; p++) {
            if (!isMonotonicInRange(nums, 0, p, 1)) {
                continue;
            }
            for (int q = p + 1; q < n - 1; q++) {
                if (isMonotonicInRange(nums, p, q, -1) && isMonotonicInRange(nums, q, n - 1, 1)) {
                    return true;
                }
            }
        }
        return false;
    }

    public boolean isMonotonicInRange(int[] nums, int start, int end, int direction) {
        for (int i = start; i < end; i++) {
            if ((nums[i + 1] - nums[i]) * direction <= 0) {
                return false;
            }
        }
        return true;
    }
}

###C#

public class Solution {
    public bool IsTrionic(int[] nums) {
        int n = nums.Length;
        for (int p = 1; p < n - 2; p++) {
            if (!IsMonotonicInRange(nums, 0, p, 1)) {
                continue;
            }
            for (int q = p + 1; q < n - 1; q++) {
                if (IsMonotonicInRange(nums, p, q, -1) && IsMonotonicInRange(nums, q, n - 1, 1)) {
                    return true;
                }
            }
        }
        return false;
    }

    public bool IsMonotonicInRange(int[] nums, int start, int end, int direction) {
        for (int i = start; i < end; i++) {
            if ((nums[i + 1] - nums[i]) * direction <= 0) {
                return false;
            }
        }
        return true;
    }
}

复杂度分析

• 时间复杂度：$O(n^3)$，其中 $n$ 是数组 $\textit{nums}$ 的长度。需要遍历的下标对数量是 $O(n^2)$，每个下标对判断是否符合三段式数组的全部条件的时间是 $O(n)$，因此时间复杂度是 $O(n^3)$。

• 空间复杂度：$O(1)$。

解法二

思路和算法

可以遍历数组 $\textit{nums}$ 一次，判断是否符合三段式的条件。

三个子数组的单调性必须依次满足严格单调递增、严格单调递减、严格单调递增。首个子数组的起始下标是 $0$，从起始下标向右遍历，遍历过程中执行如下操作。

• 由于三个子数组都满足严格单调递增或严格单调递减，因此不允许出现相邻元素相等的情况。如果遇到相邻元素相等的情况，则一定不符合三段式的条件。

• 如果遍历到数组 $\textit{nums}$ 的末尾或者遇到相邻元素的单调性与当前子数组的单调性条件相反的情况（已经排除相邻元素相等的情况），则可以确定当前子数组的结束下标。将当前子数组的结束下标作为下一个子数组的起始下标，继续遍历下一个子数组。

当数组 $\textit{nums}$ 可以恰好分成三个子数组且依次满足严格单调递增、严格单调递减、严格单调递增时，返回 $\text{true}$，否则返回 $\text{false}$。

代码

###Java

class Solution {
    public boolean isTrionic(int[] nums) {
        int n = nums.length;
        int index = 0;
        for (int i = 0, direction = 1; i < 3; i++, direction *= -1) {
            index = findMonotonicRangeEnd(nums, index, direction);
            if (index < 0) {
                return false;
            }
        }
        return index == n - 1;
    }

    public int findMonotonicRangeEnd(int[] nums, int start, int direction) {
        int n = nums.length;
        int end = -1;
        for (int i = start; i < n && end < 0; i++) {
            if (i < n - 1 && nums[i + 1] == nums[i]) {
                return -1;
            }
            if (i == n - 1 || (nums[i + 1] - nums[i]) * direction < 0) {
                end = i;
            }
        }
        return end > start ? end : -1;
    }
}

###C#

public class Solution {
    public bool IsTrionic(int[] nums) {
        int n = nums.Length;
        int index = 0;
        for (int i = 0, direction = 1; i < 3; i++, direction *= -1) {
            index = FindMonotonicRangeEnd(nums, index, direction);
            if (index < 0) {
                return false;
            }
        }
        return index == n - 1;
    }

    public int FindMonotonicRangeEnd(int[] nums, int start, int direction) {
        int n = nums.Length;
        int end = -1;
        for (int i = start; i < n && end < 0; i++) {
            if (i < n - 1 && nums[i + 1] == nums[i]) {
                return -1;
            }
            if (i == n - 1 || (nums[i + 1] - nums[i]) * direction < 0) {
                end = i;
            }
        }
        return end > start ? end : -1;
    }
}

复杂度分析

• 时间复杂度：$O(n)$，其中 $n$ 是数组 $\textit{nums}$ 的长度。最多需要遍历数组一次。

• 空间复杂度：$O(1)$。

写法一：三个循环

三段式子数组必须满足「严格递增 - 严格递减 - 严格递增」，一共三段，每一段至少要有两个数。

每一段分别用一个循环寻找，具体请看 视频讲解 中的图，欢迎点赞关注~

###py

class Solution:
    def isTrionic(self, nums: List[int]) -> bool:
        n = len(nums)
        # 第一段
        i = 1
        while i < n and nums[i - 1] < nums[i]:
            i += 1
        if i == 1:  # 第一段至少要有两个数
            return False

        # 第二段
        i0 = i
        while i < n and nums[i - 1] > nums[i]:
            i += 1
        if i == i0 or i == n:  # 第二段至少要有两个数，第三段至少要有两个数
            return False

        # 第三段
        while i < n and nums[i - 1] < nums[i]:
            i += 1
        return i == n

###java

class Solution {
    public boolean isTrionic(int[] nums) {
        int n = nums.length;
        // 第一段
        int i = 1;
        while (i < n && nums[i - 1] < nums[i]) {
            i++;
        }
        if (i == 1) { // 第一段至少要有两个数
            return false;
        }

        // 第二段
        int i0 = i;
        while (i < n && nums[i - 1] > nums[i]) {
            i++;
        }
        if (i == i0 || i == n) { // 第二段至少要有两个数，第三段至少要有两个数
            return false;
        }

        // 第三段
        while (i < n && nums[i - 1] < nums[i]) {
            i++;
        }
        return i == n;
    }
}

###cpp

class Solution {
public:
    bool isTrionic(vector<int>& nums) {
        int n = nums.size();
        // 第一段
        int i = 1;
        while (i < n && nums[i - 1] < nums[i]) {
            i++;
        }
        if (i == 1) { // 第一段至少要有两个数
            return false;
        }

        // 第二段
        int i0 = i;
        while (i < n && nums[i - 1] > nums[i]) {
            i++;
        }
        if (i == i0 || i == n) { // 第二段至少要有两个数，第三段至少要有两个数
            return false;
        }

        // 第三段
        while (i < n && nums[i - 1] < nums[i]) {
            i++;
        }
        return i == n;
    }
};

###go

func isTrionic(nums []int) bool {
n := len(nums)
// 第一段
i := 1
for i < n && nums[i-1] < nums[i] {
i++
}
if i == 1 { // 第一段至少要有两个数
return false
}

// 第二段
i0 := i
for i < n && nums[i-1] > nums[i] {
i++
}
if i == i0 || i == n { // 第二段至少要有两个数，第三段至少要有两个数
return false
}

// 第三段
for i < n && nums[i-1] < nums[i] {
i++
}
return i == n
}

写法二：一个循环

如果题目改成「增减增减增」，难道要写五个循环吗？

改成统计拐弯的次数，可以推广到更一般的情况。

###py

class Solution:
    def isTrionic(self, nums: List[int]) -> bool:
        if nums[0] >= nums[1]:  # 一开始必须是递增的
            return False
        cnt = 1
        for i in range(2, len(nums)):
            if nums[i - 1] == nums[i]:
                return False
            if (nums[i - 2] < nums[i - 1]) != (nums[i - 1] < nums[i]):
                cnt += 1
        return cnt == 3  # 一定是增减增

###java

class Solution {
    public boolean isTrionic(int[] nums) {
        if (nums[0] >= nums[1]) { // 一开始必须是递增的
            return false;
        }
        int cnt = 1;
        for (int i = 2; i < nums.length; i++) {
            if (nums[i - 1] == nums[i]) {
                return false;
            }
            if ((nums[i - 2] < nums[i - 1]) != (nums[i - 1] < nums[i])) {
                cnt++;
            }
        }
        return cnt == 3; // 一定是增减增
    }
}

###cpp

class Solution {
public:
    bool isTrionic(vector<int>& nums) {
        if (nums[0] >= nums[1]) { // 一开始必须是递增的
            return false;
        }
        int cnt = 1;
        for (int i = 2; i < nums.size(); i++) {
            if (nums[i - 1] == nums[i]) {
                return false;
            }
            if ((nums[i - 2] < nums[i - 1]) != (nums[i - 1] < nums[i])) {
                cnt++;
            }
        }
        return cnt == 3; // 一定是增减增
    }
};

###go

func isTrionic(nums []int) bool {
if nums[0] >= nums[1] { // 一开始必须是递增的
return false
}
cnt := 1
for i := 2; i < len(nums); i++ {
if nums[i-1] == nums[i] {
return false
}
if (nums[i-2] < nums[i-1]) != (nums[i-1] < nums[i]) {
cnt++
}
}
return cnt == 3 // 一定是增减增
}

复杂度分析

• 时间复杂度：$\mathcal{O}(n)$，其中 $n$ 是 $\textit{nums}$ 的长度。
• 空间复杂度：$\mathcal{O}(1)$。

专题训练

见下面滑动窗口与双指针题单的「六、分组循环」。

分类题单

如何科学刷题？

1. 滑动窗口与双指针（定长/不定长/单序列/双序列/三指针/分组循环）
2. 二分算法（二分答案/最小化最大值/最大化最小值/第K小）
3. 单调栈（基础/矩形面积/贡献法/最小字典序）
4. 网格图（DFS/BFS/综合应用）
5. 位运算（基础/性质/拆位/试填/恒等式/思维）
6. 图论算法（DFS/BFS/拓扑排序/基环树/最短路/最小生成树/网络流）
7. 动态规划（入门/背包/划分/状态机/区间/状压/数位/数据结构优化/树形/博弈/概率期望）
8. 常用数据结构（前缀和/差分/栈/队列/堆/字典树/并查集/树状数组/线段树）
9. 数学算法（数论/组合/概率期望/博弈/计算几何/随机算法）
10. 贪心与思维（基本贪心策略/反悔/区间/字典序/数学/思维/脑筋急转弯/构造）
11. 链表、二叉树与回溯（前后指针/快慢指针/DFS/BFS/直径/LCA/一般树）
12. 字符串（KMP/Z函数/Manacher/字符串哈希/AC自动机/后缀数组/子序列自动机）

我的题解精选（已分类）

作者｜宋婉心

编辑｜张帆

香港娱乐业正逐步改姓“黎”。

近日香港头部电影集团绍氏兄弟发布了一条公告，表示拟收购其主要股东华人文化旗下的核心影视资产。

核心影视资产主要是，华人文化通过全资附属公司HoldCo间接控制的CMC Moon Holdings所持业务。

CMC Moon几乎涵盖了华人文化最核心的影视内容与渠道资源，包括剧集制作龙头正午阳光、电影投资制作公司上海华人影业、海外发行业务CMC Pictures，以及以UME品牌运营的影院网络和华人文化电影院线等。

公布后第二个交易日收盘，邵氏兄弟报0.32港元/股，大跌15.79%。

以资产规模计，截至2025年9月末，邵氏兄弟经审核资产总值约4.59亿元，而拟注入资产的净值高达约85.58亿元。

表面上看，这是邵氏兄弟“蛇吞象”买资产，但本质上，是华人文化反向借壳完成了上市，而邵氏中小股东，却成为这场棋局的直接买单方。

01 反向借壳

交易前，华人文化已持有邵氏29.94%股权，为第二大股东，彼时邵氏仅主营港片制作与少量发行，无线下院线布局，同时2022年至2024年营收持续萎缩。

对于华人文化而言，此前影视资产估值偏低，UME院线融资扩店也受限，缺乏港股上市平台进行资产证券化。 

而通过本次发行股份收购，华人文化持股比例跃升至59.74%，实现对邵氏的绝对控股后，华人文化得以反向借壳完成上市。

华人文化之所以不选择独立IPO，一方面是因为影视行业长期估值承压，投资者信心不足，独立IPO估值难达预期，另一方面，华人文化业务多元且分散，整合申报成本高、周期长。

通过反向借壳，华人文化既规避了港股IPO的繁琐流程，又为旗下影视资产完成证券化、为UME院线找到上市融资平台，一举解决两大痛点。交易的本质，是华人文化通过“左手倒右手”完成高效整合，兼顾效率、确定性与长期价值。

不过本次交易15.8%的折价配股，引起了二级市场的剧烈震荡，也是这场资本腾挪的争议核心。

此次配股价格0.32港元/股，较公告前收盘价折让15.8%，远超港股文娱行业并购8%-12%的平均折价率。

更关键的是，159.3亿股的发行规模占邵氏发行后总股本的91.82%，直接导致原中小股东持股比例集体腰斩，且交易未设置任何小股东补偿条款。

对此，市场解读为华人文化为“快速交割、绝对控股”的妥协——

为满足港交所公众持股不低于25%的要求，华人文化将部分股份分配给阿里、腾讯等关联方，二者合计持股达34.52%，既快速锁定控股权，又避免给二级市场抬价空间。

公告后二级市场用脚投票，邵氏股价从0.38港元跌至0.275港元，市值蒸发超三成，中小股东权益大幅缩水。

据交易公告，华人文化计划在交易完成后12个月内，打通邵氏与正午阳光、UME院线的资源，实现“内容制作、发行、线下放映”的全链路协同。

但这一规划仍面临多重考验——影视与院线的跨地域管理考验CMC的整合能力，UME院线虽布局一二线城市，但行业复苏不及预期的风险仍存；而部分邵氏小股东已发起联合问询，维权诉求或拖慢交易交割进程。

对于邵氏中小股东而言，短期的权益缩水已成定局，能否通过长期估值修复回本，取决于华人文化的整合效率与资产兑现能力。

而对于整个文娱行业，这场交易或许标志着港股将成为内地文娱资产证券化的重要阵地。

02 香港娱乐的幕后一哥

香港娱乐产业的衰落有目共睹。

2018年开始，TVB已经连续亏损7年，2024年全年财报公布时，公司表示预计2025年将实现盈利。与此同时，内地同样传统电视出身的芒果超媒已经增长至500亿元市值左右，是TVB母公司市值的30多倍。

作为内地的“默多克”，黎瑞刚执掌的华人文化在传媒娱乐领域的布局几乎囊括了所有领域，不限于影视、音乐、体育等板块，而在香港，华人文化同样早早介入。

华人文化自2015年起主导对TVB的战略投资，并于2020年成为TVB最大股东。2023年及之后多次连任董事，实际掌控TVB战略方向。

可以看到的是，在投资的初始几年，黎瑞刚一直对TVB按兵不动，直到近年TVB近乎濒危，才进行了一系列调整。比如开启直播带货，和芒果TV、优酷等内地平台打造《声生不息·港乐季》《无限超越班》等。

以《声生不息·港乐季》为例，TVB只负责提供艺人、版权等资源，湖南卫视则是投资方兼制作方。据真故研究室报道，该节目在香港播出后，所有收入归TVB所有。重返TVB的曾志伟直言：拿了个不要钱的节目回来。

但即使如此，一系列改革对TVB实际的业绩翻身依旧收效甚微。

在这档综艺播出、开启直播带货的2022年，TVB虽然整体营收增长了24%，但亏损仍在扩大，相比前年的3.14亿港元亏损还增加了2400万港元，且二级市场也颇为冷淡。

直播带货曾在2023年大幅带动股价创四年新高，但也叫好不叫座。当年TVB电子商贸业务收入大幅缩水，到了2024年，电商业务收入仅剩1.26亿港元，也成了TVB目前唯一亏损的业务。

TVB股价在2023年触及18港元高点后，至今已一路跌回至3港元左右。

（TVB近三年股价）

而这次华人文化反向借的“壳”绍氏兄弟影业，和TVB一样，也是邵逸夫手下“时代的眼泪”。

“绍氏武侠片”曾是香港上个世纪50年代至80年代期间的香港电影招牌。上世纪60年代，武侠文化兴起，而邵逸夫遵循商业制片路线，坚持“观众至上”，基于对当时市民观众兴趣的洞察，绍氏影业成功抓住了武侠片的观看热潮。

此外在公司经营上，邵逸夫引入的仿美式制片厂制度，也让电影制作更为标准化和工业化，被业内称为“东方好莱坞”，进而给绍氏兄弟带来了丰厚利润。

英国《每日电讯报》称，巅峰时期，每周都有超过200万观众观看邵氏的电影。

但要注意的是，这个活跃在上个世纪的老牌香港电影制片厂，和如今的“绍氏兄弟”实际上是两家不同的实体——绍氏兄弟的核心内容资产早已在2000年就永久出售给了马来西亚的天映娱乐。

此后，绍氏兄弟就已经只剩下一个品牌空壳，约760部经典电影版权和和绍氏再无关系，绍氏兄弟也正式进入衰退期。直至2009年，绍氏兄弟完成私有化退市。

接下来的故事便迎来华人文化登场。2015年，华人文化密集出手投资、组建文娱帝国之时，控股了一家名为美克国际的香港上市公司，与此同时，作为TVB的第一大股东，华人文化凭借TVB与绍氏兄弟的渊源，取得了后者的品牌使用权。

随后在2016年，华人文化将美克国际更名为了“绍氏兄弟”，一个本质上与人们认知中的老牌制片厂毫无关系的新“绍氏兄弟”。

而如今，这一“绍氏兄弟”的壳再次被华人文化拿来作为上市平台进行资本化操作，注入了内地的影视厂牌和院线资产。

至此，新“绍氏兄弟”实体内，融合了香港制片厂品牌、港股上市平台、内地影视内容和院线以及内地资本。华人文化俨然已经成为香港和内地影视圈融合的主要试验场。

只是从过去几年的实践来看，在沉疴旧疾未解决的背景下，香港娱乐嫁接内地资源迎来短暂的回春后，终又回归平静。

*免责声明：

本文内容仅代表作者看法。

市场有风险，投资需谨慎。在任何情况下，本文中的信息或所表述的意见均不构成对任何人的投资建议。在决定投资前，如有需要，投资者务必向专业人士咨询并谨慎决策。我们无意为交易各方提供承销服务或任何需持有特定资质或牌照方可从事的服务。

关注获取更多资讯

2月2日，全球机器人租赁服务平台擎天租宣布完成新一轮关键管理层布局。阿里资深渠道建设专家李立恒（花名：黑猫警长），与阿里商业战略与组织变革专家王明峰（花名：天相）正式加入，分别出任擎天租联席总裁与首席战略官（CSO）。此外，擎天租也正式宣布启动全国城市合伙人战略计划。目前，公司管理层除新加入的两位阿里系高管之外，智元合伙人、联席总裁姜青松出任公司董事长；飞阔科技创始人李一言担任CEO；前饿了么副总裁陈艳霞出任COO；喵掌柜创始人李可为担任CMO。（界面）

36氪获悉，抖音与中央广播电视总台《2026年春节联欢晚会》联合宣布，抖音成为2026年总台新媒体《竖屏看春晚》独家合作伙伴。与此同时，抖音还将提供横屏、无障碍、幕后花絮等多路直播，并依托多机位并行直播技术，在单个直播间同时呈现多路直播画面。

36氪获悉，海思科公告，公司股东郝聪梅、杨飞计划15个交易日后的3个月内，通过大宗交易或集中竞价方式减持公司股份合计不超过1000万股，减持比例合计不超过公司总股本的0.89%。

36氪获悉，热门中概股美股盘前多数下跌，截至发稿，小鹏汽车跌超4%，哔哩哔哩跌超2%，百度、网易、微博、蔚来跌超1%，理想汽车跌0.78%；叮咚买菜涨超5%，拼多多涨超1%。

背景 本文帮助有Swift基础的同学，快速入门SwiftUI，基于cursour整理 主要分为四个部分： 关键字 Modifier 布局 Viewbuilder @ViewBuilder @ViewB

36氪获悉，美股大型科技股盘前多数走弱，截至发稿，特斯拉、英伟达跌超1%，谷歌跌0.75%，苹果跌0.71%，奈飞跌0.69%，Meta跌0.64%，亚马逊跌0.62%，微软跌0.44%；甲骨文涨近5%。

两周前，借着参加 iOS Conf SG 2026 的契机，我造访了新加坡国立美术馆，并有幸参观了《走进现代：波士顿美术博物馆印象派大师展》。尽管此前也看过不少优秀的展览，但这次经历仍带来了某种不同寻常的触动。

36氪获悉，ST泉为公告，公司收到债权人青岛泰上青阳供应链管理有限公司（简称“申请人、债权人”）发来的通知，获悉申请人以公司不能清偿到期债务且明显缺乏清偿能力，但具有重整价值为由，于1月29日向东莞市中级人民法院申请对公司进行重整，并申请启动预重整程序。公司尚未收到法院对申请人申请公司重整及预重整的受理文件，申请人的重整及预重整申请能否被法院裁定受理存在不确定性。

选错框架的代价：某团队用 Electron 做笔记应用，上线后用户反馈"启动 5 秒，内存 500MB"。重构用了 3 个月。如果一开始选 Tauri 或 Wails，这个坑完全可以避免。 本文目标：

沪市首份年报出炉，芯导科技2月2日披露的2025年年度报告显示，公司2025年实现营业收入3.94亿元，同比增长11.52%；归属于上市公司股东的净利润1.06亿元，同比下降4.91%；基本每股收益0.9元。公司拟向全体股东每10股派发现金红利4.3元（含税）。（证券时报）