在公司项目和自己开源项目之间切换容易提交错误的提交者信息，比如在 github 项目用公司邮箱和账号 push 了代码，导致泄露隐私。本文将介绍一个非常优雅的方案的实现 git 公司账号和个人账号的自

前言 el-table作为前端开发中最常用的数据表格组件，行合并需求在实际项目中频繁出现，但官方文档介绍较为简略。本文结合开发中的实际需求，提供了一种简单、易用的el-table实现行合并的参考方案。

🎯 useForm：表单管理的核心 useForm是 React Hook Form 的核心 Hook，它提供了一系列方法和状态来管理整个表单。 基本用法与返回值： 属性/方法 描述

针对小型列表（数据量<10项）的组件拆分决策，若主要目标为SEO优化，则通常无需强制拆分。以下是具体分析和实施建议： ⚖️ 一、小型列表拆分的SEO收益分析 SEO核心影响因素

react 每个组件里有 js 逻辑和 css 样式。js 逻辑是通过 es module 做了模块化的，但是 css 并没有,不同组件样式都在全局，很容易冲突。因此出现了css modules。

函数组件每次渲染时都会生成一个全新的函数作用域，其中的 state、prop 都是该次渲染的快照。state 是不可变的，setState并不会修改当前state，而是触发新的渲染并生成新的state

用 Three.js 打造炫酷波浪粒子背景动画：从原理到实现 在现代 Web 开发中，动态背景是提升页面视觉冲击力的关键元素。波浪粒子动画以其流畅的运动轨迹、立体的空间感和可定制性，成为很多高端网站的

我们一直在研究 Yjs 协同及 quill 文本编辑器的相关协同功能，但并未对底层数据传输格式(Y.Text)及 quill.delta 做研究，今天就简单分析下 Delta 底层设计。

本文档主要介绍了如何使用 uni-app 进行跨平台应用开发的基本方法与实践。文中首先概述了 uni-app 的开发特点与整体框架结构，然后详细讲解了项目的生命周期函数、页面跳转逻辑以及常用的页面通等

React Fiber机制通过可中断渲染和优先级调度解决大型应用卡顿问题，提升用户体验和交互流畅度。

大家好，我是 elk，好久不见！距离上一篇文章发布已经过去 4 个月，这段时间因为频繁出差，学习与输出的节奏被打乱了不少，也逐渐松懈了下来。直到最近，才重新找回写东西的动力。 这次想开启一个全新的文章

在前端开发中，CSS 盒模型（Box Model）是布局的基础，而 `box-sizing` 属性决定了我们如何计算元素的宽度和高度。

日志不再裸奔：pd_log 让打印有型、写盘有序, 核心亮点： 级别日志：v/d/i/w/e 五级输出，语义清晰。 统一缓冲写盘。

在 ECharts 里，convertToPixel 和 convertFromPixel 是非常重要的一对方法 —— 它们的作用是： 我们一步一步来讲清楚它们的概念、用法和使用场景👇 🧩 一、先理解

在前端开发中，提取图片颜色是一个常见需求，比如根据图片主色调自动适配页面主题、生成图片配色方案等。手动实现颜色提取逻辑不仅复杂，还需处理像素分析、色彩聚类等技术难点。而 Color-Thief 插件恰

🧭 一、为什么要进行多环境部署？ 在现代 Web 开发中，我们常常需要在不同环境中测试与上线： 环境 说明 典型用途 🧪 Development 本地开发环境 本地调试、快速重启、实验功能 👀 Pre

今天想和大家分享一些在TypeScript中约束函数返回值类型的实用技巧。这些方法都是我在实际项目中踩过坑后总结出来的，希望能帮你写出更可靠的代码。

探索现代 CSS 色彩：从 HSL 到 OKLCH，打造动态色阶

