theme-variable-manager-tool使用文档概这是一个用于多主题变量管理的工具，提供了直观的界面来增删

概述

这是一个用于多主题变量管理的工具，提供了直观的界面来增删改查项目中的主题变量。用户可以轻松编辑变量名称、注释及其在不同主题下的值，并支持实时搜索和保存操作。该工具旨在提高开发者管理多主题项目的效率，提供独立的表格滚动条，确保良好的用户体验。

安装

# 使用 npm 安装
npm install theme-variable-manager-tool
# 使用 yarn 安装
yarn add theme-variable-manager-tool


# 生成配置文件
npx theme-variable-manager-tool generate-config
# 运行工具
npx theme-variable-manager-tool start-tool

功能

变量管理
1. 支持对多个主题文件中的变量进行集中管理。用户可以查看每个变量在不同主题下的值，并通过表格界面实时修改。
2. 每个变量都有注释字段，帮助开发者记录变量的含义和用途。
3. 支持对变量名称、注释和每个主题的变量值进行编辑，确保变量的统一性和可追溯性。
搜索功能
1. 用户可以通过搜索框实时搜索变量，快速定位并编辑需要修改的变量。
2. 搜索结果根据变量名称过滤，并支持在表格中实时显示。
添加变量
1. 用户可以通过弹出窗口添加新变量。除了填写变量名称和注释外，还可以直接输入不同主题下的变量值。(变量名格式支持“_”、“-”连接，变量顺序按照变量名称字母顺序排列)
2. 添加时，支持输入多个主题的值，并立即更新至表格。
编辑变量
1. 点击表格中的变量名可以弹出编辑窗口，修改变量名称后会自动更新所有对应的配置。
2. 编辑完成后，表格内容会自动刷新，保持数据的实时性。
删除变量
1. 用户可以通过点击“删除”按钮删除不再需要的变量，操作简单直观。
保存功能
1. 用户修改或添加的变量在表格中可以实时保存到服务器。通过点击“保存”按钮，将所有变量信息上传至服务器端进行持久化保存。
2. 保存前，工具会自动更新表格中修改的数据，确保用户保存的是最新内容。

使用场景

该工具非常适用于需要管理多主题、多变量的前端项目，特别是对于有较多主题配色方案、样式配置需求的项目开发团队。通过该工具，开发者可以高效地对项目中的全局样式变量进行管理，提升开发和维护的效率。

文件类型及格式

fileType=less

{
  "fileType": "scss",
  "port": 3000,
  "themeFiles": [
    "./styles/themes/default.less",
    "./styles/themes/dark.less"
  ]
}

@import "../../test/theme.css";
@import "../../test/theme1.css";
@import "../../test/theme2.css";

@btn_bg: @primary-color; 
@btn_color: fade(#fff, 20); 
@primary_color: #444444; // 111
@primary-color: #ffffff; // 主题色

@import "../../test/theme.css";
@import "../../test/theme1.css";
@import "../../test/theme2.css";

@btn_bg: @primary-color; 
@btn_color: fade(#fff, 20); 
@primary_color: #444444; // 111

fileType=scss

{
  "fileType": "scss",
  "port": 3000,
  "themeFiles": [
    "./styles/themes/default.scss",
    "./styles/themes/dark.scss",
    "./styles/themes/green.scss"
  ]
}

@import "../../test/theme.css";
@import "../../test/theme1.css";
@import "../../test/theme2.css";

$btn_bg: $primary-color; 
$btn_color: fade(#fff, 20); 
$primary_color: #444444; // 111
$primary-color: #ffffff; // 主题色
$test_scss: #ffffff; // scss

@import "../../test/theme.css";
@import "../../test/theme1.css";
@import "../../test/theme2.css";

$btn_bg: $primary-color; 
$btn_color: fade(#fff, 20); 
$primary_color: #444444; // 111
$primary-color: #ffffff; // 主题色

theme-variable-manager-tool使用文档

概述

安装

功能

使用场景

文件类型及格式

UI