Learning on xiaotian's Blog

AI SDK

Sun, 29 Mar 2026 12:00:00 +0800

安装AI工具包

https://ai-sdk.dev/
安装依赖项

npm install ai @ai-sdk/react zod

https://ai-sdk.dev/docs/getting-started/tanstack-start
配置.env

app/api/chat/route.ts

import { convertToModelMessages, streamText, UIMessage } from "ai";
import { createDeepSeek } from "@ai-sdk/deepseek";

// Allow streaming responses up to 30 seconds
export const maxDuration = 30;
const deepseek = createDeepSeek({
 apiKey: process.env.DEEPSEEK_API_KEY ?? "",
 baseURL: process.env.DEEPSEEK_BASE_URL ?? "",
});
export async function POST(req: Request) {
 const { messages }: { messages: UIMessage[] } = await req.json();

 const result = streamText({
 model: deepseek("deepseek-chat"),
 system: "You are a helpful assistant.",
 messages: await convertToModelMessages(messages),
 });

 return result.toUIMessageStreamResponse();
}

https://ai-sdk.dev/docs/ai-sdk-ui/chatbot

页面 page.tsx

"use client";

import { useChat } from "@ai-sdk/react";
import { useEffect, useRef, useState } from "react";
import EastIcon from "@mui/icons-material/East";
export default function Page() {
 const [model, setModel] = useState("deepseek-v3");
 const [input, setInput] = useState("");

 const { messages, sendMessage } = useChat({});

 const handleChangeModel = () => {
 setModel(model === "deepseek-v3" ? "deepseek-r1" : "deepseek-v3");
 };
 const handleSubmit = () => {
 if (input.trim()) {
 sendMessage({ text: input });
 setInput("");
 }
 };
 const endRef = useRef<HTMLDivElement>(null);
 useEffect(() => {
 if (endRef.current) {
 endRef?.current?.scrollIntoView({ behavior: "smooth" });
 }
 }, [messages]);

 return (
 <div className="flex flex-col h-screen justify-between items-center">
 <div className="flex flex-col w-2/3 gap-8 overflow-y-auto justify-between flex-1">
 <div className="h-4"></div>
 <div className="flex flex-col gap-8 flex-1">
 {messages?.map((message) => (
 <div
 key={message.id}
 className={`rounded-lg flex flex-row ${message?.role === "assistant" ? "justify-start mr-18" : "justify-end ml-10"}`}
 >
 <p
 className={`inline-block p-2 rounded-lg ${message?.role === "assistant" ? "bg-blue-300" : "bg-slate-100"}`}
 >
 {message.parts.map((part, index) =>
 part.type === "text" ? (
 <span key={index}>{part.text}</span>
 ) : null,
 )}
 </p>
 </div>
 ))}
 </div>
 <div className="h-4" ref={endRef}></div>
 </div>

 {/* 输入框 */}
 <div className="flex flex-col items-center justify-center mt-4 shadow-lg border-[1px] border-gray-300 h-32 rounded-lg w-2/3">
 <textarea
 className="w-full rounded-lg p-3 h-30 focus:outline-none"
 value={input}
 onChange={(e) => setInput(e.target.value)}
 ></textarea>
 <div className="flex flex-row items-center justify-between w-full h-12 mb-2">
 <div>
 <div
 className={`flex flex-row items-center justify-center rounded-lg border-[1px] px-2 py-1 ml-2 cursor-pointer ${model === "deepseek-r1" ? "border-blue-300 bg-blue-200" : "border-gray-300"}`}
 onClick={handleChangeModel}
 >
 <p className="text-sm">深度思考(R1)</p>
 </div>
 </div>
 <div
 className="flex items-center justify-center border-2 mr-4 border-black p-1 rounded-full"
 onClick={handleSubmit}
 >
 <EastIcon></EastIcon>
 </div>
 </div>
 </div>
 </div>
 );
}

eventLoop

Sun, 29 Mar 2026 12:00:00 +0800

NeetCode Roadmap

Sun, 29 Mar 2026 12:00:00 +0800

第一阶段：核心基础
- Arrays & Hashing (数组与哈希表)
  - Two Pointers (双指针)
  - Stack (栈)
第二阶段：线性结构进阶
- Binary Search (二分查找)
- Sliding Window (滑动窗口)
- Linked List (链表)
第三阶段：树与堆 (核心枢纽)
- Trees (树)
  - Tries (前缀树)
  - Heap / Priority Queue (堆/优先队列)
  - Backtracking (回溯)
第四阶段：高级算法与图论
- 从堆延伸：
  - Intervals (区间)
  - Greedy (贪心)
  - Advanced Graphs (高级图论)
- 从回溯延伸：
  - Graphs (图)
  - 1-D DP (一维动态规划)
第五阶段：深度优化与综合
- 2-D DP (二维动态规划)
- Bit Manipulation (位运算)
- Math & Geometry (数学与几何)

合并两个有序链表

