zen-gitsync 2.7.16 → 2.8.1

package/scripts/README_STYLE_VARS.md

@@ -0,0 +1,180 @@
+# CSS 样式变量标准化工具
+
+## 功能说明
+
+该脚本将项目中的 `border-radius` 和 `box-shadow` 值转换为标准的 CSS 变量引用。
+
+## 转换规则
+
+### border-radius 映射
+
+| 原始值 | 转换后 | CSS变量定义 |
+|--------|--------|-------------|
+| 2px    | var(--radius-xs) | 2px |
+| 3px    | var(--radius-sm) | 3px |
+| 4px    | var(--radius-base) | 4px |
+| 6px    | var(--radius-md) | 6px |
+| 8px    | var(--radius-lg) | 8px |
+| 12px   | var(--radius-xl) | 12px |
+
+### box-shadow 映射
+
+| 原始值 | 转换后 | 用途 |
+|--------|--------|------|
+| 0 1px 3px rgba(0, 0, 0, 0.04) | var(--shadow-sm) | 小阴影 |
+| 0 1px 4px rgba(0, 0, 0, 0.04) | var(--shadow-base) | 基础阴影 |
+| 0 2px 8px rgba(0, 0, 0, 0.08) | var(--shadow-md) | 中等阴影 |
+| 0 4px 12px rgba(0, 0, 0, 0.08) | var(--shadow-lg) | 大阴影 |
+| 0 8px 24px rgba(0, 0, 0, 0.12) | var(--shadow-xl) | 超大阴影 |
+
+#### 模糊匹配规则
+
+对于未精确匹配的 box-shadow 值，脚本会根据偏移量和模糊度智能选择：
+
+- **小阴影** (--shadow-sm): offset ≤ 2px, blur ≤ 4px
+- **中等阴影** (--shadow-md): offset 2-4px, blur 6-12px
+- **大阴影** (--shadow-lg): offset 4-8px, blur 12-24px
+
+## 使用方法
+
+### 预览模式（推荐先运行）
+
+```bash
+# 预览将要进行的更改，不修改文件
+node scripts/convert-to-standard-vars.js --dry-run
+```
+
+### 实际应用
+
+```bash
+# 应用更改到文件
+node scripts/convert-to-standard-vars.js
+```
+
+## 转换示例
+
+### border-radius 转换
+
+**转换前：**
+```css
+.card {
+  border-radius: 8px;
+}
+
+.button {
+  border-radius: 6px;
+}
+```
+
+**转换后：**
+```css
+.card {
+  border-radius: var(--radius-lg);
+}
+
+.button {
+  border-radius: var(--radius-md);
+}
+```
+
+### box-shadow 转换
+
+**转换前：**
+```css
+.card {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.modal {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+```
+
+**转换后：**
+```css
+.card {
+  box-shadow: var(--shadow-md);
+}
+
+.modal {
+  box-shadow: var(--shadow-lg);
+}
+```
+
+## 支持的文件类型
+
+- `.vue` - Vue 单文件组件
+- `.scss` - Sass 样式文件
+- `.css` - 纯 CSS 文件
+
+## 扫描范围
+
+脚本会扫描 `src` 目录下的所有目标文件，自动跳过：
+- `node_modules` 目录
+- `.git` 目录
+- `dist` 目录
+
+## 输出报告
+
+执行完成后会显示详细的统计报告：
+
+```
+📊 转换统计报告
+============================================================
+总文件数: 150
+修改文件数: 38
+border-radius 替换次数: 67
+box-shadow 替换次数: 42
+
+📋 border-radius 替换详情:
+  8px => var(--radius-lg): 28 次
+  6px => var(--radius-md): 19 次
+  4px => var(--radius-base): 12 次
+  ...
+
+📋 box-shadow 替换详情:
+  0 2px 8px rgba(0, 0, 0, 0.08) => var(--shadow-md): 23 次
+  0 4px 12px rgba(0, 0, 0, 0.08) => var(--shadow-lg): 15 次
+  ...
+```
+
+## 注意事项
+
+1. **备份建议**：运行脚本前建议先使用 `--dry-run` 参数预览更改
+2. **Git 提交**：建议在运行前提交当前代码，方便回滚
+3. **检查结果**：转换完成后请检查 Git diff，确认转换符合预期
+4. **测试验证**：转换后请运行项目测试，确保样式显示正常
+
+## 优势
+
+使用 CSS 变量的好处：
+
+1. **统一管理**：所有样式值在 `variables.scss` 中统一定义
+2. **易于维护**：修改变量值即可全局更新
+3. **主题支持**：方便实现深色主题等样式变体
+4. **语义化**：变量名更具可读性
+5. **一致性**：确保整个项目使用统一的设计规范
+
+## 回滚方法
+
+如果需要回滚更改：
+
+```bash
+# 如果还未提交
+git checkout -- src/
+
+# 如果已提交
+git revert <commit-hash>
+```
+
+## 组合使用
+
+该脚本可以与间距转换脚本配合使用，实现完整的样式标准化：
+
+```bash
+# 1. 转换间距值
+node scripts/convert-spacing-to-vars.js
+
+# 2. 转换圆角和阴影
+node scripts/convert-to-standard-vars.js
+```

