Skip to content

Commit a3e502c

Browse files
YuKongAYuKongA
committed
WIP 21
1 parent 9f65d25 commit a3e502c

File tree

16 files changed

+449
-62
lines changed

16 files changed

+449
-62
lines changed

‎docs/.vitepress/config.mts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,10 @@ export default defineConfig({
9696
text: '进阶',
9797
collapsed: false,
9898
items: [
99-
{ text: '多平台支持', link: '/guide/multiplatform' },
99+
{ text: '主题系统', link: '/guide/theme' },
100+
{ text: '图标系统', link: '/guide/icons' },
101+
{ text: '工具函数', link: '/guide/utils' },
102+
{ text: '平台支持', link: '/guide/multiplatform' },
100103
{ text: '最佳实践', link: '/guide/best-practices' },
101104
]
102105
}
@@ -165,6 +168,5 @@ export default defineConfig({
165168
},
166169
]
167170
},
168-
169171
}
170172
})

‎docs/components/topappbar.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ TopAppBar(
4141
largeTitle = "大标题", // 如果不指定，将使用 title 的值
4242
navigationIcon = {
4343
IconButton(onClick = { /* 处理点击事件 */ }) {
44-
Icon(MiuixIcons.Base.ArrowLeft, contentDescription = "返回")
44+
Icon(MiuixIcons.Basic.ArrowLeft, contentDescription = "返回")
4545
}
4646
},
4747
actions = {

‎docs/guide/best-practices.md‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,30 @@
1-
# 最佳实践
1+
# 最佳实践
2+
3+
Miuix UI 库已被多个开源项目采用。以下是一些基于 Miuix 创建的示例应用，它们展示了如何在实际项目中应用 Miuix 组件和设计理念。
4+
5+
## 示例应用
6+
本项目自身的示例应用展示了如何使用 Miuix 已包含的所有组件构建界面。您可以在示例应用中找到各种组件的用法和示例，帮助您更好地理解和使用 Miuix UI 库。
7+
8+
### Updater-KMP
9+
10+
[Updater-KMP](https://github.com/YuKongA/Updater-KMP) 是一个使用 Kotlin 多平台技术开发的获取小米系统更新的工具。该项目展示了如何利用 Miuix UI 组件构建跨平台一致的用户界面。
11+
12+
### StatusBarLyric
13+
14+
[StatusBarLyric](https://github.com/Block-Network/StatusBarLyric) 是一个在状态栏显示正在播放音乐歌词的 Xposed 应用。该项目展示了如何将 Miuix 组件与 Xposed 结合下的使用。
15+
16+
### XiaomiHelper
17+
18+
[XiaomiHelper](https://github.com/HowieHChen/XiaomiHelper) 是一个适用于 Xiaomi 解锁设备的 Xposed 大杂烩模块，提供多种系统优化和功能增强选项。该项目展示了如何使用 Miuix 构建复杂的多功能应用。
19+
20+
### OShin
21+
22+
[OShin](https://github.com/suqi8/OShin) 是一个适用于 OPPO 系解锁设备的 Xposed 大杂烩模块。该项目充分展示了如何以 Miuix 为基础创建更多样的组件。
23+
24+
### HyperStar
25+
26+
[HyperStar](https://github.com/YunZiA/HyperStar) 是一个适用于 Xiaomi 解锁设备的 Xposed 系统界面自定义模块。该项目展示了 Miuix 在复杂界面布局中的应用。
27+
28+
### Payload-Dumper-Compose
29+
30+
[Payload-Dumper-Compose](https://github.com/rcmiku/Payload-Dumper-Compose) 是一个基于 Jetpack Compose 的安卓系统镜像提取工具。

‎docs/guide/icons.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# 图标系统
2+
3+
Miuix 提供了丰富的内置图标系统，可以满足多数应用的主要设计需求。这些图标按功能和用途分为不同的类别，便于您在项目中使用。
4+
5+
## 使用方法
6+
7+
要在您的项目中使用 Miuix 图标，首先需要正确引入：
8+
9+
```kotlin
10+
import androidx.compose.foundation.layout.size
11+
import androidx.compose.runtime.Composable
12+
import androidx.compose.ui.Modifier
13+
import androidx.compose.ui.unit.dp
14+
import top.yukonga.miuix.kmp.basic.Icon
15+
import top.yukonga.miuix.kmp.icon.MiuixIcons
16+
```
17+
18+
然后，您可以通过以下方式使用图标：
19+
20+
```kotlin
21+
// 使用 Basic 分类下的 Check 图标
22+
Icon(
23+
imageVector = MiuixIcons.Basic.Check,
24+
contentDescription = "Check",
25+
modifier = Modifier.size(24.dp)
26+
)
27+
28+
// 使用 Useful 分类下的 Settings 图标
29+
Icon(
30+
imageVector = MiuixIcons.Useful.Settings,
31+
contentDescription = "Settings",
32+
modifier = Modifier.size(24.dp)
33+
)
34+
```
35+
36+
## 图标分类
37+
38+
Miuix 图标系统目前包含以下几个主要分类：
39+
40+
### Basic（基础图标）
41+
42+
基础图标包含一些常用的基本界面元素，如箭头、勾选等，这些图标在 Miuix 本身的组件中也会使用到。以下是完整的列表：
43+
44+
- `Check`: 勾选图标
45+
- `ArrowUpDown`: 上下箭头图标
46+
- `ArrowUpDownIntegrated`: 集成的上下箭头图标
47+
- `ArrowRight`: 向右箭头图标
48+
49+
### Useful（实用图标）
50+
51+
实用图标包含大量常用的功能性图标，适用于各种应用场景。以下是完整的列表：
52+
53+
| 图标名 | 描述 | 常见用途 |
54+
| ----------------- | ------------------ | -------------------------------- |
55+
| `AddSecret` | 添加加密内容图标 | 添加密码、隐私项等需要加密的内容 |
56+
| `Back` | 返回图标 | 导航返回上一级界面 |
57+
| `Blocklist` | 黑名单图标 | 拉黑用户、添加屏蔽项 |
58+
| `Cancel` | 取消图标 | 取消操作、关闭弹窗 |
59+
| `Copy` | 复制图标 | 复制内容到剪贴板 |
60+
| `Cut` | 剪切图标 | 剪切内容到剪贴板 |
61+
| `Delete` | 删除图标 | 删除项目、内容或文件 |
62+
| `Edit` | 编辑图标 | 编辑内容、修改信息 |
63+
| `ImmersionMore` | 沉浸式更多选项图标 | 沉浸模式下显示更多选项 |
64+
| `Info` | 信息图标 | 显示详细信息、提示 |
65+
| `Like` | 喜欢图标 | 点赞、收藏功能 |
66+
| `More` | 更多图标 | 显示更多选项或菜单 |
67+
| `Move` | 移动图标 | 移动项目到其他位置 |
68+
| `NavigatorSwitch` | 导航切换图标 | 切换导航视图 |
69+
| `New` | 新建图标 | 创建新内容、文件或项目 |
70+
| `Order` | 排序图标 | 内容排序 |
71+
| `Paste` | 粘贴图标 | 从剪贴板粘贴内容 |
72+
| `Personal` | 个人/用户图标 | 个人信息、用户页面 |
73+
| `Play` | 播放图标 | 播放媒体内容 |
74+
| `Reboot` | 重启图标 | 重启应用或系统 |
75+
| `Refresh` | 刷新图标 | 刷新内容或页面 |
76+
| `Remove` | 移除图标 | 移除项目（轻微删除） |
77+
| `RemoveBlocklist` | 移除黑名单图标 | 解除屏蔽 |
78+
| `RemoveSecret` | 移除加密内容图标 | 移除加密项 |
79+
| `Rename` | 重命名图标 | 重命名文件或项目 |
80+
| `Restore` | 恢复图标 | 恢复删除的内容 |
81+
| `Save` | 保存图标 | 保存内容或更改 |
82+
| `Scan` | 扫描图标 | 扫描二维码等 |
83+
| `Search` | 搜索图标 | 搜索内容 |
84+
| `SelectAll` | 全选图标 | 选择所有项目 |
85+
| `Settings` | 设置图标 | 应用或系统设置 |
86+
| `Share` | 分享图标 | 分享内容到其他平台 |
87+
| `Stick` | 置顶图标 | 将内容置顶 |
88+
| `Unlike` | 取消喜欢图标 | 取消点赞或收藏 |
89+
| `Unstick` | 取消置顶图标 | 取消内容置顶 |
90+
| `Update` | 更新图标 | 更新应用或内容 |
91+
92+
### Other（其他图标）
93+
94+
其他类别包含一些特定场景的图标。
95+
96+
- `GitHub`: GitHub 图标

‎docs/guide/multiplatform.md‎

Lines changed: 11 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# 多平台支持
1+
# 平台支持
22

33
Miuix 是一个支持多种平台的 Compose Multiplatform UI 框架，允许您使用相同的代码库在不同平台上构建应用程序。
44

@@ -64,28 +64,7 @@ fun MyResponsiveContent() {
6464
}
6565
```
6666

67-
## 设备特性获取
68-
69-
### 设备圆角
70-
71-
安卓设备的屏幕圆角不同且其他平台不存在屏幕圆角获取，您可以使用 `getRoundedCorner()` 函数获取设备的圆角大小（不存在时使用预设值）：
72-
73-
```kotlin
74-
@Composable
75-
fun AdaptiveRoundedComponent() {
76-
val cornerRadius = getRoundedCorner()
77-
Surface(
78-
shape = RoundedCornerShape(cornerRadius),
79-
// 其他属性
80-
) {
81-
// 内容
82-
}
83-
}
84-
```
85-
86-
## 平台特定行为处理
87-
88-
### 返回操作处理
67+
## 返回操作处理
8968

9069
Compose MultiPlatform 没有提供完整的跨平台 BackHandler 接口，因此 Miuix 提供了统一的 `BackHandler` 接口：
9170

@@ -100,24 +79,19 @@ fun Screen() {
10079
}
10180
```
10281

103-
## 最佳实践
82+
## 设备圆角
10483

105-
1. **预先适配检查**：在开发过程中定期在各目标平台上测试您的应用
106-
2. **响应式设计**：可以使用 `getWindowSize()` 创建适应不同屏幕尺寸的布局
107-
3. **条件渲染**：根据 `platform()` 的结果有条件地渲染组件或功能
108-
4. **平台特定扩展**：为特定平台创建扩展函数，使代码更整洁
84+
安卓设备的屏幕圆角不同且其他平台不存在屏幕圆角获取，您可以使用 `getRoundedCorner()` 函数获取设备的圆角大小（不存在时使用预设值）：
10985

11086
```kotlin
11187
@Composable
112-
fun PlatformSpecificFeature() {
113-
when (platform()) {
114-
Platform.Android, Platform.IOS -> MobileView()
115-
Platform.Desktop, Platform.MacOS -> DesktopView()
116-
Platform.WasmJs, Platform.Js -> WebView()
88+
fun AdaptiveRoundedComponent() {
89+
val cornerRadius = getRoundedCorner()
90+
Surface(
91+
shape = RoundedCornerShape(cornerRadius),
92+
// 其他属性
93+
) {
94+
// 内容
11795
}
11896
}
11997
```
120-
121-
## 平台特定依赖
122-
123-
为了优化应用体积，您可以只引入特定平台所需的依赖。请参考[快速开始](/guide/getting-started)部分了解如何添加特定平台的依赖。

‎docs/guide/theme.md‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
# 主题系统
2+
3+
Miuix 提供了一套完整的主题系统，使您能够轻松地在整个应用中保持一致的设计风格。整个主题系统由颜色方案和文本样式组成。
4+
5+
## 使用主题
6+
7+
要在您的应用中使用 Miuix 主题，只需将内容包装在 `MiuixTheme` 组合函数中：
8+
9+
```kotlin
10+
MiuixTheme {
11+
// 您的应用内容
12+
Scaffold(
13+
topBar = { /* ... */ },
14+
) { padding ->
15+
// 主体内容
16+
}
17+
}
18+
```
19+
20+
默认情况下，Miuix 会自动选择适合当前系统设置的浅色或深色主题。
21+
22+
## 颜色系统
23+
24+
Miuix 的颜色系统是基于 HyperOS 设计语言创建的，提供了一套完整的颜色方案，包括：
25+
26+
- 主色调（Primary colors）
27+
- 次要色调（Secondary colors）
28+
- 背景和表面色（Background and surface colors）
29+
- 文本色（Text colors）
30+
- 特殊状态颜色（如禁用状态）
31+
32+
### 主要颜色属性
33+
34+
以下是颜色系统中一些核心属性：
35+
36+
| 属性名 | 描述 | 用途 |
37+
| ----------- | ------------------ | ------------------ |
38+
| primary | 主色调 | 开关、按钮、滑块等 |
39+
| onPrimary | 主色调上的文本颜色 | 主色调上的文本 |
40+
| background | 背景色 | 应用背景 |
41+
| surface | 表面色 | 卡片、对话框等 |
42+
| onSurface | 表面色上的文本颜色 | 常规文本 |
43+
| dividerLine | 分隔线颜色 | 列表分隔线 |
44+
45+
### 使用颜色
46+
47+
在组合函数中，您可以通过 `MiuixTheme.colorScheme` 访问当前主题的颜色：
48+
49+
```kotlin
50+
val backgroundColor = MiuixTheme.colorScheme.background
51+
val textColor = MiuixTheme.colorScheme.onBackground
52+
53+
Surface(
54+
color = backgroundColor,
55+
modifier = Modifier.fillMaxSize()
56+
) {
57+
Text(
58+
text = "Hello Miuix!",
59+
color = textColor
60+
)
61+
}
62+
```
63+
64+
### 浅色和深色主题
65+
66+
Miuix提供了默认的浅色和深色主题颜色方案：
67+
68+
- `lightColorScheme()` - 浅色主题的颜色方案
69+
- `darkColorScheme()` - 深色主题的颜色方案
70+
71+
## 文本样式
72+
73+
Miuix 提供了一套预定义的文本样式，以保持整个应用中文本的一致性：
74+
75+
| 样式名 | 用途 |
76+
| --------- | ---------------- |
77+
| main | 主要文本 |
78+
| title1 | 大标题（32sp） |
79+
| title2 | 中标题（24sp） |
80+
| title3 | 小标题（20sp） |
81+
| body1 | 正文（16sp） |
82+
| body2 | 次要正文（14sp） |
83+
| button | 按钮文本（17sp） |
84+
| footnote1 | 脚注（13sp） |
85+
| footnote2 | 小脚注（11sp） |
86+
87+
### 使用文本样式
88+
89+
您可以通过 `MiuixTheme.textStyles` 访问当前主题的文本样式：
90+
91+
```kotlin
92+
Text(
93+
text = "这是一个标题",
94+
style = MiuixTheme.textStyles.title2
95+
)
96+
97+
Text(
98+
text = "这是一段正文内容",
99+
style = MiuixTheme.textStyles.body1
100+
)
101+
```
102+
103+
## 自定义主题
104+
105+
您可以通过提供自己的 `Colors` 和 `TextStyles` 实例来全局自定义 Miuix 主题：
106+
107+
```kotlin
108+
// 自定义颜色方案
109+
val customColors = lightColorScheme(
110+
primary = Color(0xFF6200EE),
111+
onPrimary = Color.White,
112+
background = Color(0xFFF5F5F5),
113+
// 其他颜色...
114+
)
115+
116+
// 自定义文本样式
117+
val customTextStyles = defaultTextStyles(
118+
title1 = TextStyle(
119+
fontSize = 36.sp,
120+
fontWeight = FontWeight.Bold
121+
),
122+
// 其他文本样式...
123+
)
124+
125+
// 应用自定义主题
126+
MiuixTheme(
127+
colors = customColors,
128+
textStyles = customTextStyles
129+
) {
130+
// 您的应用内容
131+
}
132+
```
133+
134+
## 响应系统深色模式
135+
136+
为了自动响应系统的深色模式设置，您应该使用 `isSystemInDarkTheme()` 函数：
137+
138+
```kotlin
139+
@Composable
140+
fun MyApp() {
141+
val isDarkTheme = isSystemInDarkTheme()
142+
val colors = if (isDarkTheme) {
143+
darkColorScheme()
144+
} else {
145+
lightColorScheme()
146+
}
147+
148+
MiuixTheme(colors = colors) {
149+
// 应用内容
150+
}
151+
}
152+
```

0 commit comments

Comments
 (0)