function mergeTwoLists(list1, list2) {
 // 递归终止：其中一个链表为空，直接返回另一个
 if (!list1) return list2; // list1 空了，list2 剩下的全接上
 if (!list2) return list1; // list2 空了，list1 剩下的全接上

 // 比较头节点，小的作为当前节点
 if (list1.val <= list2.val) {
 // list1 小，list1 当头
 list1.next = mergeTwoLists(list1.next, list2); // list1.next 指向合并后的结果
 return list1; // 返回当前头节点
 } else {
 // list2 小，list2 当头
 list2.next = mergeTwoLists(list1, list2.next); // list2.next 指向合并后的结果
 return list2; // 返回当前头节点
 }
}

执行流程：

Taildwind CSS

Sun, 29 Mar 2026 12:00:00 +0800

1. 尺寸与定位 (Sizing & Layout)

h-screen: 高度等于 100vh（视口高度）。
h-min-screen: 最小高度等于 100vh（保证至少撑满屏幕，内容多时可扩展）。
w-screen: 宽度等于 100vw（视口宽度）。
w-3/4: 宽度设置为 75%。
h-full: 高度设置为 100%（相对于父元素高度）。
w-full: 宽度设置为 100%。
gap-4: 网格或弹性布局的间隙大小（通常为 1rem / 16px）。

2. 背景与边框 (Background & Borders)

bg-slate-50: 背景颜色设为极浅的石板色。
bg-white: 背景颜色设为白色。
hover:bg-slate-200: 鼠标悬停时背景变为浅灰色（石板色 200）。
rounded-full: 彻底圆角（通常用于制作圆形按钮或药丸形状）。
rounded-md: 中等圆角（标准卡片或按钮常用）。

3. 间距 (Spacing)

p-1: 四周内边距（Padding）为 0.25rem / 4px。
p-4: 四周内边距为 1rem / 16px。
px-4: 左右（水平方向）内边距为 1rem / 16px。

4. 文本样式 (Typography)

text-2xl: 字体大小设置为 1.5rem / 24px，行高 2rem。
font-bold: 字体加粗。
text-xs: 最小字体大小（通常为 12px）。
tracking-widest: 字符间距最大化（增加字母之间的空隙）。
text-gray-500: 文字颜色设为中灰色。

5. 响应式与复杂布局 (Responsive & Advanced)

sm:w-1/2: 在 sm 屏幕（≥640px）及以上时，宽度为 50%。
lg:w-1/5: 在 lg 屏幕（≥1024px）及以上时，宽度为 20%。
flex-row: 弹性布局方向为水平行。
scroll-auto: 溢出时根据内容自动显示滚动条。
cursor-pointer: 鼠标悬停时显示小手图标（点击反馈）。
line-clamp-1: 文本超出 1 行时显示省略号。
line-clamp-2: 文本超出 2 行时显示省略号。

V8 引擎的底层逻辑

Sun, 29 Mar 2026 12:00:00 +0800

var_let_const 的区别

Sun, 29 Mar 2026 12:00:00 +0800

作用域

Sun, 29 Mar 2026 12:00:00 +0800

函数柯里化

Sun, 29 Mar 2026 12:00:00 +0800

函数柯里化

将一个接收多个参数的函数转换成一系列只接收单个参数的嵌套函数。

function sum(x, y, z) {
 return x + y + z;
}

function sum2(x) {
 return function (y) {
 return x + y;
 };
}

function curry(fn) {
 return function (x) {
 return function (y) {
 return function (z) {
 return fn(x, y, z);
 };
 };
 };
}
var curriedSum = curry((x, y, z) => {
 return x + y + z;
});
console.log("sum:" + sum(1, 2, 3));
console.log("sum2:" + sum2(1)(2));
console.log("curriedSum:" + curriedSum(1)(2)(3));

// curry(func) 的结果就是一个包装器 function(x)。
// 当它被像 curriedSum(1) 这样调用时，它的参数会被保存在词法环境中，然后返回一个新的包装器 function(y)。
// 然后这个包装器被以 2 为参数调用，最终它将该调用传递给原始的 func 函数。

偏函数

偏函数（Partial Function） 是指固定一个函数的部分参数，从而得到一个接收剩余参数的新函数。

应用：

实现一个柯里化（currying）版本的 log 函数

// 1. 原始 log 函数
function log(date, importance, message) {
 alert(`[${date.getHours()}:${date.getMinutes()}] [${importance}] ${message}`);
}

// 2. 通用 curry 函数
function curry(fn){
 return function curried(...args){
 // 检查当前传入的参数数量是否足够调用原函数
 if (args.length >= fn.length) {
 return fn.apply(this, args)// 调用原函数
 }else{
 // 返回一个新函数以继续收集参数
 return function(...nextArgs){
 return curried.apply(this, args.concat(nextArgs))
 }
 }
 }
}

// 3. 柯里化 log
const curriedLog = curry(log);

// 4. 测试：正常调用
curriedLog(new Date(), "DEBUG", "normal call")
// 5. 测试：柯里化调用
curriedLog(new Date())("INFO")("curried call");
// 6. 偏函数
const now = new Date()
const logNow = log(new Date())
logNow("WARN", "partial applied")

// 7. 进一步偏函数
const debugNow = logNow('DEBUG')
debugNow('deep partial')

闭包

Sun, 29 Mar 2026 12:00:00 +0800