在前端开发中，颜色是构建视觉体验的基石。我们早已习惯了 #RRGGBB 和 rgb()，但为了更直观地调色和实现动态主题，CSS 引入了更强大的颜色模型。本文将带你深入了解 HSL、LCH、OKLCH，以及革命性的 from 语法，并通过一个动态色阶块的实战案例，展示它们如何让我们的工作更高效、更富创造力。

1. HSL：人类友好的调色起点

HSL（Hue, Saturation, Lightness）即色相、饱和度、亮度，它将颜色用更符合人类直觉的方式描述。

• H (色相)：0-360，构成一个色环，红(0)、绿(120)、蓝(240)。
• S (饱和度)：0%-100%，从灰色到纯色。
• L (亮度)：0%-100%，从黑到白。

用法示例

/* 一个鲜艳的蓝色 */
color: hsl(240, 100%, 50%);
/* 一个柔和的灰色 */
background-color: hsl(0, 0%, 80%);

适配性

✅ 极佳。所有现代浏览器甚至 IE9+ 都支持，是兼容性项目的首选。

优缺点

• 优点：调色直观，易于理解和修改。
• 缺点：感知不均匀。相同亮度（L）下，不同色相的颜色看起来明暗差异很大，导致渐变不平滑，系统化配色困难。(ps:说人话就是同一亮度下不同颜色看起来亮度不一样,有的扎眼有的又显得很暗,看起来不和谐)

---

2. LCH：追求感知均匀的色彩空间

为了解决 HSL 的感知不均问题，LCH（Lightness, Chroma, Hue）应运而生。它基于 CIE LAB 色彩空间，旨在让颜色的数值变化与视觉感知保持一致。

• L (亮度)：0%-100%，感知上的绝对黑到绝对白。
• C (色度)：0 以上，代表颜色的鲜艳程度，数值越大越鲜艳。
• H (色相)：0-360，与 HSL 类似。

用法示例

/* 创建一组亮度相同、色相变化的平滑渐变 */
background: linear-gradient(to right, lch(70% 40 0), lch(70% 40 120), lch(70% 40 240));

适配性

🟡 良好。Chrome 111+, Firefox 113+, Safari 15+ 支持。不兼容 IE。

优缺点

• 优点：感知均匀，亮度变化符合视觉预期，非常适合制作平滑渐变和设计系统。
• 缺点：旧版浏览器不支持，参数含义对新手稍显复杂。

---

3. OKLCH：未来的色彩标准

OKLCH 是 LCH 的改良版，它提供了更佳的亮度感知均匀性，并原生支持 Display-P3 等广色域，是当前最先进的颜色模型。

• L (感知亮度)：0-1 或 0%-100%，感知均匀性最佳。
• C (色度)：0 以上，最大值取决于 L 和 H，通常 0.4 已非常鲜艳。
• H (色相)：0-360，色相感知极其稳定。

用法示例

/* 定义一组主色调，明暗变化非常自然 */
:root {
  --primary: oklch(0.7 0.25 250);
  --primary-hover: oklch(0.8 0.25 250);
}

适配性

🟡 良好。Chrome 111+, Firefox 113+, Safari 15.4+ 支持。不兼容 IE。

优缺点

• 优点：最佳感知均匀性，色相稳定，支持广色域，是构建高端设计系统的理想选择。
• 缺点：旧版浏览器不支持。

---

4. rgb(from ...)：革命性的相对颜色语法

