成品图 - 图标氛围＋智能推荐配色#

1. 🧠 智能配色 (Smart Color)#

这是 Cola-Cover 最核心的功能。很多时候我们上传了一个 LOGO，却不知道背景该配什么颜色才好看。

实现逻辑：

我引入了颜色分析算法，当用户上传图片时，系统会：

1. 提取主色调：解析图片像素，通过聚类算法提取出 LOGO 的主色调（Primary）和次色调（Secondary）。
2. 生成推荐方案：
   • 纯色模式：直接推荐提取出的主色和互补色。
   • 渐变模式：基于主色调，自动计算出渐变角度和结束色，生成更有质感的线性渐变。
3. 文字自适应：利用 YIQ 算法计算背景亮度的感知值，自动判断文字应该用深色还是浅色（如黑/白/金/银），确保可读性。

这样，用户只需要上传一张图，剩下的配色工作全部交给算法。

2. 💧 纯净的高斯模糊引擎#

原版的模糊效果在处理某些复杂背景时显得不够干净。我重写了 Canvas 的渲染逻辑。

技术细节：

没有使用复杂的 CSS 滤镜叠加（这在导出图片时会失效），而是直接在 Canvas 绘图阶段操作：

1
ctx.filter = `blur(${state.glassBlur}px)`;
2
ctx.drawImage(canvases.bg, 0, 0);
3
ctx.fillStyle = hexToRgba(state.glassTintColor, state.glassOpacity / 100);
4
ctx.fillRect(0, 0, width, height);

支持 0-100px 的超大范围模糊调节，并允许叠加自定义色调。这使得它不仅能做“毛玻璃”，还能做“氛围感背景”。

3. 👁️ 粘连预览 (Sticky Preview)#

在 PC 端使用时，左侧的配置项很多，这会导致一个痛点：当我想修改底部的文字设置时，右侧的预览图已经被滚出屏幕了。

为了解决这个问题，我利用 CSS 的 position: sticky 特性重构了布局：

1
.preview-container {
2
  position: sticky;
3
  top: 1rem;
4
  align-self: flex-start; /* 关键属性，防止 flex 子元素拉伸导致 sticky 失效 */
5
}

现在，无论左侧配置栏有多长，右侧的预览图永远会吸附在屏幕顶部，真正做到“所见即所得”。

4. 🌙 完美的暗黑模式适配#

熬夜炉管总归 脑壳疼就算了 眼睛还是保护一下

利用 TailwindCSS 的 dark: 变体和 Vue 的 useDark 组合式 API，Cola-Cover 实现了全站的深色模式适配。