package/scripts/convert-colors-to-vars.cjs

@@ -0,0 +1,272 @@
+/**
+ * 将项目中硬编码的颜色值转换为 CSS 变量
+ * 
+ * 根据 variables.scss 中定义的颜色变量进行映射
+ * 
+ * 使用方式：
+ * node scripts/convert-colors-to-vars.cjs [--dry-run]
+ * 
+ * --dry-run: 预览模式，不实际修改文件
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// 获取命令行参数
+const args = process.argv.slice(2);
+const isDryRun = args.includes('--dry-run');
+
+// 颜色映射表（基于 variables.scss）
+const COLOR_MAP = {
+  // 主色调
+  '#409eff': 'var(--color-primary)',
+  '#5a67d8': 'var(--color-primary-light)',
+  '#337ecc': 'var(--color-primary-dark)',
+  '#66b1ff': 'var(--color-primary-light)',
+  '#a0cfff': 'var(--color-primary-light)',
+  
+  // 成功色
+  '#67c23a': 'var(--color-success)',
+  '#10b981': 'var(--color-success-light)',
+  '#85ce61': 'var(--color-success)',
+  '#b3e19d': 'var(--color-success)',
+  
+  // 警告色
+  '#e6a23c': 'var(--color-warning)',
+  '#f59e0b': 'var(--color-warning-light)',
+  '#ebb563': 'var(--color-warning)',
+  '#f3d19e': 'var(--color-warning)',
+  
+  // 危险色
+  '#f56c6c': 'var(--color-danger)',
+  '#ef4444': 'var(--color-danger-light)',
+  '#dc2626': 'var(--color-danger-dark)',
+  '#f78989': 'var(--color-danger)',
+  
+  // 信息色
+  '#909399': 'var(--color-info)',
+  '#8b5cf6': 'var(--color-info-light)',
+  
+  // 基础颜色
+  '#ffffff': 'var(--color-white)',
+  '#fff': 'var(--color-white)',
+  '#000000': 'var(--color-black)',
+  '#000': 'var(--color-black)',
+  
+  // 灰色系列
+  '#f9fafb': 'var(--color-gray-50)',
+  '#f3f4f6': 'var(--color-gray-100)',
+  '#e5e7eb': 'var(--color-gray-200)',
+  '#d1d5db': 'var(--color-gray-300)',
+  '#9ca3af': 'var(--color-gray-400)',
+  '#6b7280': 'var(--color-gray-500)',
+  '#4b5563': 'var(--color-gray-600)',
+  '#374151': 'var(--color-gray-700)',
+  '#1f2937': 'var(--color-gray-800)',
+  '#111827': 'var(--color-gray-900)',
+  
+  // 文字颜色
+  '#303133': 'var(--text-primary)',
+  '#606266': 'var(--text-secondary)',
+  '#909399': 'var(--text-tertiary)',
+  '#c0c4cc': 'var(--text-placeholder)',
+  '#a8abb2': 'var(--text-placeholder)',
+  
+  // Git 状态颜色
+  '#10b981': 'var(--git-status-added)',
+  '#f59e0b': 'var(--git-status-modified)',
+  '#ef4444': 'var(--git-status-deleted)',
+  '#8b5cf6': 'var(--git-status-untracked)',
+  '#f97316': 'var(--git-status-conflicted)',
+  
+  // 背景色（特殊）
+  '#f5f5f5': 'var(--bg-page)',
+  '#f8fafc': 'var(--bg-container-hover)',
+  '#2d2d2d': 'var(--bg-code-dark)',
+  '#f6f8fa': 'var(--bg-code)',
+  
+  // 其他常见颜色
+  '#f8faff': '#f8faff', // 特殊渐变色，暂时保留
+  '#eef4ff': '#eef4ff',
+  '#fff2e6': '#fff2e6',
+  '#f8f8f2': '#f8f8f2',
+};
+
+// 需要处理的文件扩展名
+const TARGET_EXTENSIONS = ['.vue', '.scss', '.css'];
+
+// 需要跳过的文件
+const SKIP_FILES = ['variables.scss', 'dark-theme.scss'];
+
+// 统计信息
+let stats = {
+  totalFiles: 0,
+  modifiedFiles: 0,
+  totalReplacements: 0,
+  replacementDetails: {},
+  skippedColors: new Set(),
+};
+
+console.log(`\n运行模式: ${isDryRun ? '预览模式（不会修改文件）' : '修改模式'}\n`);
+
+/**
+ * 递归扫描目录
+ */
+function scanDirectory(dir, fileList = []) {
+  const files = fs.readdirSync(dir);
+  
+  files.forEach(file => {
+    const filePath = path.join(dir, file);
+    const stat = fs.statSync(filePath);
+    
+    if (stat.isDirectory()) {
+      if (file !== 'node_modules' && file !== '.git' && file !== 'dist') {
+        scanDirectory(filePath, fileList);
+      }
+    } else {
+      const ext = path.extname(file);
+      if (TARGET_EXTENSIONS.includes(ext) && !SKIP_FILES.includes(file)) {
+        fileList.push(filePath);
+      }
+    }
+  });
+  
+  return fileList;
+}
+
+/**
+ * 规范化颜色值（统一为小写）
+ */
+function normalizeColor(color) {
+  return color.toLowerCase();
+}
+
+/**
+ * 处理文件内容
+ */
+function processFileContent(content, filePath) {
+  let modified = false;
+  let newContent = content;
+  
+  // 匹配 6位 和 3位 十六进制颜色
+  const colorRegex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})\b/g;
+  
+  newContent = newContent.replace(colorRegex, (match) => {
+    const normalizedColor = normalizeColor(match);
+    
+    // 如果是3位颜色，展开为6位
+    let expandedColor = normalizedColor;
+    if (normalizedColor.length === 4) {
+      expandedColor = '#' + normalizedColor[1] + normalizedColor[1] +
+                           normalizedColor[2] + normalizedColor[2] +
+                           normalizedColor[3] + normalizedColor[3];
+    }
+    
+    // 查找映射
+    const mappedVar = COLOR_MAP[normalizedColor] || COLOR_MAP[expandedColor];
+    
+    if (mappedVar && mappedVar !== match) {
+      // 记录替换
+      stats.replacementDetails[match] = (stats.replacementDetails[match] || 0) + 1;
+      stats.totalReplacements++;
+      modified = true;
+      return mappedVar;
+    } else if (!mappedVar) {
+      // 记录未映射的颜色
+      stats.skippedColors.add(match);
+    }
+    
+    return match;
+  });
+  
+  return { content: newContent, modified };
+}
+
+/**
+ * 处理单个文件
+ */
+function processFile(filePath) {
+  try {
+    const content = fs.readFileSync(filePath, 'utf8');
+    const { content: newContent, modified } = processFileContent(content, filePath);
+    
+    if (modified) {
+      if (!isDryRun) {
+        fs.writeFileSync(filePath, newContent, 'utf8');
+      }
+      stats.modifiedFiles++;
+      console.log(`${isDryRun ? '📋 [预览]' : '✅'} ${filePath}`);
+      return true;
+    }
+    
+    return false;
+  } catch (error) {
+    console.error(`❌ 处理文件失败: ${filePath}`, error.message);
+    return false;
+  }
+}
+
+/**
+ * 主函数
+ */
+function main() {
+  const projectRoot = path.join(__dirname, '..');
+  const srcDir = path.join(projectRoot, 'src');
+  
+  console.log('🚀 开始扫描并转换颜色值...\n');
+  console.log(`📁 项目根目录: ${projectRoot}`);
+  console.log(`📁 扫描目录: ${srcDir}\n`);
+  
+  // 扫描所有目标文件
+  const files = scanDirectory(srcDir);
+  stats.totalFiles = files.length;
+  
+  console.log(`📊 找到 ${files.length} 个文件需要检查\n`);
+  console.log('🔄 开始处理文件...\n');
+  
+  // 处理每个文件
+  files.forEach(file => {
+    processFile(file);
+  });
+  
+  // 输出统计信息
+  console.log('\n' + '='.repeat(60));
+  console.log('📊 转换统计报告');
+  console.log('='.repeat(60));
+  console.log(`总文件数: ${stats.totalFiles}`);
+  console.log(`修改文件数: ${stats.modifiedFiles}`);
+  console.log(`总替换次数: ${stats.totalReplacements}`);
+  
+  if (Object.keys(stats.replacementDetails).length > 0) {
+    console.log('\n📋 替换详情:');
+    Object.entries(stats.replacementDetails)
+      .sort((a, b) => b[1] - a[1])
+      .forEach(([color, count]) => {
+        const varName = COLOR_MAP[color.toLowerCase()];
+        console.log(`  ${color} => ${varName}: ${count} 次`);
+      });
+  }
+  
+  if (stats.skippedColors.size > 0) {
+    console.log('\n⚠️  未映射的颜色（需要手动检查）:');
+    Array.from(stats.skippedColors)
+      .sort()
+      .forEach(color => {
+        console.log(`  ${color}`);
+      });
+  }
+  
+  if (isDryRun) {
+    console.log('\n💡 提示: 这是预览模式，文件未被修改');
+    console.log('   移除 --dry-run 参数以实际应用更改');
+  } else {
+    console.log('\n✨ 转换完成！');
+  }
+}
+
+// 运行主函数
+if (require.main === module) {
+  main();
+}
+
+module.exports = { processFileContent };

