Skip to content

extractColorsFromVueFile ​

从Vue单文件组件(SFC)中提取颜色引用信息,支持解析template、script、style三个section。

函数签名 ​

typescript
function extractColorsFromVueFile(
  code: string,
  filePath: string,
  options?: VueProcessingOptions
): ColorReference[]

interface VueProcessingOptions {
  validOnly?: boolean
  includeSections?: VueSectionType[]
  excludeSections?: VueSectionType[]
}

type VueSectionType = 'template' | 'script' | 'style'

参数 ​

参数名类型必填说明
codestring是Vue文件的完整代码内容
filePathstring是文件路径
options.validOnlyboolean否是否只返回有效的颜色
options.includeSectionsVueSectionType[]否要处理的sections
options.excludeSectionsVueSectionType[]否要排除的sections

返回值 ​

类型说明
ColorReference[]提取到的颜色引用数组

工作原理 ​

  1. 全局颜色提取:从整个文件代码中提取颜色(不区分section)
  2. 解析Vue文件:使用 parseVueFile 分离 template、script、style sections
  3. 过滤sections:根据 includeSections 和 excludeSections 过滤要处理的sections
  4. 提取section颜色:对每个section使用 extractColorsFromVueSection 提取颜色
  5. 合并去重:合并全局颜色和section颜色,使用 deduplicateColors 去重
  6. 返回结果:返回所有提取到的颜色引用

支持从Vue文件的各个部分提取颜色,适用于设计系统颜色提取场景。