主要变更: - 将所有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>
35 lines
835 B
TypeScript
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
|