ゴゴゴゴゴ
Skip to content
JOJO
首页文章项目知识库相册音乐
全站搜索
  • Navigate
  • Go to Page
  • escClose
© 2026 JOJOBuilt with Next.js

四种声音一个时代

这里收藏周杰伦、王力宏、陶喆与林俊杰的专辑,也把四位创作者放回完整唱片的语境。陶喆以松弛的律动重塑华语 R&B,周杰伦把说唱、古典与中国式旋律带进流行音乐,王力宏在抒情、摇滚和东方元素之间拓宽制作边界,林俊杰则用细密旋律与宽阔声线记录城市情绪。这里不打乱曲序,也不把专辑压缩成热门单曲;挑一张封面,从第一首听到最后一首,感受开场、中段与尾声如何共同完成一段叙事。

左右滑动浏览,轻触封面,从第一首开始听

正在播放的唱片

选择一首歌曲查看歌词
专辑封面

专辑

    请选择一张唱片等待选曲
    0:00
    0:00

    键盘快捷键

    搜索
    / 或 ⌘K
    回到首页
    G H
    博客列表
    G B
    切换主题
    T
    关闭弹窗
    Esc
    显示帮助
    ?

    按 Esc 关闭此窗口

    Blog550
    • 全部文章(550)
    • 包管理工具(8)
      • Bun 完全指南
      • fnm 完全指南
      • ni 完全指南
      • npm 完全指南
      • nrm 完全指南
      • nvm 完全指南
      • pnpm 完全指南
      • Yarn 完全指南
    • 并发异步(7)
      • 异步任务取消机制
      • Promise静态方法汇总
      • 封装超时工具方法
      • 并发与并行
      • 封装并发任务方法
      • 一道并发相关的面试题
      • 文件写入的原子化与并发操作
    • 打包工具(10)
      • Bun - 全栈 JavaScript 运行时与打包器
      • esbuild - 用 Go 写的极速打包器
      • Parcel - 零配置的极速打包工具
      • Rolldown - Vite 团队打造的 Rust 打包器
      • Rollup - 专注于库开发的打包工具
      • Rspack - Rust 驱动的 Webpack 替代品
      • SWC - Rust 驱动的超快编译器
      • Turbopack - Rust 驱动的下一代打包工具
      • Vite - 下一代前端构建工具
      • Webpack - 功能最强大的模块打包器
    • 算法(74)
      • 课程必看
      • 算法基本概念
      • 评判算法的好坏
      • 复习对数
      • 常见的复杂度
      • 常见算法思维
      • 递归
      • 数据结构
      • 数组结构
      • 顺序查找
      • 二分查找
      • 插值查找
      • 冒泡排序
      • 选择排序
      • 插入排序
      • 折半插入排序
      • 希尔排序
      • 归并排序
      • 快速排序
      • 链表结构
      • 双向链表
      • 单向循环链表
      • 双向循环链表
      • 栈结构
      • 队列结构
      • 循环队列
      • 击鼓传花游戏
      • 双端队列
      • 回文检查器
      • 集合结构
      • 字典结构
      • 树结构
      • 二叉树
      • 二叉树遍历
      • 前序中序还原二叉树
      • 后序中序还原二叉树
      • 二叉树深度优先搜索
      • 二叉树广度优先搜索
      • 二叉树的比较
      • 二叉树diff算法
      • 二叉搜索树
      • 二叉搜索树常见操作
      • 平衡二叉树
      • 二叉树左单旋
      • 二叉树右单旋
      • 二叉树双旋
      • 二叉堆
      • 堆排序
      • 哈夫曼树
      • 图结构
      • 邻接矩阵
      • 邻接表
      • 构建图
      • 图的深度优先搜索
      • 图的广度优先搜索
      • 普里姆算法
      • 克鲁斯卡尔算法
      • LRU算法
      • 动态规划
      • 青蛙跳台阶
      • 不同路径问题
      • 凑零钱问题
      • 打家劫舍
      • 背包问题
      • 回溯算法
      • 数字组合
      • 电话号码字母组合
      • 复原IP地址
      • 数组子集
      • 贪心算法
      • 柠檬水找零
      • 摆动序列
      • 分发糖果
      • 跳跃游戏
    • 文档协同(12)
      • 课程说明
      • 文档协同常见方案
      • OT冲突算法
      • CRDT冲突算法
      • CRDT数据结构
      • 文章翻译
      • Yjs基础介绍
      • Yjs快速上手
      • Yjs细节补充
      • 监听机制
      • 标签页同步
      • WebSocket基础知识
    • 项目实战(1)
      • ShipAny:1小时开发海外游客「中国攻略 + AI旅游助手」SaaS网站
    • AI工具(9)
      • Claude Code 完全指南
      • ComfyUI 完全指南
      • GitHub Copilot 入门指南
      • Coze 完全指南
      • Cursor vs GitHub Copilot 全面对比
      • Cursor-完整指南
      • Dify 完全指南
      • Droid 完全指南
      • n8n 完全指南
    • Astro(5)
      • Astro 入门指南
      • Astro 路由与页面
      • Astro 组件与样式
      • Astro 内容集合
      • Astro 集成与部署
    • CSS(25)
      • CSS 选择器基础
      • CSS 盒模型
      • CSS 定位与层叠
      • 浮动与 BFC
      • Flexbox 布局
      • Grid 布局
      • 响应式设计
      • 伪类与伪元素
      • 现代选择器
      • CSS 变量
      • 层叠层
      • 过渡效果
      • CSS 动画
      • 变换与滤镜
      • 容器查询
      • 文字与排版
      • 背景与渐变
      • 滚动与溢出
      • 裁剪与遮罩
      • 颜色系统
      • 边框与阴影
      • 逻辑属性
      • CSS 函数
      • 多列布局
      • 用户交互
    • ES6+(40)
      • let 和 const 命令
      • 解构赋值基础
      • 解构赋值进阶
      • 字符串的扩展
      • 字符串新增方法
      • 正则表达式扩展
      • 数值的扩展
      • BigInt 大整数
      • 函数默认参数
      • rest 参数与扩展运算符
      • 箭头函数详解
      • 尾调用优化
      • 数组扩展方法
      • 数组新增方法
      • 数组不可变方法
      • 对象的扩展
      • Object 新增方法
      • Symbol 基础
      • Symbol 进阶应用
      • Set 数据结构
      • Map 数据结构
      • TypedArray 类型化数组
      • Proxy 基础
      • Proxy 进阶应用
      • Reflect 元编程
      • 元编程实战案例
      • 装饰器 Decorator
      • Iterator 迭代器
      • Generator 基础
      • Generator 进阶
      • Promise 基础
      • Promise 进阶
      • async 函数
      • await 与错误处理
      • 异步迭代
      • Class 基础
      • Class 继承
      • Module 语法
      • Module 加载
      • ES 新特性汇总
    • HTML(8)
      • HTML 入门:构建 Web 的基石
      • HTML5 语义化:让页面更有意义
      • HTML 表单基础:用户交互的起点
      • HTML 表单进阶:验证与现代特性
      • HTML 多媒体:音视频与响应式图片
      • HTML APIs(上):客户端存储完全指南
      • HTML APIs(下):交互与设备能力
      • Canvas 与 SVG:Web 图形绘制入门
    • JavaScript(30)
      • JavaScript 简介
      • 变量与数据类型
      • 运算符
      • 类型转换
      • 控制流语句
      • 函数基础
      • 对象基础
      • 数组基础
      • 原型与原型链
      • this 关键字
      • 面向对象编程
      • 作用域
      • 闭包
      • 执行上下文
      • DOM 选择器
      • DOM 操作
      • 事件处理
      • 事件委托
      • 错误处理
      • 调试技巧
      • 正则表达式
      • Date 日期对象
      • Math 对象
      • 定时器
      • JSON 处理
      • BOM 基础
      • 本地存储
      • 表单处理
      • AJAX 与 Fetch
      • 严格模式
    • Langchain(37)
      • Langchain基本介绍
      • 模型接口
      • 缓存
      • 提示词模板
      • 结构化提示词
      • Message消息对象
      • 消息占位
      • LCEL
      • 并发流式返回结果
      • Runnable接口
      • 条件路由
      • 字符串解析器
      • 结构化输出解析器
      • 列表输出解析器
      • JSON解析器
      • 正则解析器
      • 本地资源Loader
      • Web资源Loader
      • 文本切割
      • 嵌入处理
      • 内存型向量库
      • 检索优化
      • RAG实践
      • Memory基础
      • 自动维护聊天记录
      • 实现长程记忆
      • 持久化记忆
      • 第三方存储
      • Tools基础
      • Tools配置
      • Zod基础
      • LangChain中使用工具
      • 重新认识Agent
      • LangChain中创建Agent
      • Agent实践
      • 回退机制
      • 回调机制
    • LLM(34)
      • LLM发展历史
      • N-Gram模型
      • 词袋模型
      • 词元
      • 嵌入
      • Transformer内部结构
      • Transformer解码策略
      • Transformer块
      • 本地部署大模型
      • Agent
      • 流式返回信息
      • 支持上下文
      • 获取实时消息
      • 外接DeepSeek
      • Function Calling
      • MCP理论知识
      • Resources
      • Schema
      • 注册资源模板
      • Prompts
      • 监听资源更新
      • 远程通信方式
      • MCP Client
      • 大模型幻觉
      • RCT构词法
      • 提示词常见技巧
      • 基于反馈迭代优化
      • 改善提示效果
      • 提示词评估工具
      • RAG基础知识
      • RAG实践
      • RAG架构演进
      • 大模型微调
      • LoRA微调
    • MCP(8)
      • MCP 入门:连接 AI 与外部世界的桥梁
      • 搭建第一个 MCP Server
      • MCP Tools 深入:让 AI 具备行动能力
      • MCP Resources:向 AI 暴露数据
      • MCP Prompts:预定义 AI 交互模板
      • MCP Transport 与部署
      • 构建 MCP Client:集成到你的应用
      • 实战:构建文档助手 MCP Server
    • Nest(31)
      • 快速上手Nest Cli
      • 三层架构与MVC
      • IoC
      • Nest中的装饰器
      • 模块的基本概念
      • 什么是AOP
      • 中间件与守卫
      • 拦截器
      • 文件上传
      • 自定义装饰器
      • mysql相关回顾
      • 对于ORM的理解
      • 快速上手Redis
      • Nest中使用Redis
      • 状态保存方式
      • Nest中实现Session与JWT
      • JWT登录注册后端处理
      • 使用Passport与循环引用问题
      • 通过环境变量获取配置信息
      • RBAC权限设计1
      • RBAC权限设计2
      • Nest中使用Websocket
      • 日志处理
      • 面向切面的日志处理
      • 快速入门GraphQL
      • Nest中使用GraphQL
      • Swagger API文档
      • 单元测试与E2E测试
      • 安全防护实践
      • 定时任务与任务调度
      • Bull队列与异步任务
    • Next(36)
      • Next.js 简介
      • 项目创建与配置
      • App Router 概述
      • 创建第一个页面
      • 开发工具与调试
      • TypeScript 配置
      • 文件系统路由
      • 动态路由
      • 嵌套路由与布局
      • 路由组
      • 并行路由
      • 拦截路由
      • 导航与链接
      • 中间件
      • Server Components
      • Client Components
      • 混合渲染模式
      • Streaming 与 Suspense
      • 静态与动态渲染
      • 数据获取基础
      • 缓存策略
      • Server Actions
      • Route Handlers
      • 数据库集成
      • 错误处理
      • 图片优化
      • 字体优化
      • 脚本优化
      • 元数据与 SEO
      • 性能分析
      • 认证基础
      • NextAuth 集成
      • 环境变量与配置
      • 测试策略
      • 部署方案
      • 项目实战
    • Nuxt(36)
      • web应用变迁史
      • 课程说明
      • SSR初体验
      • 水合操作
      • 改造CSR项目
      • 基本介绍
      • 配置概览
      • 组件类型
      • Nuxt模块
      • 嵌套路由
      • 动态路由
      • 请求数据
      • server目录
      • 应用部署
      • 中间件
      • 插件
      • layers
      • 过渡
      • 状态管理
      • 全匹配路由
      • 路由补充知识
      • 自定义路由
      • 自定义模块
      • 自定义指令
      • meta相关处理
      • 渲染模式
      • 错误处理
      • 不同阶段错误
      • 客户端渲染组件
      • 其余内置组件
      • 配置相关细节
      • 常用组合式函数
      • 服务器引擎
      • NuxtUI
      • SSR注意事项
      • 课程收官
    • React(55)
      • 序章:React课程介绍
      • React 基本介绍
      • JSX 基础语法
      • 组件与事件绑定
      • 组件状态与数据传递
      • 表单
      • 生命周期
      • Hooks
      • React-router介绍
      • React-router v版本学生管理系统课堂笔记
      • React-redux 介绍
      • Antd介绍
      • coder station前台系统笔记
      • coder station 后台系统笔记
      • Antd Pro介绍
      • Dva介绍
      • Umi.js 介绍
      • 属性默认值和类型验证
      • 高阶组件
      • Ref
      • Context
      • Render Props
      • Portals
      • 错误边界
      • 组件渲染性能优化
      • 前端框架的理解
      • Scheduler调度延时任务
      • 最小堆
      • React中的位运算
      • beginWork工作流程
      • completeWork工作流程
      • 图解diff算法
      • commit 工作流程
      • lane模型
      • React 中的事件
      • Hooks原理
      • React和Vue描述页面的区别
      • useState和useReducer
      • effect相关hook
      • useCallback和useMemo
      • useRef
      • Update
      • 性能优化策略之eagerState
      • 性能优化策略之bailout
      • bailout和ContextAPI
      • 性能优化对日常开发启示
      • 前端框架的分类
      • 虚拟 DOM
      • React 整体架构
      • React 渲染流程
      • Fiber双缓冲
      • MessageChannel
      • Scheduler调度普通任务
      • 课程介绍
      • 课程总结
    • ReactNative(33)
      • RN 基本介绍
      • 快速搭建 RN 开发环境
      • 复习 React 基础知识
      • RN 基础知识
      • 实战案例
      • RN 内置基础组件
      • 容器组件
      • Pressable 组件
      • 列表组件
      • 功能组件
      • 第三方组件库
      • 自定义组件案例:弹框组件
      • 自定义组件案例:单选组件
      • 基础API
      • 屏幕API
      • 设备API
      • 动画API
      • 手势API
      • React Navigation简介
      • 参数传递和标题栏信息配置
      • 嵌套路由与生命周期
      • 其他类型的导航
      • 状态管理介绍
      • Redux
      • 其他第三方库
      • Expo SDK
      • Fabric 架构
      • 渲染、提交和挂载
      • 实现跨平台
      • 扁平化视图
      • 线程模型
      • 如何打包发布应用
      • 通过 React Native CLI 搭建环境
    • TailwindCSS(7)
      • TailwindCSS基础介绍
      • 环境搭建与配置
      • 布局系统
      • 间距与尺寸系统
      • 颜色与主题
      • 响应式设计
      • 交互与动画
    • TypeScript(35)
      • 初识 TypeScript
      • 基础类型
      • 数组与元组
      • 对象类型
      • 函数类型
      • 类型推断与断言
      • 联合类型与交叉类型
      • 字面量类型与类型别名
      • 接口基础
      • 接口进阶
      • 接口继承与实现
      • 类基础
      • 类的访问修饰符
      • 类的继承
      • 类与接口对比
      • 泛型基础
      • 泛型接口与泛型类
      • 泛型约束
      • 内置工具类型(上)
      • 内置工具类型(下)
      • 泛型实战
      • 类型守卫
      • 类型收窄
      • 索引类型与索引签名
      • 映射类型
      • 条件类型
      • infer 关键字
      • 模板字面量类型
      • 模块系统
      • 命名空间
      • 声明文件基础
      • 声明文件进阶
      • tsconfig 配置详解
      • 类型体操入门
      • TypeScript 最佳实践
    • 杂谈(9)
      • Cloudflare 全栈部署指南
      • Creem 支付集成指南
      • Dokploy 自托管部署指南
      • GitHub OAuth 登录集成指南
      • Google OAuth 登录集成指南
      • Stripe 支付集成指南
      • Supabase 完全指南
      • Vercel 自动化部署指南
      • Zeabur 部署指南
    • 全部文章(550)
    • 包管理工具(8)
      • Bun 完全指南
      • fnm 完全指南
      • ni 完全指南
      • npm 完全指南
      • nrm 完全指南
      • nvm 完全指南
      • pnpm 完全指南
      • Yarn 完全指南
    • 并发异步(7)
      • 异步任务取消机制
      • Promise静态方法汇总
      • 封装超时工具方法
      • 并发与并行
      • 封装并发任务方法
      • 一道并发相关的面试题
      • 文件写入的原子化与并发操作
    • 打包工具(10)
      • Bun - 全栈 JavaScript 运行时与打包器
      • esbuild - 用 Go 写的极速打包器
      • Parcel - 零配置的极速打包工具
      • Rolldown - Vite 团队打造的 Rust 打包器
      • Rollup - 专注于库开发的打包工具
      • Rspack - Rust 驱动的 Webpack 替代品
      • SWC - Rust 驱动的超快编译器
      • Turbopack - Rust 驱动的下一代打包工具
      • Vite - 下一代前端构建工具
      • Webpack - 功能最强大的模块打包器
    • 算法(74)
      • 课程必看
      • 算法基本概念
      • 评判算法的好坏
      • 复习对数
      • 常见的复杂度
      • 常见算法思维
      • 递归
      • 数据结构
      • 数组结构
      • 顺序查找
      • 二分查找
      • 插值查找
      • 冒泡排序
      • 选择排序
      • 插入排序
      • 折半插入排序
      • 希尔排序
      • 归并排序
      • 快速排序
      • 链表结构
      • 双向链表
      • 单向循环链表
      • 双向循环链表
      • 栈结构
      • 队列结构
      • 循环队列
      • 击鼓传花游戏
      • 双端队列
      • 回文检查器
      • 集合结构
      • 字典结构
      • 树结构
      • 二叉树
      • 二叉树遍历
      • 前序中序还原二叉树
      • 后序中序还原二叉树
      • 二叉树深度优先搜索
      • 二叉树广度优先搜索
      • 二叉树的比较
      • 二叉树diff算法
      • 二叉搜索树
      • 二叉搜索树常见操作
      • 平衡二叉树
      • 二叉树左单旋
      • 二叉树右单旋
      • 二叉树双旋
      • 二叉堆
      • 堆排序
      • 哈夫曼树
      • 图结构
      • 邻接矩阵
      • 邻接表
      • 构建图
      • 图的深度优先搜索
      • 图的广度优先搜索
      • 普里姆算法
      • 克鲁斯卡尔算法
      • LRU算法
      • 动态规划
      • 青蛙跳台阶
      • 不同路径问题
      • 凑零钱问题
      • 打家劫舍
      • 背包问题
      • 回溯算法
      • 数字组合
      • 电话号码字母组合
      • 复原IP地址
      • 数组子集
      • 贪心算法
      • 柠檬水找零
      • 摆动序列
      • 分发糖果
      • 跳跃游戏
    • 文档协同(12)
      • 课程说明
      • 文档协同常见方案
      • OT冲突算法
      • CRDT冲突算法
      • CRDT数据结构
      • 文章翻译
      • Yjs基础介绍
      • Yjs快速上手
      • Yjs细节补充
      • 监听机制
      • 标签页同步
      • WebSocket基础知识
    • 项目实战(1)
      • ShipAny:1小时开发海外游客「中国攻略 + AI旅游助手」SaaS网站
    • AI工具(9)
      • Claude Code 完全指南
      • ComfyUI 完全指南
      • GitHub Copilot 入门指南
      • Coze 完全指南
      • Cursor vs GitHub Copilot 全面对比
      • Cursor-完整指南
      • Dify 完全指南
      • Droid 完全指南
      • n8n 完全指南
    • Astro(5)
      • Astro 入门指南
      • Astro 路由与页面
      • Astro 组件与样式
      • Astro 内容集合
      • Astro 集成与部署
    • CSS(25)
      • CSS 选择器基础
      • CSS 盒模型
      • CSS 定位与层叠
      • 浮动与 BFC
      • Flexbox 布局
      • Grid 布局
      • 响应式设计
      • 伪类与伪元素
      • 现代选择器
      • CSS 变量
      • 层叠层
      • 过渡效果
      • CSS 动画
      • 变换与滤镜
      • 容器查询
      • 文字与排版
      • 背景与渐变
      • 滚动与溢出
      • 裁剪与遮罩
      • 颜色系统
      • 边框与阴影
      • 逻辑属性
      • CSS 函数
      • 多列布局
      • 用户交互
    • ES6+(40)
      • let 和 const 命令
      • 解构赋值基础
      • 解构赋值进阶
      • 字符串的扩展
      • 字符串新增方法
      • 正则表达式扩展
      • 数值的扩展
      • BigInt 大整数
      • 函数默认参数
      • rest 参数与扩展运算符
      • 箭头函数详解
      • 尾调用优化
      • 数组扩展方法
      • 数组新增方法
      • 数组不可变方法
      • 对象的扩展
      • Object 新增方法
      • Symbol 基础
      • Symbol 进阶应用
      • Set 数据结构
      • Map 数据结构
      • TypedArray 类型化数组
      • Proxy 基础
      • Proxy 进阶应用
      • Reflect 元编程
      • 元编程实战案例
      • 装饰器 Decorator
      • Iterator 迭代器
      • Generator 基础
      • Generator 进阶
      • Promise 基础
      • Promise 进阶
      • async 函数
      • await 与错误处理
      • 异步迭代
      • Class 基础
      • Class 继承
      • Module 语法
      • Module 加载
      • ES 新特性汇总
    • HTML(8)
      • HTML 入门:构建 Web 的基石
      • HTML5 语义化:让页面更有意义
      • HTML 表单基础:用户交互的起点
      • HTML 表单进阶:验证与现代特性
      • HTML 多媒体:音视频与响应式图片
      • HTML APIs(上):客户端存储完全指南
      • HTML APIs(下):交互与设备能力
      • Canvas 与 SVG:Web 图形绘制入门
    • JavaScript(30)
      • JavaScript 简介
      • 变量与数据类型
      • 运算符
      • 类型转换
      • 控制流语句
      • 函数基础
      • 对象基础
      • 数组基础
      • 原型与原型链
      • this 关键字
      • 面向对象编程
      • 作用域
      • 闭包
      • 执行上下文
      • DOM 选择器
      • DOM 操作
      • 事件处理
      • 事件委托
      • 错误处理
      • 调试技巧
      • 正则表达式
      • Date 日期对象
      • Math 对象
      • 定时器
      • JSON 处理
      • BOM 基础
      • 本地存储
      • 表单处理
      • AJAX 与 Fetch
      • 严格模式
    • Langchain(37)
      • Langchain基本介绍
      • 模型接口
      • 缓存
      • 提示词模板
      • 结构化提示词
      • Message消息对象
      • 消息占位
      • LCEL
      • 并发流式返回结果
      • Runnable接口
      • 条件路由
      • 字符串解析器
      • 结构化输出解析器
      • 列表输出解析器
      • JSON解析器
      • 正则解析器
      • 本地资源Loader
      • Web资源Loader
      • 文本切割
      • 嵌入处理
      • 内存型向量库
      • 检索优化
      • RAG实践
      • Memory基础
      • 自动维护聊天记录
      • 实现长程记忆
      • 持久化记忆
      • 第三方存储
      • Tools基础
      • Tools配置
      • Zod基础
      • LangChain中使用工具
      • 重新认识Agent
      • LangChain中创建Agent
      • Agent实践
      • 回退机制
      • 回调机制
    • LLM(34)
      • LLM发展历史
      • N-Gram模型
      • 词袋模型
      • 词元
      • 嵌入
      • Transformer内部结构
      • Transformer解码策略
      • Transformer块
      • 本地部署大模型
      • Agent
      • 流式返回信息
      • 支持上下文
      • 获取实时消息
      • 外接DeepSeek
      • Function Calling
      • MCP理论知识
      • Resources
      • Schema
      • 注册资源模板
      • Prompts
      • 监听资源更新
      • 远程通信方式
      • MCP Client
      • 大模型幻觉
      • RCT构词法
      • 提示词常见技巧
      • 基于反馈迭代优化
      • 改善提示效果
      • 提示词评估工具
      • RAG基础知识
      • RAG实践
      • RAG架构演进
      • 大模型微调
      • LoRA微调
    • MCP(8)
      • MCP 入门:连接 AI 与外部世界的桥梁
      • 搭建第一个 MCP Server
      • MCP Tools 深入:让 AI 具备行动能力
      • MCP Resources:向 AI 暴露数据
      • MCP Prompts:预定义 AI 交互模板
      • MCP Transport 与部署
      • 构建 MCP Client:集成到你的应用
      • 实战:构建文档助手 MCP Server
    • Nest(31)
      • 快速上手Nest Cli
      • 三层架构与MVC
      • IoC
      • Nest中的装饰器
      • 模块的基本概念
      • 什么是AOP
      • 中间件与守卫
      • 拦截器
      • 文件上传
      • 自定义装饰器
      • mysql相关回顾
      • 对于ORM的理解
      • 快速上手Redis
      • Nest中使用Redis
      • 状态保存方式
      • Nest中实现Session与JWT
      • JWT登录注册后端处理
      • 使用Passport与循环引用问题
      • 通过环境变量获取配置信息
      • RBAC权限设计1
      • RBAC权限设计2
      • Nest中使用Websocket
      • 日志处理
      • 面向切面的日志处理
      • 快速入门GraphQL
      • Nest中使用GraphQL
      • Swagger API文档
      • 单元测试与E2E测试
      • 安全防护实践
      • 定时任务与任务调度
      • Bull队列与异步任务
    • Next(36)
      • Next.js 简介
      • 项目创建与配置
      • App Router 概述
      • 创建第一个页面
      • 开发工具与调试
      • TypeScript 配置
      • 文件系统路由
      • 动态路由
      • 嵌套路由与布局
      • 路由组
      • 并行路由
      • 拦截路由
      • 导航与链接
      • 中间件
      • Server Components
      • Client Components
      • 混合渲染模式
      • Streaming 与 Suspense
      • 静态与动态渲染
      • 数据获取基础
      • 缓存策略
      • Server Actions
      • Route Handlers
      • 数据库集成
      • 错误处理
      • 图片优化
      • 字体优化
      • 脚本优化
      • 元数据与 SEO
      • 性能分析
      • 认证基础
      • NextAuth 集成
      • 环境变量与配置
      • 测试策略
      • 部署方案
      • 项目实战
    • Nuxt(36)
      • web应用变迁史
      • 课程说明
      • SSR初体验
      • 水合操作
      • 改造CSR项目
      • 基本介绍
      • 配置概览
      • 组件类型
      • Nuxt模块
      • 嵌套路由
      • 动态路由
      • 请求数据
      • server目录
      • 应用部署
      • 中间件
      • 插件
      • layers
      • 过渡
      • 状态管理
      • 全匹配路由
      • 路由补充知识
      • 自定义路由
      • 自定义模块
      • 自定义指令
      • meta相关处理
      • 渲染模式
      • 错误处理
      • 不同阶段错误
      • 客户端渲染组件
      • 其余内置组件
      • 配置相关细节
      • 常用组合式函数
      • 服务器引擎
      • NuxtUI
      • SSR注意事项
      • 课程收官
    • React(55)
      • 序章:React课程介绍
      • React 基本介绍
      • JSX 基础语法
      • 组件与事件绑定
      • 组件状态与数据传递
      • 表单
      • 生命周期
      • Hooks
      • React-router介绍
      • React-router v版本学生管理系统课堂笔记
      • React-redux 介绍
      • Antd介绍
      • coder station前台系统笔记
      • coder station 后台系统笔记
      • Antd Pro介绍
      • Dva介绍
      • Umi.js 介绍
      • 属性默认值和类型验证
      • 高阶组件
      • Ref
      • Context
      • Render Props
      • Portals
      • 错误边界
      • 组件渲染性能优化
      • 前端框架的理解
      • Scheduler调度延时任务
      • 最小堆
      • React中的位运算
      • beginWork工作流程
      • completeWork工作流程
      • 图解diff算法
      • commit 工作流程
      • lane模型
      • React 中的事件
      • Hooks原理
      • React和Vue描述页面的区别
      • useState和useReducer
      • effect相关hook
      • useCallback和useMemo
      • useRef
      • Update
      • 性能优化策略之eagerState
      • 性能优化策略之bailout
      • bailout和ContextAPI
      • 性能优化对日常开发启示
      • 前端框架的分类
      • 虚拟 DOM
      • React 整体架构
      • React 渲染流程
      • Fiber双缓冲
      • MessageChannel
      • Scheduler调度普通任务
      • 课程介绍
      • 课程总结
    • ReactNative(33)
      • RN 基本介绍
      • 快速搭建 RN 开发环境
      • 复习 React 基础知识
      • RN 基础知识
      • 实战案例
      • RN 内置基础组件
      • 容器组件
      • Pressable 组件
      • 列表组件
      • 功能组件
      • 第三方组件库
      • 自定义组件案例:弹框组件
      • 自定义组件案例:单选组件
      • 基础API
      • 屏幕API
      • 设备API
      • 动画API
      • 手势API
      • React Navigation简介
      • 参数传递和标题栏信息配置
      • 嵌套路由与生命周期
      • 其他类型的导航
      • 状态管理介绍
      • Redux
      • 其他第三方库
      • Expo SDK
      • Fabric 架构
      • 渲染、提交和挂载
      • 实现跨平台
      • 扁平化视图
      • 线程模型
      • 如何打包发布应用
      • 通过 React Native CLI 搭建环境
    • TailwindCSS(7)
      • TailwindCSS基础介绍
      • 环境搭建与配置
      • 布局系统
      • 间距与尺寸系统
      • 颜色与主题
      • 响应式设计
      • 交互与动画
    • TypeScript(35)
      • 初识 TypeScript
      • 基础类型
      • 数组与元组
      • 对象类型
      • 函数类型
      • 类型推断与断言
      • 联合类型与交叉类型
      • 字面量类型与类型别名
      • 接口基础
      • 接口进阶
      • 接口继承与实现
      • 类基础
      • 类的访问修饰符
      • 类的继承
      • 类与接口对比
      • 泛型基础
      • 泛型接口与泛型类
      • 泛型约束
      • 内置工具类型(上)
      • 内置工具类型(下)
      • 泛型实战
      • 类型守卫
      • 类型收窄
      • 索引类型与索引签名
      • 映射类型
      • 条件类型
      • infer 关键字
      • 模板字面量类型
      • 模块系统
      • 命名空间
      • 声明文件基础
      • 声明文件进阶
      • tsconfig 配置详解
      • 类型体操入门
      • TypeScript 最佳实践
    • 杂谈(9)
      • Cloudflare 全栈部署指南
      • Creem 支付集成指南
      • Dokploy 自托管部署指南
      • GitHub OAuth 登录集成指南
      • Google OAuth 登录集成指南
      • Stripe 支付集成指南
      • Supabase 完全指南
      • Vercel 自动化部署指南
      • Zeabur 部署指南

    Droid 完全指南

    2025年11月13日 · 12 min
    ChatGPTClaude

    Factory Droid 是由 Factory.ai 打造的企业级 AI 编程助手,在 Terminal-Bench 基准测试中拿下了 58.75% 的得分,超越了 Opus 4.1 和 GPT-5。它直接在终端里运行,能帮你写代码、跑命令、做代码审查,还能对接 Jira、Notion、Slack 等团队工具。

    快速上手

    安装配置

    Terminal window
    # macOS/Linux 一键安装
    curl -fsSL https://app.factory.ai/cli | sh
    # Linux 用户需要安装 xdg-utils
    sudo apt-get install xdg-utils # Debian/Ubuntu
    Terminal window
    # Windows PowerShell
    iex "& { $(irm https://app.factory.ai/cli) }"

    配置 API Key:

    Terminal window
    # 从 https://app.factory.ai/settings/api-keys 获取 API Key
    export FACTORY_API_KEY='fk-your-api-key' # 加到 ~/.zshrc 或 ~/.bashrc

    启动:

    Terminal window
    cd your-project-folder
    droid

    进入全屏终端界面后,如果是首次使用会提示通过浏览器登录 Factory 账号。注意国内手机号无法注册,只能使用国外手机号,这一步比较麻烦,得花时间找平台,还得花钱买短信服务。 建议直接去闲鱼买一个 API Key,价格也不贵,几块钱就有几千万的token,可以多囤一些,最近好像每天都在涨价😂。 可以通过这个链接下载 droid 的 API Key 管理工具 Zdroid,把在闲鱼上买的key添加进去,最后终端输入 droid 愉快的用起来!

    基础用法

    Terminal window
    # 进入交互模式
    droid
    # 带问题进入交互模式
    droid "explain this project"
    # 单次执行(不进入交互模式)
    droid exec "summarize src/auth"
    # 从文件读取 prompt
    droid exec -f prompt.md
    # 管道输入
    git diff | droid exec "draft release notes"
    # 恢复已有会话
    droid exec -s session-123 "continue"

    快捷键速查

    操作说明
    Enter发送消息
    Shift + Enter换行
    Shift + Tab切换模式(普通/Spec 模式)
    !切换 Bash 模式(直接执行 shell 命令)
    Esc退出 Bash 模式
    ?查看所有快捷键
    Ctrl + C退出

    核心功能详解

    AGENTS.md - 让 AI 懂你的项目

    和 Claude Code 的 CLAUDE.md 类似,Droid 用 AGENTS.md 来理解项目上下文。区别在于:AGENTS.md 是跨工具标准,Cursor、Aider、Gemini CLI、Zed 等都支持。

    创建方式:

    在项目根目录新建 AGENTS.md:

    # MyProject
    后端 API 服务,使用 TypeScript + Express。
    ## Core Commands
    - Type-check: `pnpm check`
    - Test: `pnpm test --run`
    - Dev server: `pnpm dev`
    - Build: `pnpm build`
    ## Project Layout
    ├─ src/ → 源代码
    ├─ tests/ → 测试文件
    ├─ config/ → 配置文件
    ## Conventions
    - TypeScript strict mode,单引号,尾逗号
    - 用 interfaces 定义公共 API
    - 修 bug 前先写失败测试
    - PR 需要通过 lint + type check + 测试

    最佳实践:

    • 控制在 150 行以内,太长反而降低效果
    • 命令用反引号包裹,方便复制
    • 随代码更新,PR 审查时顺便检查
    • 不重复写文档,链接到现有的 README 或设计文档

    文件发现顺序:

    1. 当前目录的 AGENTS.md
    2. 向上查找到 repo 根目录
    3. 正在编辑文件所在目录的 AGENTS.md
    4. 个人全局配置:~/.factory/AGENTS.md

    Spec Mode - 大需求必备

    Spec Mode 是 Droid 的杀手锏功能。你只需用 4-6 句话描述需求,Droid 会自动生成详细的技术方案,确认后才开始改代码。

    激活方式: 按 Shift + Tab 切换到 Spec Mode

    工作流程:

    你的输入 → Droid 生成规格说明 → 你审查确认 → Droid 实现

    示例:

    [Spec Mode]
    添加用户数据导出功能。
    导出为 ZIP 文件,包含用户资料、帖子和上传的文件。
    完成后发邮件通知。需要符合 GDPR 要求。
    支持最大 2GB 的账户数据。

    Droid 会生成:

    • 完整的技术规格说明
    • 文件级别的修改计划
    • 测试策略和验证步骤
    • 安全合规考虑

    确认后的自主级别选项:

    选项说明
    Proceed批准方案,保持手动确认每个修改
    Low允许编辑文件和只读命令
    Medium允许可逆操作(安装依赖、本地 commit 等)
    High允许所有操作(git push、部署等)
    Keep iterating继续完善方案

    🔶 提示: 大需求用 Spec Mode 能省不少时间和 token,避免 AI 走弯路。

    自主级别(Autonomy Levels)

    droid exec 支持分级自主控制:

    Terminal window
    # 默认:只读分析
    droid exec "Analyze the auth system and create a plan"
    # Low:安全编辑
    droid exec --auto low "Add JSDoc comments to all functions"
    # Medium:开发工作
    droid exec --auto medium "Install deps, run tests, fix issues"
    # High:CI/CD 场景
    droid exec --auto high "Run tests, commit, and push changes"
    # 完全放开(仅限沙箱环境!)
    droid exec --skip-permissions-unsafe "..."

    🔶 警告: --skip-permissions-unsafe 移除所有安全检查,只在隔离的 Docker 容器中使用。

    斜杠命令

    交互模式下可用的命令:

    命令说明
    /help查看所有命令
    /model切换 AI 模型
    /settings配置 Droid 行为和偏好
    /mcp管理 MCP 插件
    /new开始新会话
    /sessions查看历史会话
    /compress压缩当前会话(保留摘要)
    /cost查看 token 用量
    /review启动代码审查工作流
    /droids管理自定义 Droid
    /skills管理和调用 Skills

    MCP 插件

    MCP (Model Context Protocol) 让 Droid 能连接外部数据源和工具。

    Terminal window
    # 打开 MCP 管理界面
    /mcp
    # 从注册表添加(推荐)
    # 选择 "Add from Registry",有 40+ 预配置的服务器
    # 命令行添加 HTTP 服务器
    droid mcp add linear https://mcp.linear.app/mcp --type http
    # 添加 stdio 服务器
    droid mcp add myserver "node /path/to/server.js"
    # 删除
    droid mcp remove linear

    内置集成(Factory Dashboard 配置):

    • Jira:自动读取 ticket 内容
    • Notion:获取文档上下文
    • Slack:读取讨论历史
    • GitHub:PR 和 Issue 上下文

    模型选择

    Terminal window
    # 交互模式切换
    /model
    # 命令行指定
    droid exec -m claude-sonnet-4-5-20250929 "review this code"
    # Spec Mode 用不同模型规划
    droid exec --spec-model claude-sonnet-4-5-20250929 --use-spec "add user profiles"

    可用模型:

    模型 ID名称推理支持
    claude-opus-4-5-20251101Claude Opus 4.5(默认)Off/Low/Medium/High
    gpt-5.1-codex-maxGPT-5.1-Codex-MaxLow/Medium/High/Extra High
    claude-sonnet-4-5-20250929Claude Sonnet 4.5Off/Low/Medium/High
    gemini-3-pro-previewGemini 3 ProLow/High
    glm-4.6Droid Core (GLM-4.6)None

    也支持 BYOK(Bring Your Own Key),使用格式:custom:<alias>

    实战案例

    探索代码库

    Terminal window
    droid "analyze this codebase and explain the overall architecture"
    droid "what technologies and frameworks does this project use?"
    droid "where are the main entry points and how is testing set up?"

    实现功能

    Terminal window
    # 简单描述,让 Droid 理解并实现
    droid "add comprehensive error handling to the payment processor in src/payments/processor.ts. Catch gateway timeouts and retry up to 3 times with exponential backoff. Similar retry logic exists in src/notifications/sender.ts. Run the payment integration tests to verify it works."

    修复 Bug

    Terminal window
    # 带上下文的 bug 描述
    droid "Users report file uploads fail randomly. Error in browser console: 'Network timeout'. Upload logic is in src/upload/handler.ts. Check for timeout handling."

    代码审查

    Terminal window
    # 审查未提交的修改
    droid "review my uncommitted changes and suggest improvements before I commit"
    # 用 git diff 审查
    droid "look at git diff and review these changes for security issues"

    重构

    Terminal window
    # 带约束的重构
    droid "extract the email sending logic into a separate service class. Keep the same interfaces but make it testable in isolation."

    对接外部工具

    Terminal window
    # 从 Jira ticket 实现功能
    droid "implement the feature described in this Jira ticket: https://company.atlassian.net/browse/PROJ-123"
    # 从 Notion 文档获取需求
    droid "build the API endpoints based on the spec in this Notion page: https://notion.so/..."

    Git 工作流

    Terminal window
    # 智能 commit
    droid "create a well-structured commit with a descriptive message following our team conventions"
    # 分析历史
    droid "analyze the last few commits and identify any potential issues or patterns"
    # 找历史代码
    droid "find the commit that introduced the caching mechanism and explain how it works"

    CI/CD 集成

    # GitHub Actions 示例
    - name: Run Droid Analysis
    env:
    FACTORY_API_KEY: ${{ secrets.FACTORY_API_KEY }}
    run: |
    droid exec --auto medium -f .github/prompts/deploy.md

    进阶技巧

    写好 Prompt 的几个要点

    ✅ 好的写法:

    Terminal window
    # 明确目标、指定文件、说明验证方式
    droid "Add comprehensive error handling to the payment processor in src/payments/processor.ts. Catch gateway timeouts and retry up to 3 times with exponential backoff. Run the payment integration tests to verify."

    🔶 避免的写法:

    Terminal window
    # 太模糊
    droid "make the app better"
    droid "fix the database"
    droid "can you help with the frontend?"

    管理上下文

    • 用 AGENTS.md 记录项目规范,Droid 自动读取
    • 用 @filename 引用具体文件
    • 设定边界:“only modify files in the auth directory”
    • 复杂任务拆分成多个阶段

    大功能拆分

    阶段 1:

    Terminal window
    droid "implement user data export backend API and job processing. Focus only on the server-side functionality, not the UI yet."

    阶段 2:

    Terminal window
    droid "add the frontend UI for data export using the API from Phase 1. Include progress indicators and download management."

    会话管理

    • 任务切换或上下文杂乱时开新会话
    • 用 /compress 压缩长会话
    • 用 /sessions 查看和恢复历史会话

    和 Claude Code 比有啥区别?

    特性DroidClaude Code
    上下文文件AGENTS.md(跨工具标准)CLAUDE.md(专用)
    Spec Mode✅ 内置❌ 无
    自主级别4 级(Low/Medium/High + unsafe)普通/YOLO 两档
    企业集成Jira/Notion/Slack 等内置需要 MCP 配置
    MCP 支持✅✅
    模型选择多模型 + BYOKAnthropic 模型为主
    定价API 按量API 按量

    选择建议:

    • 🎯 企业团队、需要对接内部工具 → Droid
    • 🎯 个人开发、已有 Anthropic 订阅 → Claude Code
    • 🎯 两个都用:日常开发用 Claude Code,大需求用 Droid 的 Spec Mode

    常见问题

    Token 消耗太快?

    几个省 token 的办法:

    • 用 /compress 压缩对话历史
    • AGENTS.md 控制在 150 行以内
    • 大需求用 Spec Mode 先确认方案
    • 简单任务用 droid exec 单次执行

    担心代码被改坏?

    Droid 有完整的保护机制:

    • Spec Mode 分析阶段只读,不会改任何东西
    • 每个修改都显示 diff,需要确认
    • 用 --auto 控制自主级别
    • 结合 git 随时回退

    让 Droid 更懂项目?

    • 认真写 AGENTS.md:项目简介、命令、规范、约束
    • 子目录也可以放特定的 AGENTS.md
    • 对接 Jira/Notion 等工具,让 Droid 读取更多上下文
    • 用 MCP 连接数据库、API 等数据源

    写在最后

    Droid 的核心价值:

    • ⚡ Spec Mode:大需求先规划再实现,省时省 token
    • 🔗 企业集成:内置 Jira/Notion/Slack 对接,团队协作更顺
    • 🛡️ 分级控制:从只读到完全自主,安全可控
    • 🤖 模型灵活:多模型支持 + BYOK,按需选择

    适合这些人:

    • 企业团队,需要对接内部工具
    • 喜欢终端工作流的开发者
    • 需要处理复杂功能开发的团队
    • 想在 CI/CD 中集成 AI 的团队

    上手建议:

    1. 先拿小项目试试基础功能
    2. 好好写 AGENTS.md
    3. 大需求用 Spec Mode
    4. 逐步尝试 MCP 和企业集成

    装上就能用,终端里的 AI 搭档,试试就知道有多方便了 🚀

    返回 BlogAI工具
    上一篇Dify 完全指南下一篇n8n 完全指南
    Skip toc
    • 快速上手
      • 安装配置
      • 基础用法
      • 快捷键速查
    • 核心功能详解
      • AGENTS.md - 让 AI 懂你的项目
      • Spec Mode - 大需求必备
      • 自主级别(Autonomy Levels)
      • 斜杠命令
      • MCP 插件
      • 模型选择
    • 实战案例
      • 探索代码库
      • 实现功能
      • 修复 Bug
      • 代码审查
      • 重构
      • 对接外部工具
      • Git 工作流
      • CI/CD 集成
    • 进阶技巧
      • 写好 Prompt 的几个要点
      • 管理上下文
      • 大功能拆分
      • 会话管理
    • 和 Claude Code 比有啥区别?
    • 常见问题
      • Token 消耗太快?
      • 担心代码被改坏?
      • 让 Droid 更懂项目?
    • 写在最后
    Table of Contents
    • 快速上手
      • 安装配置
      • 基础用法
      • 快捷键速查
    • 核心功能详解
      • AGENTS.md - 让 AI 懂你的项目
      • Spec Mode - 大需求必备
      • 自主级别(Autonomy Levels)
      • 斜杠命令
      • MCP 插件
      • 模型选择
    • 实战案例
      • 探索代码库
      • 实现功能
      • 修复 Bug
      • 代码审查
      • 重构
      • 对接外部工具
      • Git 工作流
      • CI/CD 集成
    • 进阶技巧
      • 写好 Prompt 的几个要点
      • 管理上下文
      • 大功能拆分
      • 会话管理
    • 和 Claude Code 比有啥区别?
    • 常见问题
      • Token 消耗太快?
      • 担心代码被改坏?
      • 让 Droid 更懂项目?
    • 写在最后
    > share on twitter