AnCao/web/src/components/DemoButton.tsx
yanlongqi 441eb215f6 将CSS迁移到Less并添加用户认证功能
主要变更:
- 将所有CSS文件迁移到Less预处理器
- 配置Vite支持Less编译
- 使用Less变量、嵌套和父选择器优化样式代码
- 添加用户注册和登录功能
- 实现用户认证中间件和保护路由
- 新增Profile和Login页面
- 添加底部导航栏组件TabBarLayout
- 更新CLAUDE.md为中文文档

技术改进:
- Less变量统一管理主题色和间距
- CSS嵌套提高代码可读性和可维护性
- 模块化样式组织更清晰

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-03 23:21:38 +08:00

35 lines
835 B
TypeScript

import React from 'react'
import { Button, Space } from 'antd-mobile'
import styles from './DemoButton.module.less'
interface DemoButtonProps {
text?: string
onClick?: () => void
}
const DemoButton: React.FC<DemoButtonProps> = ({
text = '示例按钮',
onClick
}) => {
return (
<div className={styles.container}>
<Space direction="vertical" block>
<Button color="primary" block onClick={onClick}>
{text} - Primary
</Button>
<Button color="success" block onClick={onClick}>
{text} - Success
</Button>
<Button color="warning" block onClick={onClick}>
{text} - Warning
</Button>
<Button color="danger" block onClick={onClick}>
{text} - Danger
</Button>
</Space>
</div>
)
}
export default DemoButton