mirror of
https://github.com/QwenLM/qwen-code.git
synced 2025-12-19 09:33:53 +00:00
feat(vscode-ide-companion): add shadcn/ui components and utilities
添加 shadcn/ui 基础组件库和 cn 工具函数，包括： - Button 按钮组件 - Dialog 对话框组件 - cn 类名合并工具函数
This commit is contained in:
yiliang114
131
packages/vscode-ide-companion/src/lib/tailwindUtils.js
Normal file
131
packages/vscode-ide-companion/src/lib/tailwindUtils.js
Normal file
@@ -0,0 +1,131 @@
|
||||
// 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'
|
||||
};
|
||||
@@ -0,0 +1,87 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen Team
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*
|
||||
* Button component using Tailwind CSS
|
||||
* This is an example of how to create new components using Tailwind
|
||||
* while maintaining compatibility with existing CSS-based components
|
||||
*/
|
||||
|
||||
import type React from 'react';
|
||||
|
||||
interface ButtonProps {
|
||||
/**
|
||||
* Button variant style
|
||||
*/
|
||||
variant?: 'primary' | 'secondary' | 'ghost' | 'icon';
|
||||
|
||||
/**
|
||||
* Button size
|
||||
*/
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
|
||||
/**
|
||||
* Button contents
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
|
||||
/**
|
||||
* Optional click handler
|
||||
*/
|
||||
onClick?: () => void;
|
||||
|
||||
/**
|
||||
* Disable button
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Additional class names
|
||||
*/
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Primary UI component for user interaction
|
||||
*/
|
||||
export const Button: React.FC<ButtonProps> = ({
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
children,
|
||||
onClick,
|
||||
disabled = false,
|
||||
className = '',
|
||||
}) => {
|
||||
// Base classes that apply to all buttons
|
||||
const baseClasses = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none";
|
||||
|
||||
// Variant-specific classes
|
||||
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"
|
||||
};
|
||||
|
||||
// Size-specific classes
|
||||
const sizeClasses = {
|
||||
sm: "h-8 px-3 text-xs",
|
||||
md: "h-10 px-4 py-2 text-sm",
|
||||
lg: "h-12 px-6 text-base"
|
||||
};
|
||||
|
||||
// Combine all classes
|
||||
const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={classes}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
126
packages/vscode-ide-companion/src/webview/components/ui/Card.tsx
Normal file
126
packages/vscode-ide-companion/src/webview/components/ui/Card.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen Team
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*
|
||||
* Card component using Tailwind CSS
|
||||
* This demonstrates how to create new components with Tailwind
|
||||
* while maintaining compatibility with existing components
|
||||
*/
|
||||
|
||||
import type React from 'react';
|
||||
|
||||
interface CardProps {
|
||||
/**
|
||||
* Card contents
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
|
||||
/**
|
||||
* Additional class names
|
||||
*/
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface CardHeaderProps {
|
||||
/**
|
||||
* Card header contents
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
|
||||
/**
|
||||
* Additional class names
|
||||
*/
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface CardContentProps {
|
||||
/**
|
||||
* Card content contents
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
|
||||
/**
|
||||
* Additional class names
|
||||
*/
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface CardFooterProps {
|
||||
/**
|
||||
* Card footer contents
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
|
||||
/**
|
||||
* Additional class names
|
||||
*/
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Card container component
|
||||
*/
|
||||
const Card: React.FC<CardProps> & {
|
||||
Header: React.FC<CardHeaderProps>;
|
||||
Content: React.FC<CardContentProps>;
|
||||
Footer: React.FC<CardFooterProps>;
|
||||
} = ({
|
||||
children,
|
||||
className = '',
|
||||
}) => {
|
||||
return (
|
||||
<div className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Card header component
|
||||
*/
|
||||
const CardHeader: React.FC<CardHeaderProps> = ({
|
||||
children,
|
||||
className = '',
|
||||
}) => {
|
||||
return (
|
||||
<div className={`flex flex-col space-y-1.5 p-6 ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Card content component
|
||||
*/
|
||||
const CardContent: React.FC<CardContentProps> = ({
|
||||
children,
|
||||
className = '',
|
||||
}) => {
|
||||
return (
|
||||
<div className={`p-6 pt-0 ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Card footer component
|
||||
*/
|
||||
const CardFooter: React.FC<CardFooterProps> = ({
|
||||
children,
|
||||
className = '',
|
||||
}) => {
|
||||
return (
|
||||
<div className={`flex items-center p-6 pt-0 ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Compose the Card component with its subcomponents
|
||||
Card.Header = CardHeader;
|
||||
Card.Content = CardContent;
|
||||
Card.Footer = CardFooter;
|
||||
|
||||
export { Card };
|
||||
Reference in New Issue
Block a user