CSS Color Module Level 4 带来了最激动人心的特性之一：相对颜色语法。它允许你从一个现有颜色中提取通道值，并在此基础上进行重新计算。 rgb(from #color r g b / alpha) 的含义是：

• from #color：指定一个基础颜色。
• r, g, b：分别代表红、绿、蓝通道，你可以使用 calc() 对它们进行计算。
• / alpha：可选，用于设置透明度。 此语法同样适用于 hsl(from ...)、lch(from ...) 和 oklch(from ...)！

适配性

🟡 良好。rgb(from ...) 支持更早（Chrome 65+），但 hsl/lch/oklch(from ...) 需要较新版本浏览器。IE 和旧版浏览器完全不支持。

5. 实战案例：用 OKLCH 打造动态色阶块

现在，让我们结合 Vue 和你提供的案例，看看如何用现代 CSS 优雅地实现一个动态色阶。

需求分析

我们有一组色块，它们的颜色基于一个基础色 --content-bg-color，并且每个色块的色相（Hue）依次递增，形成一个和谐的色阶。

传统方案的痛点

在过去，你可能需要：

1. 在 JS 中预先计算好 10 个颜色值。
2. 使用 Sass/Less 循环生成 10 个静态类。
3. 无法响应式地根据基础色变化。 这些方法要么缺乏动态性，要么代码冗余。

现代解决方案：oklch(from ...) + calc()

这是最简洁、最强大的实现方式。

第 1 步：定义基础色

在你的 CSS 中定义一个基础颜色，它可以随时被修改。

:root {
  --content-bg-color: #229100; /* 一个基础色 */
}

第 2 步：在 Vue 模板中使用相对颜色语法

<template>
  <div class="container">
    <div
      class="content-bg"
      v-for="i in 10"
      :key="i"
      :style="{
        backgroundColor: `oklch(from var(--content-bg-color) l c calc(h + ${(i - 1) * 35}) / 0.6)`,
        left: `${(i - 1) * 10}%`
      }"
    ></div>
  </div>
</template>
<style>
.container {
  position: relative;
  height: 100px;
}
.content-bg {
  position: absolute;
  width: 10%;
  height: 100%;
  box-shadow: 10px 0px 8px rgba(0, 0, 0, 0.2);
}
</style>

效果如下:

代码解析

• oklch(from var(--content-bg-color) ...): 这告诉浏览器，我们接下来的颜色计算都基于 --content-bg-color。
• l c: 我们保持基础色的亮度和色度不变。
• calc(h + ${(i - 1) * 35}): 这是核心！我们提取了基础色的色相 h，并为每个色块动态增加 35 度。
• 自动环绕：当 h + 35 的结果超过 360 时，浏览器会自动将其环绕回有效范围（例如，350 + 35 = 385 会被视为 25）。你无需手动处理 mod() 运算！

效果

你将得到一组从基础色开始，色相平滑过渡的色阶块。最棒的是，你只需修改 --content-bg-color 这一个变量，整个色阶就会自动更新为新的配色方案！ 这极大地提升了主题切换和动态配色的效率。

6. 总结与选择指南

颜色函数/语法	核心优势	适配性	推荐场景
HSL	兼容性高，直观	✅ 极佳	兼容性要求高的项目，简单调色
LCH	感知均匀，渐变平滑	🟡 良好	现代浏览器，设计系统，平滑渐变
OKLCH	最佳感知均匀，支持广色域	🟡 良好	现代项目首选，高端设计系统
from 语法	动态计算，主题化神器	🟡 良好	动态主题，智能交互，颜色变换

最终建议

• 新项目：毫不犹豫地使用 OKLCH，并配合 from 语法构建你的颜色系统。它带来的开发体验和视觉效果是革命性的。
• 维护旧项目：可以继续使用 HSL 保证兼容，但在新功能中逐步引入 LCH 或 OKLCH，并利用 @supports 进行优雅降级。
• 动态主题：from 语法是你的不二之选，它将颜色从“静态常量”变成了“动态变量”，开启了无限可能。 拥抱现代 CSS 色彩，让你的设计既美观又智能！

CSS 滤镜（filter）是 CSS3 推出的一组“即时图形后期”工具。
它不需要 Photoshop，也不需要 Canvas，只要一行声明就能把亮度、对比度、模糊、色相偏移等视觉效果实时渲染到任何元素上——图片、文字、视频、背景图，甚至整个模块都可以一次性处理。
下面带你从零开始认识这套“前端版美图秀秀”。