package/scripts/convert-fontsize-to-vars.cjs

@@ -0,0 +1,207 @@
+/**
+ * 将项目中硬编码的 font-size 值转换为 CSS 变量
+ * 
+ * 根据 variables.scss 中定义的字体大小变量进行映射
+ * 
+ * 使用方式：
+ * node scripts/convert-fontsize-to-vars.cjs [--dry-run]
+ * 
+ * --dry-run: 预览模式，不实际修改文件
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// 获取命令行参数
+const args = process.argv.slice(2);
+const isDryRun = args.includes('--dry-run');
+
+// 字体大小映射表（基于 variables.scss）
+const FONT_SIZE_MAP = {
+  '10px': 'var(--font-size-xs)',
+  '12px': 'var(--font-size-sm)',
+  '13px': 'var(--font-size-sm)', // 13px 映射到 sm (12px)
+  '14px': 'var(--font-size-base)',
+  '15px': 'var(--font-size-base)', // 15px 映射到 base (14px)
+  '16px': 'var(--font-size-md)',
+  '18px': 'var(--font-size-lg)',
+  '20px': 'var(--font-size-xl)',
+  '22px': 'var(--font-size-2xl)',
+  '24px': 'var(--font-size-3xl)',
+  
+  // rem 单位映射
+  '0.625rem': 'var(--font-size-xs)',    // 10px
+  '0.75rem': 'var(--font-size-sm)',     // 12px
+  '0.875rem': 'var(--font-size-base)',  // 14px
+  '1rem': 'var(--font-size-md)',        // 16px
+  '1.125rem': 'var(--font-size-lg)',    // 18px
+  '1.25rem': 'var(--font-size-xl)',     // 20px
+  '1.375rem': 'var(--font-size-2xl)',   // 22px
+  '1.5rem': 'var(--font-size-3xl)',     // 24px
+};
+
+// 需要处理的文件扩展名
+const TARGET_EXTENSIONS = ['.vue', '.scss', '.css'];
+
+// 需要跳过的文件
+const SKIP_FILES = ['variables.scss', 'dark-theme.scss'];
+
+// 统计信息
+let stats = {
+  totalFiles: 0,
+  modifiedFiles: 0,
+  totalReplacements: 0,
+  replacementDetails: {},
+  skippedSizes: new Set(),
+};
+
+console.log(`\n运行模式: ${isDryRun ? '预览模式（不会修改文件）' : '修改模式'}\n`);
+
+/**
+ * 递归扫描目录
+ */
+function scanDirectory(dir, fileList = []) {
+  const files = fs.readdirSync(dir);
+  
+  files.forEach(file => {
+    const filePath = path.join(dir, file);
+    const stat = fs.statSync(filePath);
+    
+    if (stat.isDirectory()) {
+      if (file !== 'node_modules' && file !== '.git' && file !== 'dist') {
+        scanDirectory(filePath, fileList);
+      }
+    } else {
+      const ext = path.extname(file);
+      if (TARGET_EXTENSIONS.includes(ext) && !SKIP_FILES.includes(file)) {
+        fileList.push(filePath);
+      }
+    }
+  });
+  
+  return fileList;
+}
+
+/**
+ * 处理文件内容
+ */
+function processFileContent(content, filePath) {
+  let modified = false;
+  let newContent = content;
+  
+  // 匹配 font-size 属性
+  // 支持 px 和 rem 单位
+  const fontSizeRegex = /(\bfont-size\s*:\s*)(\d+(?:\.\d+)?(?:px|rem))\b/g;
+  
+  newContent = newContent.replace(fontSizeRegex, (match, prefix, value) => {
+    const mappedVar = FONT_SIZE_MAP[value];
+    
+    if (mappedVar && mappedVar !== value) {
+      // 记录替换
+      stats.replacementDetails[value] = (stats.replacementDetails[value] || 0) + 1;
+      stats.totalReplacements++;
+      modified = true;
+      return prefix + mappedVar;
+    } else if (!mappedVar) {
+      // 记录未映射的字体大小
+      stats.skippedSizes.add(value);
+    }
+    
+    return match;
+  });
+  
+  return { content: newContent, modified };
+}
+
+/**
+ * 处理单个文件
+ */
+function processFile(filePath) {
+  try {
+    const content = fs.readFileSync(filePath, 'utf8');
+    const { content: newContent, modified } = processFileContent(content, filePath);
+    
+    if (modified) {
+      if (!isDryRun) {
+        fs.writeFileSync(filePath, newContent, 'utf8');
+      }
+      stats.modifiedFiles++;
+      console.log(`${isDryRun ? '📋 [预览]' : '✅'} ${filePath}`);
+      return true;
+    }
+    
+    return false;
+  } catch (error) {
+    console.error(`❌ 处理文件失败: ${filePath}`, error.message);
+    return false;
+  }
+}
+
+/**
+ * 主函数
+ */
+function main() {
+  const projectRoot = path.join(__dirname, '..');
+  const srcDir = path.join(projectRoot, 'src');
+  
+  console.log('🚀 开始扫描并转换 font-size 值...\n');
+  console.log(`📁 项目根目录: ${projectRoot}`);
+  console.log(`📁 扫描目录: ${srcDir}\n`);
+  
+  // 扫描所有目标文件
+  const files = scanDirectory(srcDir);
+  stats.totalFiles = files.length;
+  
+  console.log(`📊 找到 ${files.length} 个文件需要检查\n`);
+  console.log('🔄 开始处理文件...\n');
+  
+  // 处理每个文件
+  files.forEach(file => {
+    processFile(file);
+  });
+  
+  // 输出统计信息
+  console.log('\n' + '='.repeat(60));
+  console.log('📊 转换统计报告');
+  console.log('='.repeat(60));
+  console.log(`总文件数: ${stats.totalFiles}`);
+  console.log(`修改文件数: ${stats.modifiedFiles}`);
+  console.log(`总替换次数: ${stats.totalReplacements}`);
+  
+  if (Object.keys(stats.replacementDetails).length > 0) {
+    console.log('\n📋 替换详情:');
+    Object.entries(stats.replacementDetails)
+      .sort((a, b) => b[1] - a[1])
+      .forEach(([size, count]) => {
+        const varName = FONT_SIZE_MAP[size];
+        console.log(`  font-size: ${size} => ${varName}: ${count} 次`);
+      });
+  }
+  
+  if (stats.skippedSizes.size > 0) {
+    console.log('\n⚠️  未映射的字体大小（需要手动检查）:');
+    Array.from(stats.skippedSizes)
+      .sort()
+      .forEach(size => {
+        console.log(`  ${size}`);
+      });
+    console.log('\n💡 建议：');
+    console.log('   1. 检查这些值是否是特殊尺寸，需要保留');
+    console.log('   2. 如果需要映射，可以将其添加到 FONT_SIZE_MAP 中');
+    console.log('   3. 或考虑调整为最接近的标准尺寸');
+  }
+  
+  if (isDryRun) {
+    console.log('\n💡 提示: 这是预览模式，文件未被修改');
+    console.log('   移除 --dry-run 参数以实际应用更改');
+  } else {
+    console.log('\n✨ 转换完成！');
+  }
+}
+
+// 运行主函数
+if (require.main === module) {
+  main();
+}
+
+module.exports = { processFileContent };