☰

CSS Extractor for Lanhu

从蓝湖网站上提取CSS代码并打印到控制台

作者
y666666666
日安装量
0
总安装量
1
评分
0 0 0
版本
1.0.0
创建于
2025-09-05
更新于
2025-09-05
大小
27.2 KB
许可证
MIT
适用于

CSS 提取器使用说明

简介

CSS 提取器是一个专为蓝湖设计平台开发的浏览器插件，能够自动从蓝湖设计稿中提取 CSS 样式并转换为 Tailwind CSS 类名。这个工具可以大大提高前端开发效率，减少从设计稿到代码的转换时间。

功能特点

  • 自动提取：从蓝湖设计稿中自动提取 CSS 样式
  • 双格式支持：同时提供标准 CSS 和 Tailwind CSS 格式
  • 实时更新：设计稿变化时自动更新提取的样式
  • 便捷复制：双击即可复制样式代码
  • 可拖动界面：弹窗支持自由拖动定位
  • 回到原位：一键将弹窗恢复到初始位置
  • 视觉反馈：复制成功时提供明确的视觉反馈

安装方法

  1. 确保已安装支持用户脚本的浏览器扩展（如 Tampermonkey）
  2. 将脚本代码复制到 Tampermonkey 中创建新脚本
  3. 保存脚本并确保已启用

使用方法

基本使用流程

  1. 打开蓝湖网站 (https://lanhuapp.com/)
  2. 进入任意设计稿页面
  3. 当选中设计元素时，CSS 提取器会自动弹出
  4. 弹窗中会显示提取的 CSS 样式和对应的 Tailwind 类

界面说明

弹窗界面包含以下元素：

  • 标题栏：显示"CSS 提取器"标题，可用于拖动弹窗
  • 回到原位按钮：点击将弹窗恢复到初始位置
  • 关闭按钮：关闭弹窗
  • 标签页：切换 CSS 和 Tailwind 视图
  • 复制提示：提示用户双击可复制内容
  • 内容区域：显示提取的样式代码

操作指南

查看提取的样式

  1. 在蓝湖设计稿中选择任意元素
  2. CSS 提取器弹窗会自动显示并提取样式
  3. 默认显示 Tailwind 格式，可点击"CSS"标签切换到标准 CSS 格式

复制样式代码

  1. 双击内容区域中的代码
  2. 代码会自动复制到剪贴板
  3. 成功复制时，内容区域会短暂变为绿色提示复制成功

移动弹窗位置

  1. 鼠标悬停在标题栏上（光标会变为移动图标）
  2. 按住鼠标左键并拖动到期望位置
  3. 释放鼠标按键完成移动

恢复弹窗位置

  1. 点击标题栏右侧的循环箭头图标按钮
  2. 弹窗会平滑过渡回到初始位置（右上角）

关闭弹窗

  1. 点击标题栏右侧的 X 图标
  2. 弹窗会关闭（下次选择设计元素时会再次显示）

提取的样式属性

CSS 格式包含

  • 宽度和高度
  • 背景颜色
  • 边框样式和圆角
  • 字体大小、颜色和粗细
  • 其他原始 CSS 属性

Tailwind 格式转换

自动将 CSS 属性转换为对应的 Tailwind 类名：

  • width → w-[值]
  • height → h-[值]
  • background → bg-[值]
  • border-radius → rounded-[值]
  • font-size → text-[值]
  • color → text-[值]
  • font-weight → 对应的 Tailwind 字重类名

注意事项

  • 插件仅在蓝湖网站 (lanhuapp.com) 域名下生效
  • 提取的 CSS 样式会同时显示在控制台和弹窗中
  • 窗口大小调整时，弹窗位置会自动修正以保持在可视区域内
  • 拖动过程中弹窗会略微缩放和透明化以提供视觉反馈

故障排除

如果 CSS 提取器未正常工作，请尝试以下步骤：

  1. 确认已在蓝湖网站上并已打开设计稿
  2. 检查浏览器控制台是否有初始化提示信息
  3. 刷新页面重新加载脚本
  4. 确认 Tampermonkey 已启用该脚本

技术说明

  • 使用 MutationObserver 监听蓝湖界面变化
  • 通过防抖函数优化性能，避免频繁更新
  • 使用 CSS 动画提供流畅的交互体验
  • 支持拖放功能和位置记忆