---

一、最简记忆：滤镜 = 函数链

filter: <函数-1>(参数) <函数-2>(参数) … ;

• 顺序从左到右依次执行，类似管道符。
• 每个函数都有明确区间，超出即 clamp（被裁剪）。
• 可以写任意多个，空格分隔；也可以只写一个。

---

二、10 个原生函数速查表

函数	作用	默认值	常见玩法
blur(px)	高斯模糊	0	毛玻璃背景、loading 遮罩
brightness(number)	线性亮度	1	0.6 夜间模式，1.4 高光
contrast(number)	对比度	1	1.5 让黑白更分明
grayscale(number)	去色	0	1 彻底灰度，0.5 淡彩
sepia(number)	复古棕褐	0	1 老照片，0.3 暖色打底
saturate(number)	饱和度	1	0 灰度，2 鲜艳
hue-rotate(deg)	色相旋转	0deg	180deg 反色，90deg 换季节
invert(number)	负片	0	1 完全反色，0.9 暗黑模式
opacity(number)	透明度	1	与 CSS opacity 差异见注①
drop-shadow()	真实投影	无	支持半透明 PNG 的“镂空”阴影

注①：filter:opacity() 会创建独立层叠上下文，而 opacity 属性不会；前者还能被硬件加速。

---

三、组合实战 4 例

1. 一键暗黑

.dark {
  filter: invert(1) hue-rotate(180deg) brightness(1.1);
}

原理：先反色，再把色相转半圈，最后略提亮，文字与图片一起“变黑”。

2. 毛玻璃遮罩

.mask {
  backdrop-filter: blur(10px) saturate(1.2);
  background: rgba(255,255,255,0.4);
}

backdrop-filter 只模糊背后内容，自身背景保持半透明，iOS 风导航栏标配。

3. 图片 hover 高亮

img {
  transition: filter .3s;
}
img:hover {
  filter: brightness(1.15) saturate(1.25);
}

鼠标移入瞬间“亮 + 艳”，移出平滑回落。

4. 文字故障风

.glitch {
  filter: contrast(2) hue-rotate(90deg);
  text-shadow: 2px 0 #0ff, -2px 0 #f0f;
}

高对比 + 色相偏移 + 双色阴影，赛博朋克感拉满。

---

四、性能与兼容

1. 硬件加速：现代浏览器会把 filter 丢给 GPU，通常比 Canvas 快，但：

   • 同时挂 5+ 个滤镜、大面积模糊（>30 px）或 4K 视频仍可能掉帧。
   • 移动端尽量 will-change:filter 提前声明，动画结束及时清除。

2. 兼容性（2025 年 5 月）：

   • 桌面：Chrome 53+、Edge 79+、Firefox 55+、Safari 14+ 全支持。
   • 移动端：iOS Safari 14+、Android Chrome 90+ 全覆盖。
   • 唯一老梗：IE 全系不支持，可优雅降级（无滤镜即原图）。

3. 前缀：如今无需 -webkit-，但老设备（Android 7）仍建议：

-webkit-filter: blur(5px);
filter: blur(5px);

---

五、常见坑点

• filter 会让元素生成包含块（contain: paint），内部 position:fixed 会“降级”为相对于该元素。
• drop-shadow 与 box-shadow 差异：前者沿不透明像素边缘生成，适合 PNG 图标；后者永远矩形。
• 滤镜不能作用于：
  – 父元素对子元素的背景穿透（background-filter 才行）
  – 部分表单控件（如 <video> 的 controls 条，需关闭原生控件再自定义）

---

六、一句话总结

CSS filter 把“后期调色”从设计软件搬到了浏览器，一行代码即可让网页拥有场景化氛围：
白天/黑夜、节日换肤、图片灰度、视频负片、毛玻璃导航……
掌握这 10 个函数，你就拥有了不刷新页面、不增加图片体积的即时视觉魔法。