mirror of
https://github.com/zimplexing/OrionTV.git
synced 2026-02-11 10:04:44 +08:00
504f12067b
- Replaced custom button implementations with StyledButton in various components including DetailScreen, HomeScreen, SearchScreen, and SettingsModal. - Updated button styles and behaviors to align with the new StyledButton component. - Removed the obsolete DetailButton component to streamline the codebase.
78 lines
2.6 KiB
Markdown
78 lines
2.6 KiB
Markdown
# StyledButton 组件设计文档
|
||
|
||
## 1. 目的
|
||
|
||
为了统一整个应用中的按钮样式和行为，减少代码重复，并提高开发效率和一致性，我们设计了一个通用的 `StyledButton` 组件。
|
||
|
||
该组件将取代以下位置的自定义 `Pressable` 和 `TouchableOpacity` 实现：
|
||
|
||
- `app/index.tsx` (分类按钮, 头部图标按钮)
|
||
- `components/DetailButton.tsx`
|
||
- `components/EpisodeSelectionModal.tsx` (剧集分组按钮, 剧集项按钮, 关闭按钮)
|
||
- `components/SettingsModal.tsx` (取消和保存按钮)
|
||
- `app/search.tsx` (清除按钮)
|
||
- `components/MediaButton.tsx` (媒体控制按钮)
|
||
- `components/NextEpisodeOverlay.tsx` (取消按钮)
|
||
|
||
## 2. API 设计
|
||
|
||
`StyledButton` 组件将基于 React Native 的 `Pressable` 构建，并提供以下 props：
|
||
|
||
```typescript
|
||
import { PressableProps, StyleProp, ViewStyle, TextStyle } from "react-native";
|
||
|
||
interface StyledButtonProps extends PressableProps {
|
||
// 按钮的主要内容，可以是文本或图标等 React 节点
|
||
children?: React.ReactNode;
|
||
|
||
// 如果按钮只包含文本，可以使用此 prop 快速设置
|
||
text?: string;
|
||
|
||
// 按钮的视觉变体，用于应用不同的预设样式
|
||
// 'default': 默认灰色背景
|
||
// 'primary': 主题色背景，用于关键操作
|
||
// 'ghost': 透明背景，通常用于图标按钮
|
||
variant?: "default" | "primary" | "ghost";
|
||
|
||
// 按钮是否处于选中状态
|
||
isSelected?: boolean;
|
||
|
||
// 覆盖容器的样式
|
||
style?: StyleProp<ViewStyle>;
|
||
|
||
// 覆盖文本的样式 (当使用 `text` prop 时生效)
|
||
textStyle?: StyleProp<TextStyle>;
|
||
}
|
||
```
|
||
|
||
## 3. 样式和行为
|
||
|
||
### 状态样式:
|
||
|
||
- **默认状态 (`default`)**:
|
||
- 背景色: `#333`
|
||
- 边框: `transparent`
|
||
- **聚焦状态 (`focused`)**:
|
||
- 背景色: `#0056b3` (深蓝色)
|
||
- 边框: `#fff`
|
||
- 阴影/光晕效果
|
||
- 轻微放大 (`transform: scale(1.1)`)
|
||
- **选中状态 (`isSelected`)**:
|
||
- 背景色: `#007AFF` (亮蓝色)
|
||
- **主操作 (`primary`)**:
|
||
- 默认背景色: `#007AFF`
|
||
- **透明背景 (`ghost`)**:
|
||
- 默认背景色: `transparent`
|
||
|
||
### 结构:
|
||
|
||
组件内部将使用 `Pressable` 作为根元素，并根据 `focused` 和 `isSelected` props 动态计算样式。如果 `children` 和 `text` prop 都提供了，`children` 将优先被渲染。
|
||
|
||
## 4. 实现计划
|
||
|
||
1. **创建 `components/StyledButton.tsx` 文件**。
|
||
2. **实现上述 API 和样式逻辑**。
|
||
3. **逐个重构目标文件**，将原有的 `Pressable`/`TouchableOpacity` 替换为新的 `StyledButton` 组件。
|
||
4. **删除旧的、不再需要的样式**。
|
||
5. **测试所有被修改的界面**，确保按钮的功能和视觉效果符合预期。
|