qwen-code/packages/vscode-ide-companion/src/lib/tailwindUtils.js

// Tailwind CSS 工具类集合
// 用于封装常用的样式组合，便于在组件中复用

/**
 * 生成按钮样式类
 * @param {string} variant - 按钮变体: 'primary', 'secondary', 'ghost', 'icon'
 * @param {boolean} disabled - 是否禁用
 * @returns {string} Tailwind类字符串
 */
export const buttonClasses = (variant = 'primary', disabled = false) => {
  const baseClasses = 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2';

  const variantClasses = {
    primary: 'bg-qwen-orange text-qwen-ivory hover:bg-qwen-clay-orange shadow-sm',
    secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700',
    ghost: 'hover:bg-gray-100 dark:hover:bg-gray-800',
    icon: 'hover:bg-gray-100 dark:hover:bg-gray-800 p-1'
  };

  const disabledClasses = disabled ? 'opacity-50 pointer-events-none' : '';

  return `${baseClasses} ${variantClasses[variant] || variantClasses.primary} ${disabledClasses}`;
};

/**
 * 生成输入框样式类
 * @returns {string} Tailwind类字符串
 */
export const inputClasses = () => {
  return 'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
};

/**
 * 生成卡片样式类
 * @returns {string} Tailwind类字符串
 */
export const cardClasses = () => {
  return 'rounded-lg border bg-card text-card-foreground shadow-sm';
};

/**
 * 生成对话框样式类
 * @returns {string} Tailwind类字符串
 */
export const dialogClasses = () => {
  return 'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50';
};

/**
 * 生成Qwen品牌颜色类
 * @param {string} color - 颜色名称: 'orange', 'clay-orange', 'ivory', 'slate', 'green'
 * @returns {string} Tailwind类字符串
 */
export const qwenColorClasses = (color) => {
  const colorMap = {
    'orange': 'text-qwen-orange',
    'clay-orange': 'text-qwen-clay-orange',
    'ivory': 'text-qwen-ivory',
    'slate': 'text-qwen-slate',
    'green': 'text-qwen-green'
  };

  return colorMap[color] || 'text-qwen-orange';
};

/**
 * 生成间距类
 * @param {string} size - 尺寸: 'small', 'medium', 'large', 'xlarge'
 * @param {string} direction - 方向: 'all', 'x', 'y', 't', 'r', 'b', 'l'
 * @returns {string} Tailwind类字符串
 */
export const spacingClasses = (size = 'medium', direction = 'all') => {
  const sizeMap = {
    'small': 'small',
    'medium': 'medium',
    'large': 'large',
    'xlarge': 'xlarge'
  };

  const directionMap = {
    'all': 'p',
    'x': 'px',
    'y': 'py',
    't': 'pt',
    'r': 'pr',
    'b': 'pb',
    'l': 'pl'
  };

  return `${directionMap[direction]}-${sizeMap[size]}`;
};

/**
 * 生成圆角类
 * @param {string} size - 尺寸: 'small', 'medium', 'large'
 * @returns {string} Tailwind类字符串
 */
export const borderRadiusClasses = (size = 'medium') => {
  const sizeMap = {
    'small': 'rounded-small',
    'medium': 'rounded-medium',
    'large': 'rounded-large'
  };

  return sizeMap[size] || 'rounded-medium';
};

// 导出常用的类组合
export const commonClasses = {
  // 布局类
  flexCenter: 'flex items-center justify-center',
  flexBetween: 'flex items-center justify-between',
  flexCol: 'flex flex-col',

  // 文本类
  textMuted: 'text-gray-500 dark:text-gray-400',
  textSmall: 'text-sm',
  textLarge: 'text-lg',
  fontWeightMedium: 'font-medium',
  fontWeightSemibold: 'font-semibold',

  // 间距类
  marginAuto: 'm-auto',
  fullWidth: 'w-full',
  fullHeight: 'h-full',

  // 其他常用类
  truncate: 'truncate',
  srOnly: 'sr-only',
  transition: 'transition-all duration-200 ease-in-out'
};